@charset "utf-8";
/* CSS Document */
header {padding: 60px;}

body {margin: 0; font-size: 100%; background-color: #686868; font-family: Alexandria; color: #FFFFFF;  padding: 0;}

#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;}


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


.content {padding: 16px;}

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

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


.hamburger {display: none;}

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

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

#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;}

#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;}

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

main {padding: 20px;
    text-align: center;}

h1 {color: #FFEA00; font-family: impact;
    font-size: 5em;
    margin-bottom: 20px;}

p {font-size: 26px; font-weight: bold;  }

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;}

.image-gallery img {
    max-width: 45%;
    border-radius: 8px;}

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

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

#bottom-nav {display: none;}
#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-left: 0px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	
	.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 {display: block; font-family: Alexandria; margin-left: 34%; padding-bottom: 50px;}	
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.image-gallery img {max-width: 100%;
    border-radius: 8px;}}

@media screen and (max-width: 1116px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-left: -29px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	
	.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 {display: block; font-family: Alexandria; margin-left: 34%; padding-bottom: 50px;}	
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.image-gallery img {max-width: 100%;
    border-radius: 8px;}}

@media screen and (max-width: 1092px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-right: 270px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	
	.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 {display: block; font-family: Alexandria; margin-left: 34%; padding-bottom: 50px;}	
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.image-gallery img {max-width: 100%;
    border-radius: 8px;}}

@media screen and (max-width: 800px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-right: 139px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	
	.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 {display: block; font-family: Alexandria; margin-left: 20%; padding-bottom: 50px;}	
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.image-gallery img {max-width: 100%;
    border-radius: 8px;}}

@media screen and (max-width: 686px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-right: 60px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	
	.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 {display: block; font-family: Alexandria; margin-left: 20%; padding-bottom: 50px;}	
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.image-gallery img {max-width: 100%;
    border-radius: 8px;}}

@media screen and (max-width: 580px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-right: 4px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	
	.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 {display: block; font-family: Alexandria; margin-left: 20%; padding-bottom: 50px;}	
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.image-gallery img {max-width: 100%;
    border-radius: 8px;}}


@media screen and (max-width: 492px) {#navbar {display: none;} 
	#navbar1 {display: inline-block; margin-right: -63px}
	#navbar1 a {margin: 70px;
  float: right;
  display: inline-block;
  color: #FFEA00;
  text-align: center;
  padding: 16px 16px;
  text-decoration: none;
  font-size: 15px;}
	
	.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 {display: block; font-family: Alexandria; margin-left: 18%; padding-bottom: 50px;}	
	#bottom-nav li a {color: #FFEA00; font-size: 20px}
	.image-gallery img {max-width: 100%;
    border-radius: 8px;}}