* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Times New Roman", Times, serif;
  color: white;
}

section {
  max-width: 100%;
  margin: 0;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
}

body {
  margin: 0;
  max-width: 100%;
  background-color: black;
}

.topbar {
  position: fixed;
  z-index: 1;
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: center;

  border-bottom: 3px solid orangered;
  background-color: black;
}

#wiletText {
  background-color: black;
  text-decoration: none;
  font-size: 30px;
  z-index: 1;

  text-align: center;
  margin: auto;
}

.sidebar {
  z-index: 100;
  position: fixed;

  background-color: black;
  border-right: 3px solid orangered;
  width: 250px;
  height: 100%;
  left: -250px;

  transition: 0.25s;
}

label #menuClosed,
label #menuOpen {
  z-index: 99;

  color: white;
  background-color: transparent;

  position: fixed;
  cursor: pointer;
}

label #menuOpen {
  left: -50px;
  top: 8px;

  color: white;
  background-color: black;
}

label #menuClosed {
  left: 12px;
  top: 8px;
}

.sidebar[state="open"] {
  left: 0;
}

#menuClosed[state="open"] {
  color: transparent;
}

#menuOpen[state="open"] {
  z-index: 100;
  color: white;
  left: 255px;
}

.sidebar[state="closed"] {
  left: -250px;
}

#menuClosed[state="closed"] {
  color: white;
}

#menuOpen[state="closed"] {
  color: transparent;
  left: -50px;
}

.profile-container {
  z-index: 100;
  position: fixed;

  background-color: black;
  border-left: 3px solid orangered;
  width: 250px;
  height: 100%;
  right: -250px;

  transition: 0.25s;
}

label #userMenuClosed,
label #userMenuOpen {
  z-index: 99;

  color: white;
  background-color: transparent;

  position: fixed;
  cursor: pointer;
}

label #userMenuOpen {
  right: -50px;
  top: 8px;

  color: white;
  background-color: black;
}

label #userMenuClosed {
  right: 12px;
  top: 8px;
}

.profile-container[state="open"] {
  right: 0;
}

#userMenuOpen[state="open"] {
  z-index: 100;
  color: white;
  right: 255px;
}

#userMenuClosed[state="open"] {
  color: transparent;
}

.profile-container[state="closed"] {
  right: -250px;
}

#userMenuClosed[state="closed"] {
  color: white;
}

#userMenuOpen[state="closed"] {
  color: transparent;
  right: -50px;
}

.guestOptions[state="signed-in"] {
  display: none;
}

.guestOptions[state="signed-out"] {
  display: block;
}

.signedInOptions[state="signed-in"] {
  display: block;
}

.signedInOptions[state="signed-out"] {
  display: none;
}

#overlay {
  z-index: -999;

  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

#overlay[state="open"] {
  z-index: 99;

  background-color: rgba(0, 0, 0, 0.5);
}

#overlay[state="closed"] {
  z-index: -999;

  background-color: transparent;
}

.menuOption {
  color: white;
  background-color: transparent;
  width: 100%;
  text-align: left;
  font-size: 20px;
  margin-top: 0;
  padding: 10px 0;
  padding-left: 1em;

  border: 0;
  border-bottom: 2px solid orangered;

  transition: 0.25s;
  animation-timing-function: ease-out;
}

.menuOption:hover {
  background-color: rgb(128, 34, 0);
}

.menuText {
  padding-left: 20px;
  border-bottom: 3px solid orangered;
}

#userMenu {
  float: right;
  background-color: transparent;
  color: white;
  border: 0;

  padding-top: 4px;
  padding-right: 1em;
  margin: 0 0;
}