/*--

	......................................................................................
	...................mmmmmm.......mmmmmm...................mmmmmm.......mmmmmm..........
	........mmmmmm...mmmmmmmmmm...mmmmmmmmmmm.....mmmmmm...mmmmmmmmmm...mmmmmmmmmm........
	........mmmmmm.mm.........mmmm..........mmm...mmmmmm.mm.........mmmm..........mmm.....
	........mmmmmmmm...........mm...........mmm...mmmmmmmm...........mm...........mmm.....
	........mmmmmm.............mm...........mmm...mmmmmm.............mm...........mmm.....
	........mmmmmm.............mm...........mmm...mmmmmm.............mm...........mmm.....
	........mmmmmm.............mm...........mmm...mmmmmm.............mm...........mmm.....
	........mmmmmm.............mm...........mmm...mmmmmm.............mm...........mmm.....
	........mmmmmm.............mm...........mmm...mmmmmm.............mm...........mmm.....
	........mmmmmm.............mm...........mmm...mmmmmm.............mm...........mmm.....
	......................................................................................

	Minerva's Ascii art logo = my initials 
--*/


/* ------------------------
--------CSS RESET ---------
-------------------------*/

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
	color: #ffecd1;
}


/*--------- CUSTOM FONT --------*/

@font-face {
	font-family: marylin;
	src: url("../fonts/Marylin.ttf");
}


/*---------- BUTTON ------------*/
button {

	position: fixed;
	top: 25px;
	left: 1270px;
	
	font-size: 3em;
	line-height: 0;
	padding:28px 10px 30px 10px;
	border: 4px solid #ffecd1;
	border-radius: 10%;
	background-color: rgba(255, 236, 209, 0.3);
}

	button:hover {
		background-color:#fff;
		color: #000;

	}

nav {
	position: fixed;
	top: 120px;
	left: 1440px;
	z-index: 1;
	font-size: 2em;
	transition: left 0.5s;
	background-color: #15616d;
	border: 3px solid #001524;
	border-radius: 10%;
	padding: 14px 18px;
	color: #ffecd1;
	font-family: marylin, sans serif;
	text-decoration: none;
}
	.slide-the-drawer {
		left: 1080px;
	}

	nav a:hover {
		background-color: #ff7d00;
		border: 2px solid #001524;
		padding: 3px 10px 3px 10px;
		border-radius: 15%;


	}

body#background {
	background-image: url("../imgs/blurryBURGER2.jpg");
 background-repeat: no-repeat;
}

article#lowopacitybox {
	width: 80vw;
	height:45vw;
	background-color: #001524;
	opacity: 50%;
	border-radius: 10%;
	margin-left: 10%;
	margin-top: 5%;
	position:absolute;

	
}



#logo {
	position: absolute;
	margin-top: 8.5%;
	margin-left: 33.5%;


}

#info {
	font-family: marylin, sans serif;
	font-size: 2.314814814815vw;
	color: #ffecd1;
	margin-top: 42%;
	margin-left: 27%;
	text-align: center;
	position: absolute;

}

#icon-one {
	top: 25px;
	left: 40px;
	position: fixed;
}
	#icon-one:hover {

		background-color: #15616d;
		border-radius: 15%;
	}


#icon-two {
	top: 25px;
	left: 100px;
	position: fixed;
	
}

	#icon-two:hover{

		background-color: #15616d;
		border-radius: 15%;
		

		}


/*----------------------------------------------
---------- Media Rule Declarations -------------
-----------------------------------------------*/



/*--------- phablet--------}*/

@media screen and (min-width: 480px) and (max-width: 766px) {
	figure {
		width: 480px;
		height: 627px;
	}


/*--------- tablet --------*/

@media screen and (min-width: 767px) and (max-width: 1365px) {
	figure {
		width: 768px;
		height:1024px;
	}
}