.upperBar
{
  display: flex;
  justify-content: space-between;
  margin: 0px;
  align-items: center;
  border-bottom: solid 2px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--alternate-background-color);
  border-color: var(--text-color);

}

.bigText
{
  text-align: center;
  margin-left: 15px;
  margin-right: 15px;
  vertical-align: center;
  color: var(--text-color);
  font-size: clamp(20px, 4vw, 50px);
}



.upperBar.inactive .logo
{
  width: 75px;
  height: 100px;
  margin: 0px;
  vertical-align: center;
}

.upperBar.inactive .logoDark { display: none; }


.upperBar.active .logo { display: none; }

.upperBar.active .logoDark
{
  width: 75px;
  height: 100px;
  margin: 0px;
  vertical-align: center;
}



.menu
{
  display: inline-block; 
  position: fixed;
  border-right: solid 2px;
  top: 102px;
  left: 0px;
  bottom: 0px;
  background-color: var(--alternate-background-color);
  overflow: auto;
  border-color: var(--text-color);
}

  ::-webkit-scrollbar
  {
    width: 2px;
  }

  ::-webkit-scrollbar-thumb 
  {
    background-color: var(--text-color);
  }


.hamburger-menu
{
  background-color: transparent;
  border-style: none;
}

.hamburger-menu .veggieburger
{
  display: inline-block;
  margin: 10px;
  margin-top: 15px;
  width: clamp(15px, 6vw, 40px);
  height: clamp(15px, 5vw, 30px);
}

.hamburger-menu .veggieburgerDark
{
  display: none;
}


.hamburger-menu.active .veggieburger
{ 
  display: none; 
}

.hamburger-menu.active .veggieburgerDark
{
  display: inline-block;
  margin: 10px;
  margin-top: 15px;
  width: clamp(15px, 6vw, 40px);
  height: clamp(15px, 5vw, 30px);
}




#menu-options 
{ 
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.menu .menuText
{
  display: inine-block;
  font-size: clamp(14px, 4vw, 40px);
  margin: 5px;
  text-transform: var(--title-capitalize);
  font-weight: var(--title-weight);
  color: var(--alternate-text-color);
  text-decoration: none;
}

.menuText:hover
{
  color: blue;
}

#theme-switch
{
  position: fixed;
  background-color: transparent;
  border-style: none;
  bottom: 10px;
  right: 10px;
  width: clamp(60px, 7vw, 120px);
  height: clamp(60px, 7vw, 120px);
}

#theme-switch img:last-child
{
  display: none;
}

.darkmode #theme-switch img:first-child
{
  display: none;
}

.darkmode #theme-switch img:last-child
{
 display: block;
}

.theme-switch-image
{
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: clamp(60px, 7vw, 120px);
  height: clamp(60px, 7vw, 120px);
}

/* SMOLL SCREEN DROPDOWN */
@media (width <= 1023px) 
{
  .menu
  { 
  top: 62.5px;
  border-style: none;
  }

  #menuOptions 
  { 
    display: none; 
  }

  .menu .menuText { display: none; }

  .menu.active 
  { 
    border-bottom: solid 2px;
    border-right: solid 2px;
    border-color: var(--text-color);

  }
  .menu.active #menuOptions { display: inine-block; }

  .menu.active .menuText 
  { 
    display: inline-block;
    margin-right: 10px;
    font-size: 2em;
  }
  
  .logo { display: none; }
  .logoDark { display: none; }

}

/* BIG SCREEN */
@media (width >= 1024px)
{
  .menu { bottom: 0px; }

  #hamburger-menu { display: none; }

  .menu .veggieburger { display: none; }
}

@media only screen and (width <= 546px) 
{
  .bigText { font-size: 25px; }
  .menu { top: 67px; }
}

@media only screen and (width <= 320px) 
{
  .menu { top: 95.4px; }
}