:root {
  /* General Colors */
  --background-color: #fff;
  --background-light: #fee;
  --gray: #ccc;
  --text-color: #333;

  /* Highlight Colors */
  --primary-red: #f99;
  --primary-yellow: #ff6;
  --primary-green: #6f6;
  --dark-red: #f44;
  --dark-yellow: #fc0;
  --dark-green: #0c0;
  --timer-red: #c22;
  --timer-yellow: #b81;
  --timer-green: #090;

  /* Shadow Colors */
  --shadow-red: rgba(255, 102, 102, 0.75);
  --shadow-yellow: rgba(255, 255, 102, 0.75);
  --shadow-green: rgba(102, 255, 102, 0.75);

  /* Hover Colors */
  --hover-red: #fbb;
  --hover-dark-red: #f66;
  --hover-dark-yellow: #fc0;
  --hover-dark-green: #0f0;

  /* Other */
  --display-width: 1400px;
}

.dark-theme {
  /* General Colors */
  --background-color: #000;
  --background-light: #111;
  --text-color: #fff;
  --gray: #ccc;

  /* Highlight Colors */
  --primary-red: #f22;
  --primary-yellow: #ff0;
  --primary-green: #0f0;
  --dark-red: #800;
  --dark-yellow: #b81;
  --dark-green: #060;
  --timer-red: var(--primary-red);
  --timer-yellow: var(--primary-yellow);
  --timer-green: var(--primary-green);

  /* Shadow Colors */
  --shadow-red: rgba(255, 0, 0, 0.5);
  --shadow-yellow: rgba(255, 255, 0, 0.5);
  --shadow-green: rgba(0, 255, 0, 0.5);

  /* Hover Colors */
  --hover-red: #f77;
  --hover-dark-red: #c11;
  --hover-dark-yellow: #cb1;
  --hover-dark-green: #0a0;

  /* Other */
}


/* 

GENERAL 

*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100%
}

h2 {
  color: var(--primary-red);
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  width: 100%;
}

hr {
  border-color: var(--primary-red);
  border-width: 1px;
}

/* 

SCREENS 

*/
.page {
  display: flex;
  flex-grow: 1;
  width: 100%;
  max-width: var(--display-width);
  min-height: 100px;
  height: 100%;
  position: relative;
  align-self: center;
}

.container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  max-width: 100%;
  padding: 20px;
}

.screen {
  display: none;
  position: relative;
  padding: 20px;
  border-radius: 8px;
  background-color: var(--background-light);
  border: 2px solid var(--primary-red);
  flex-grow: 1;
  align-items: flex-start;
  width: 100%;
  overflow: hidden;
  min-height: 0;
}

.screen.active {
  display: flex;
  flex-direction: column;
}

.hidden {
  display: none;
}

/* General Button Styles */
button,
.radio-button {
  background-color: var(--dark-red);
  color: var(--text-color);
  border: 2px solid var(--primary-red);
  border-radius: 5px;
  cursor: pointer;
  margin: 0 2px;
  text-wrap: nowrap;
  transition: background-color 0.3s, color 0.3s;
  /* Transition for hover effect */
}

/* General Button Hover Effect */
button:hover {
  background-color: var(--hover-dark-red);
}

/*

Hamburger Button & Menu

*/

#menu {
  z-index: 2;
}

#menu-bar {
  position: absolute;
  /* Set position to absolute */
  width: 45px;
  height: 30px;
  top: 40px;
  /* Adjust the vertical position as needed */
  right: 40px;
  /* Position it on the right side */
  cursor: pointer;
}

.bar {
  height: 5px;
  width: 100%;
  background-color: var(--primary-red);
  display: block;
  border-radius: 5px;
  transition: 0.3s ease;
}

#bar2 {
  transform: translateY(7px);
}

#bar3 {
  transform: translateY(14px);
}

.nav {
  transition: 0.3s ease;
  display: none;
  position: absolute;
  /* Position the nav absolutely */
  top: 75px;
  /* Adjust this value to position it below the button */
  right: 20px;
  /* Keep it aligned with the button */
  text-align: right;
  /* Align text to the right */
}

.nav ul {
  padding: 0 22px;
}

.nav li {
  list-style: none;
  padding: 12px 0;
}

.nav li a {
  color: var(--text-color);
  font-size: 20px;
  text-decoration: none;
}

.nav li a:hover {
  font-weight: bold;
}

/* Menu positioning */
.menu-bg,
#menu {
  top: 0;
  right: 0;
  /* Move the menu to the right side */
  position: absolute;
}

.menu-bg {
  z-index: 1;
  width: 0;
  height: 0;
  top: -5px;
  right: -5px;
  background: radial-gradient(circle, var(--hover-dark-red), var(--dark-red));
  border-radius: 25%;
  border-color: var(--primary-red);
  border-width: 0px;
  border-style: solid;
  transition: 0.3s ease;
}

#themeToggle {
  cursor: pointer;
  /* Pointer cursor on hover */
}

.change {
  display: block;
}

.change .bar {
  background-color: var(--text-color);
}

.change #bar1 {
  transform: translateY(12.5px) rotateZ(-45deg);
}

.change #bar2 {
  opacity: 0;
}

.change #bar3 {
  transform: translateY(2.5px) rotateZ(45deg);
}

.change-bg {
  width: 320px;
  height: 360px;
  border-width: 2px;
  transform: translate(60%, -30%);
  /* Adjust transform to open on the right side */
}

/* 

Responsive Layouts 

*/

/* PC */
@media (min-width: 768px) {

  .container {
    flex-direction: row;
    height: 100%;
  }

  .hamburger-menu {
    top: 20px;
    right: 20px;
  }

}

/* Mobile */
@media (max-width: 767px) {

  .container {
    flex-direction: column;
    /* Keep column direction on mobile */
  }

  .hamburger-menu {
    bottom: 60px;
    /* Adjust based on the bottom bar height */
    right: 10px;
  }

}