@charset "utf-8";
/* CSS Document */
body {margin: 0; font-size: 100%; background-color: #686868; font-family: Alexandria;}

nav li {display: inline-block; margin: 40px}

#socialmedia {width: 62%; float: right;padding-bottom: 10%}

ul img {height: 40px; margin-left: 20%}

#socialmedia li {display: inline-block; width: 20%;}

li a {color: #FFEA00; text-decoration: none; font-size: 40px; margin-right: 10px;}

.hamburger {display: none;}

#bottom-nav {display: none;}

header {padding: 60px;}

#navbar {float: right; margin-top: 25px;}

#navbar a {margin: 10px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 17px;}

h1 {color: #FFEA00; font-size: 80px; margin-left:300px}

#navbar a:hover {background-color: #ddd;color: black;}

#navbar a.active {background-color: #FFEA00; color: black;}

#navbar a.active:hover {background-color: green; color:#ddd;}


.grid {
  display: flex;
  gap: 20px;
  justify-items: center;}


.button:hover {background-color: green; color:#ddd;}

.item img {
  height: 200px;
  object-fit: cover;
	border-radius: 10px;}

.button {display: inline-block;
  background: #FFEA00;
  color: black;
  padding: 10px 15px;
  border: none;
  text-decoration: none;
  font-weight: bold;
border-radius: 10px;}
#navbar1 {display: none;}

@media screen and (max-width: 1278px) {nav {display: none;}}

@media screen and (max-width: 1238px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin: 15px}
	h1 {margin-left: 250px;}
	#container {padding:44px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	.grid {flex-wrap: wrap;
  display: flex;
  justify-items: center;}
	
	.hamburger {display: block; float: right; width: 100px; height: auto; margin-top: 40px;} 
	.hamburger img {width: 100%; height: auto;} #bottom-nav {display: block; font-family: Alexandria; margin-left: 34%; padding-bottom: 50px;}		
	#socialmedia {padding-top: 10%}
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.item img {height:auto; width: 100%; display:block;}
	
	.button {text-align: center;
    padding: 10px;
    font-size: 1em;}}

@media screen and (max-width: 1166px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin: 3px}
	h1 {margin-left: 250px;}
	#container {padding:44px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	.grid {flex-wrap: wrap;
  display: flex;
  justify-items: center;}
	
	.hamburger {display: block; float: right; width: 100px; height: auto; margin-top: 40px;} 
	.hamburger img {width: 100%; height: auto;} 
	#bottom-nav {display: block; font-family: Alexandria; margin-left: 30%; padding-bottom: 50px;}		
	#socialmedia {padding-top: 10%}
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.item img {height:auto; width: 100%; display:block;}
	
	.button {text-align: center;
    padding: 10px;
    font-size: 1em;}}

@media screen and (max-width: 1145px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin: -10px}
	h1 {margin-left: 250px;}
	#container {padding:44px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	.grid {flex-wrap: wrap;
  display: flex;
  justify-items: center;}
	
	.hamburger {display: block; float: right; width: 100px; height: auto; margin-top: 40px;} 
	.hamburger img {width: 100%; height: auto;} 
	#bottom-nav {display: block; font-family: Alexandria; margin-left: 30%; padding-bottom: 50px;}		
	#socialmedia {padding-top: 10%}
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.item img {height:auto; width: 100%; display:block;}
	
	.button {text-align: center;
    padding: 10px;
    font-size: 1em;}}

@media screen and (max-width: 1094px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-right: 261px}
	h1 {margin-left: 250px;}
	#container {padding:44px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	.grid {flex-wrap: wrap;
  display: flex;
  justify-items: center;}
	
	.hamburger {display: block; float: right; width: 100px; height: auto; margin-top: 40px;} 
	.hamburger img {width: 100%; height: auto;} 
	#bottom-nav {display: block; font-family: Alexandria; margin-left: 30%; padding-bottom: 50px;}		
	#socialmedia {padding-top: 10%}
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.item img {height:auto; width: 100%; display:block;}
	
	.button {text-align: center;
    padding: 10px;
    font-size: 1em;}}

