:root {
  --text: hsl(0, 0%, 0%);
  --background: hsl(191, 73%, 97%);
  --primary: hsl(33, 100%, 50%);
  --secondary: hsl(126, 50%, 60%);
  --accent: hsl(350, 90%, 50%);
  
  --nav-animation-duration: 0.25s;
}










body {
  background-color: var(--background);
  font-family: 'Roboto', sans-serif;
  margin: 0px;
}

section {
  margin: 8px;
}










nav {
  caret-color: transparent;
  position: fixed;
  left: 0;
  top: 0;
  
  box-sizing: border-box;
  height: 70px;
  width: 100%;
  
  background-color: var(--primary);
  padding: 10px;
  
  margin: 0px;
  border: 0px;
}

.NavLogo {
  cursor: pointer;
  float: left;
  
  height: 50px;
  width: 50px;
  
  background-color: black;
  color: white;
}

.NavButton {
  cursor: pointer;
  float: right;
  
  height: 50px;
  width: 50px;
  
  backgrund-color: white;
  color: black;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.NavButtonBar {
  background-color: var(--accent);
  
  height: 8px;
  width: 48;
  border-radius: 8px;
  margin: 3px;

  transition: var(--nav-animation-duration) ease-in-out;
}

.NavButton:hover .NavButtonBar {
  height: 10px;
  width: 50;
  border-radius: 10px;
  margin: 2px;
}

.NavButtonBar.Change#TopBar {
  animation-name: TopBarIn;
  animation-duration: var(--nav-animation-duration);
  animation-fill-mode: forwards;
}

.NavButtonBar#TopBar {
  animation-name: TopBarOut;
  animation-duration: var(--nav-animation-duration);
  animation-fill-mode: forwards;
}

.NavButtonBar.Change#MidBar{
  animation-name: MidBarIn;
  animation-duration: var(--nav-animation-duration);
  animation-fill-mode: forwards;
}

.NavButtonBar#MidBar{
  animation-name: MidBarOut;
  animation-duration: var(--nav-animation-duration);
  animation-fill-mode: forwards;
}

.NavButtonBar.Change#BotBar {
  animation-name: BotBarIn;
  animation-duration: var(--nav-animation-duration);
  animation-fill-mode: forwards;
}

.NavButtonBar#BotBar {
  animation-name: BotBarOut;
  animation-duration: var(--nav-animation-duration);
  animation-fill-mode: forwards;
}










@keyframes TopBarIn {
  0% {
    background-color: var(--accent);
    transform: translateY(0px) rotate(0deg);
    animation-timing-function: ease-in;
  }
  
  50% {
    background-color: var(--accent);
    transform: translateY(14px) rotate(180deg);
    animation-timing-function: ease-out;
  }
  
  100% {
    background-color: var(--background);
    transform: translateY(14px) rotate(225deg);
  }
}

@keyframes TopBarOut {
  0% {
    background-color: var(--background);
    transform: translateY(14px) rotate(225deg);
    animation-timing-function: ease-in;
  }
  
  50% {
    background-color: var(--accent);
    transform: translateY(14px) rotate(360deg);
    animation-timing-function: ease-out;
  }
  
  100% {
    background-color: var(--accent);
    transform: translateY(0px) rotate(540deg);
  }
}

@keyframes MidBarIn {
  0% {
    opacity: 100;
  }
  
  49% {
    opacity: 100;
  }
  
  50% {
    opacity: 0;
  }
  
  100% {
    opacity: 0;
  }
}

@keyframes MidBarOut {
  0% {
    opacity: 0;
  }
  
  50% {
    opacity: 0;
  }
  
  51% {
    opacity: 100;
  }
  
  100% {
    opacity: 100;
  }
}

@keyframes BotBarIn {
  0% {
    background-color: var(--accent);
    transform: translateY(0px) rotate(0deg);
    animation-timing-function: ease-in;
  }
  
  50% {
    background-color: var(--accent);
    transform: translateY(-14px) rotate(180deg);
    animation-timing-function: ease-out;
  }
  
  100% {
    background-color: var(--background);
    transform: translateY(-14px) rotate(315deg);
  }
}

@keyframes BotBarOut {
  
  
  0% {
    background-color: var(--background);
    transform: translateY(-14px) rotate(315deg);
    animation-timing-function: ease-in;
  }
  
  50% {
    background-color: var(--accent);
    transform: translateY(-14px) rotate(360deg);
    animation-timing-function: ease-out;
  }
  
  100% {
    background-color: var(--accent);
    transform: translateY(0px) rotate(540deg);
  }
}















.NavBackground {
  display: none;
}

.NavBackground.Change {
  display: block;
  float: right;
  
  transform: translate(50px, 50px);
  
  background-color: white;
  height: 400px;
  width: 200px;
}









footer {
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  
  background-color: var(--primary);
  padding: 10px;
  padding-bottom: 50px;
  
  margin: 0px;
  border: 0px;

  caret-color: transparent;
}

.FooterText {
  width: 100%;
  height: 100%;
  
  color: white;
  background-color: black;
}