@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Nanum+Gothic:wght@400;700;800&display=swap');
:root {
  --darkerRed: #C81D25;
  --MaxBlueGreen: #26b2bf;
  --reactionRed:#ef233c;
  --btnColor: #dc8c7d;
  --topbarRed: #ce0000;
  --offBlack: #212427;
  --weirdyellow: rgb(196, 186, 0);
}

.dark-mode {
  filter: gray;
  filter: grayscale(80%);
  filter: contrast(80%);
  background-color: black;
}

* {
  font-family: 'Nanum Gothic', sans-serif;
}

body{
  width:100%;
  margin:0;
  font-family: 'Alfa Slab One', cursive;
  background-color:var(--reactionRed);
  
}
.topphrase {
	font-size:	10px;
  margin: 20px;
	color:	var(--reactionRed);
	padding: 10px 10px 10px 10px;
  text-align: center;
  text-decoration: none;
  font-size: 10px;
  border-radius: 5px;
  float: right;
}

.topphrase:hover{
  transition: 0.6s;
  background-color: black;
}
#topbar li {
  justify-self: center;
}

#topbar {
	height:			10px;
  background-color: var(--reactionRed);
  /* background-color: black; */

  margin-left: 0;

}

.place{
  font-weight: 1000;
}

.smalllogo {
  margin-top: 10px;
	width:	60px;
	height: 45px;
	float:	left;
  margin-left: 30px;
}

#navbar {
    list-style-type:	none;
    margin:	0;
    padding:0;
    background-color: white;
    background-color: var(--reactionRed);
    font-size: 0;
    width: 100%;
    top: 0; left: 0;
    text-align: center;
    align-items: center;
    transition: height 0.35s ease, padding 0.35s ease;

  }

li {
  align-items: center;
    display: 	inline-block;
}



li a, .dropbtn {
  display:			inline-block;
  color:				var(--offBlack);
  text-align:			center;
  padding:			15px 15px;
  text-decoration:	none;
	width:				100px;
  font-size: initial;
}

.dropbtn{
  color: white;
}

li a:hover, .dropdown:hover .dropbtn {
  color: var(--offBlack);
  transition: 0.6s;
  font-weight: bolder;
  
}


.dropdown {
    display:	inline-block;
	position:	relative;
  
}

.dropdown-content {
    display: 			none;
    position: 			absolute;
    background-color: 	rgba(255, 255, 255, 0.766);
    width: 				160px;
    box-shadow: 		5px 10px 10px rgba(0,0,0,0.3);
	z-index: 			1;
  transition: 0.6s;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
	  width: 128px;
	  z-index: 1;
}

.dropdown-content a:hover {
	background-color: 	var(--MaxBlueGreen);
  transition: 0.6s;
  color: black;
}

.dropdown:hover .dropdown-content {
    display:	block;
    color: var(--MaxBlueGreen);
}


/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  transition: 0.3s;
}

.topphrase {
  border: none;
}

@media  (max-width: 566px) {
  li a {
 
  }
  }