@media screen and (max-width: 812px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-right: 110px}
	h1 {margin-left: 250px;}
	#container {padding:44px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	.grid {flex-wrap: wrap;
  display: flex;
  justify-items: center;}
	
	.hamburger {display: block; float: right; width: 100px; height: auto; margin-top: 40px;} 
	.hamburger img {width: 100%; height: auto;} 
	#bottom-nav {display: block; font-family: Alexandria; margin-left: 24%; padding-bottom: 50px;}		
	#socialmedia {padding-top: 10%}
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.item img {height:auto; width: 100%; display:block;}
	
	.button {text-align: center;
    padding: 10px;
    font-size: 1em;}}

@media screen and (max-width: 742px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-right: 89px}
	h1 {margin-left: 206px;}
	#container {padding:44px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	.grid {flex-wrap: wrap;
  display: flex;
  justify-items: center;}
	
	.hamburger {display: block; float: right; width: 100px; height: auto; margin-top: 40px;} 
	.hamburger img {width: 100%; height: auto;} 
	#bottom-nav {display: block; font-family: Alexandria; margin-left: 24%; padding-bottom: 50px;}		
	#socialmedia {padding-top: 10%}
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.item img {height:auto; width: 100%; display:block;}
	
	.button {text-align: center;
    padding: 10px;
    font-size: 1em;}}

@media screen and (max-width: 654px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-right: 38px}
	h1 {margin-left: 143px;}
	#container {padding:44px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	.grid {flex-wrap: wrap;
  display: flex;
  justify-items: center;}
	
	.hamburger {display: block; float: right; width: 100px; height: auto; margin-top: 40px;} 
	.hamburger img {width: 100%; height: auto;} 
	#bottom-nav {display: block; font-family: Alexandria; margin-left: 20%; padding-bottom: 50px;}		
	#socialmedia {padding-top: 10%}
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.item img {height:auto; width: 100%; display:block;}
	
	.button {text-align: center;
    padding: 10px;
    font-size: 1em;}}

@media screen and (max-width: 604px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-right: -13px}
	h1 {margin-left: 143px;}
	#container {padding:44px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	.grid {flex-wrap: wrap;
  display: flex;
  justify-items: center;}
	
	.hamburger {display: block; float: right; width: 100px; height: auto; margin-top: 40px;} 
	.hamburger img {width: 100%; height: auto;} 
	#bottom-nav {display: block; font-family: Alexandria; margin-left: 15%; padding-bottom: 50px;}		
	#socialmedia {padding-top: 10%}
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.item img {height:auto; width: 100%; display:block;}
	
	.button {text-align: center;
    padding: 10px;
    font-size: 1em;}}

@media screen and (max-width: 550px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-right: -38px}
	h1 {margin-left: 143px;}
	#container {padding:44px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	.grid {flex-wrap: wrap;
  display: flex;
  justify-items: center;}
	
	.hamburger {display: block; float: right; width: 100px; height: auto; margin-top: 40px;} 
	.hamburger img {width: 100%; height: auto;} 
	#bottom-nav {display: block; font-family: Alexandria; margin-left: 15%; padding-bottom: 50px;}		
	#socialmedia {padding-top: 10%}
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.item img {height:auto; width: 100%; display:block;}
	
	.button {text-align: center;
    padding: 10px;
    font-size: 1em;}}

@media screen and (max-width: 524px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-right: -52px}
	h1 {margin-left: 143px;}
	#container {padding:44px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	.grid {flex-wrap: wrap;
  display: flex;
  justify-items: center;}
	
	.hamburger {display: block; float: right; width: 100px; height: auto; margin-top: 40px;} 
	.hamburger img {width: 100%; height: auto;} 
	#bottom-nav {display: block; font-family: Alexandria; margin-left: 15%; padding-bottom: 50px;}		
	#socialmedia {padding-top: 10%}
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.item img {height:auto; width: 100%; display:block;}
	
	.button {text-align: center;
    padding: 10px;
    font-size: 1em;}}