/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
/*	border: 0;*/
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*moblie styles starts here*/

a {
	text-decoration: none;

}
h1 a, h1 a:visited {
	color: #F2F2F2;
}

h1 a:active, h1 a:hover {
	color: #BBBBBB;
}

nav a, nav a:visited {
	color: #BF625A;
}

nav a:active, nav a:hover {
	color: #FFAAAA;
}

header {
	 padding-top: 4%;
}

h1 {
	text-align: center;
	font-family: 'Russo One', sans-serif;
	font-size: 4em;
	color: #F2F2F2;
	text-shadow: 7px 4px #000;
    letter-spacing: 3px;

}
nav {
	display: flex;
	justify-content: center;
	text-align: center;
	font-family: 'Russo One', sans-serif;
    letter-spacing: 2px;
	font-size: 1.3em;
	color: #8C8988;

}

nav ul {
	display: flex;
}
nav ul li {
	padding: 2% 4% ;

}

h2 {
	text-align: center;
	font-family: 'Russo One', sans-serif;
	margin: 3% auto;
	font-size: 1.4em;
	color: #F2F2F2;
}

h3 {
	font-family: 'Russo One', sans-serif;
	text-align: center;
	padding: 3% 0;
	font-size: 1.1em;
	color: #F2F2F2;
    border-bottom: 2px solid #F2F2F2;

}


#wrapper {
	background-color: #3E3E40;

}


.container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1%;
	width: 90%;
    margin: auto;

}

#about img {
	width:100%;

}

#about {
	margin:auto;
	width:70%;
}
#intro{
	border-top: 2px solid white;
    margin-top: 2%;
}

#about p {
	padding: 2%;
	color: #F2F2F2;
	font-family: 'Saira Semi Condensed', sans-serif;
}



.container img {
	width: 50%;
	margin:auto;
}
.right {
	margin: auto;
}

.right ul {
	font-family: 'Saira Semi Condensed', sans-serif;
	margin-top: 3%;
}

.right ul li {
	padding: 2%;
	color: #F2F2F2;
}

.right ul li span {
	font-weight: bold;
	color: #BF625A;
}

/*moblie styles ends here*/


                /*MEDIA QUIRES*/

/*OPENS TABLET styles*/
@media only screen and (min-width:600px) and (max-width:800px) {


	h1 {
		font-size: 5.2em;
	}

	h2 {
		font-size: 1.9em;
	}

	h3 {
		font-size: 1.1em;

	}
	nav {
		font-size: 1.7em;
	}
	.right ul {
		font-size: 1.1em;
	}

	#about p {
		font-size: 1.1em;
	}
	.container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1%;
		width: 70%;
	    margin: auto;
	}


} /*tablet styles ends here*/


/*OPENS DESKTOP styles*/
@media only screen and (min-width:801px) {

	h1 {
		font-size: 5.9em;
	}

	h2 {
		font-size: 2.3em;
	}

	h3 {
		font-size: 1.7em;

	}
	nav {
		font-size: 2.1em;
	}
	.right ul {
		font-size: 1.5em;
	}

	#about p {
		font-size: 1.2em;
	}
	.container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1%;
		width: 60%;
	    margin: auto;
	}



}/*desktop styles ends here*/