@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,500;1,300;1,500&display=swap');
 
 :root {
	--red: 			rgba(220,70,0,1);
	--green: 		rgba(30,120,100,1);
	--black: 		rgba(20,20,20,1);
	--grey: 		rgba(245,245,245,1);
	--white: 		rgba(255,255,255,1);
}

*{ margin: 0; padding: 0; box-sizing: border-box; } 
html { scroll-behavior: smooth; }
body{ background: var(--white); color: var(--black); font-size:100%; font-family: "Lato", sans-serif; font-weight: 500; }


@keyframes bounce { 0%, 25%, 50%, 75%, 100% {transform: translateY(0);} 40% {transform: translateY(-20px);} 60% {transform: translateY(-12px);} }

h1 {}
h2 {}
h3 {font-size: 1rem;}
h4 {}
h5 {}
h6 {}

a:link, a:visited { color: var(--green); text-decoration: none;}
a:active, a:hover, a:focus { color: var(--red); }
a.button:link, a.button:visited { padding: 1em; border-radius: 2em; color: var(--white); background: var(--red); }
a.button:active, a.button:hover, a.button:focus { color: var(--white); background: var(--green); }

nav { height: 5rem; position: fixed; width: 100%; background: var(--white); box-shadow: 0 0 4px var(--black); z-index: 100; display: flex; justify-content: center; align-items: center; padding: 1rem; }
nav h1 { }
nav h1 a { display: block; }
nav h1 img { height: 3rem; width: auto; }
nav h1 a span { display: none; }
nav ul { list-style: none; display: flex; justify-content: center; font-size: .85rem;}
nav ul li { margin-right: 1rem; }

header { height: 100vh; padding: 10vh 0; display: flex; justify-content: space-between; flex-direction: column; align-items: center; text-align: center; background: var(--white); position: relative; z-index: 200; background-image: url(img/bg.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat;}
header > img { max-height: 50vh; max-width: 350px; width: auto; height: auto; filter: drop-shadow(15px 15px 10px rgba(0, 0, 0, 0.5));
}
 }
header > h2 { color: var(--red); }
header a.button { animation: bounce 5s infinite; }

main {  text-align: center; }
main section { height: 100vh; padding-top: 3rem; display: flex; justify-content: space-evenly; flex-direction: column; align-items: center; max-width: 340px; margin: 0 auto;}
main section div { display: flex; justify-content: space-evenly; flex-direction: column; align-items: center; }
main section p { text-align: left; width: 340px; padding: .5rem 0;}
main section > a {display: block; margin: 5px;}
main section div > img { width: 340px; height: auto; }
main section div > ul { width: 340px; text-align: left; padding-left: 50px; padding-top: 25px; }
main section figure { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0;}
main section figure > img { width: 180px; height: auto; }
main section figure > figcaption { width: 150px; padding-left: 10px; text-align: left; }

footer { height: 100vh; padding-top: 10vh; display: flex; justify-content: space-evenly; flex-direction: column; align-items: center; text-align: center;  }
footer h3 { margin-bottom: 10px;}

@media (max-aspect-ratio: 1/1) {

}

@media (min-width: 480px) {
	nav { height: 5rem; }
	nav h1 a { }
	nav ul {font-size: 1rem;}
	
	main section { max-width: 960px; padding-top: 4rem; }
	main section > img { height: 60vh; width: auto; }
	main section div { flex-direction: row; align-items: flex-start; width: 100%; justify-content: space-evenly; align-items: center; }
	main section div > * { width: 45%;}
	main section div > ul { padding-left: 0; padding-top: 0; }
	main section figure { flex-direction: column; width: 30%; justify-content: space-evenly; }
	main section figure > img { width: 100%; }
	main section figure > figcaption { width: 80%; padding-left: 0; }
}