@charset "UTF-8";
/* CSS Document */

/*

---      ---  ________
\   \   /  / |_____   |  
 \   \ /  /       /  /
  \      /  hi!  /  /
   \    /       /  /
    |   ||ʘ‿ʘ)╯/  /
    |   |     /  /_____
    |   |    /_________|    
    |___|

*/
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap');
/*GENERAL STYLES*/
body {font-family: 'Lato', monospace; font-size:24px; margin-top:0; background-image: url("../images/iced.jpg");width:100vw; height:100vh;}

h1 {font-size:10vh;}

* {
		margin: 0;
		color: #000;
		text-decoration: none;
	}

header {height:50vh; background-color:red;margin-left:5vw;}
logo {height:30vh; width: 100vw;margin-left:5vw; float:left;}
nav {color:red; font-family:'Playfair Display'; font-size: 15vh;margin-left:5vw;padding-top:40vh;}
ul {list-style-type:none;}
ul li a:hover{color:saddlebrown;}

.translate-up:hover {
			transform: translateY(-50px);
				-ms-transform: translateY(-50px);
				-webkit-transform: translateY(-50px);
		}
.translate-left:hover {
			transform: translateX(-50px);
				-ms-transform: translateX(-50px);
				-webkit-transform: translateX(-50px);
		}
.scale-times-two:hover {
			transform: scale(1.2);
				-ms-transform: scale(1.2);
				-webkit-transform: scale(1.2);
		}

.fade-in {
	animation-name: fade-in;
		-moz-animation-name: fade-in;
		-ms-animation-name: fade-in;
		-o-animation-name: fade-in;
		-webkit-animation-name: fade-in;
	animation-duration: 1s;
		-moz-animation-duration: 1s;
		-o-animation-duration: 1s;
		-webkit-animation-duration: 1s;
	animation-fill-mode: backwards;
		-moz-animation-fill-mode: backwards;
		-o-animation-fill-mode: backwards;
		-webkit-animation-fill-mode: backwards;
}

#background {height:100vw; display:flex; justify-content: center; align-items: center;}
section {color: white; width:75vw; font-size: 5vh;background-color:black; float:right;padding:5%;}

footer {height:10vh; width: 100vw; background-color:palevioletred; clear:both; text-align: center; color: white; font-size: 3vh;text-align: center;}
footer ul {margin-left:0; padding-left:0;background-color:clear;}
footer li {display:inline-block; width:100px; margin:0 auto; padding-top:12px; color: #fff9e3;}
footer li a:link {color:white; text-decoration:none;}
footer li a:visited {color:white; text-decoration:none;}
footer li a:hover {color:black; text-decoration:overline;}
footer li a:active {color:black; text-decoration:underline;}

/*phone*/
@media screen and (min-width: 480px) and (max-width: 511px) {

		figure#phablet {
			width: 480px;
			margin: 2vh auto 0 auto;
		}
	
section {color: white; width:75vw; font-size: 5vh;background-color:black; float:right;padding:5%;}
	
	}
/*tablet*/
@media screen and (min-width: 768px) and (max-width: 1365px) {

		figure#tablet {
			width: 768px;
			height: 1024px;
			margin: 2vh auto 0 auto;
		}

	}