/*this is appart of the defalt css for the style sheet*/

body{
	background-color: royalblue;
	text-align: center;
	font-family: Helvetica, Ariel, sans-serif;
	font-size: 20px;

}

/*this is text for the types of dispays that would be going into my code*/

/* This is for the desktop display */
@media only screen and (min-width: 700px) {

  #grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 equal width columns */
    grid-gap: 5%;
    font-size: 1em; 
  }

}

#grid-item {
display: grid;
    font-size: 1em;

	}

/*mobile screen display code*/

@media only screen and (max-width: 600px)
 {
  #grid {
    margin: 3% 2%; /* Less margin on mobile */
  }

}

/* responsive image code for css for desktop/mobile  */

figure {
  max-width: 100%;
  margin: 5% auto;
  max-inline-size: 100%;

}

img {
    max-width: 100%;
  max-inline-size: 100%;
    height: auto;
}

/*this will be the code after the grid part and web design */

#wrapper {
	width: 1000px;
	padding: 20px;
	border: 4px dotted; 
	border-color:lightgray;
		background-color: rgba(32, 86, 98, .7);
			/*this color is a cyan blue for the rgba color background I chose this color because of a custom adobe kouler pallet*/
	margin: 20px auto;
	 padding: 35px 85px 85px 100px;

	}


type:first-letter {
				font-size: 40px;
					color: mediumaquamarine;
}



h1 {	
	color:mediumaquamarine;
	font-size: 2em;
}

h3 {	
	color:firebrick;
	font-size: 2em;
}

	.background{
	background-image: url(img/tardis-photo.png);
	background-repeat: no-repeat;
	background-position: 600px 100px;
	background-attachment: fixed;
	background-size: 20%;


/*this is because I have 2 background images that im using, one is halfway though the page while the other one is on the bottom.*/

	background-image: url(dalak.png);
	background-repeat: no-repeat;
	background-position: 600px 100px;
	background-attachment: fixed;
	background-size: 20%;
}

.infomation {

	text-align:center;
	border: 4px solid palevioletred;
	background-color: lightyellow;

}


#links {

	text-align:center;
	border: 4px solid palevioletred;
	background-color: lightyellow;

	a;link , a:visited {
	color: forestgreen;
	text-decoration: none;


}

a:hover, a:focus {
	color:darkred;


}