@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap");

body {
  font-family: "Comfortaa", sans-serif;
  text-align: center;
  display: flex;
  color: #596e79;
  margin: 0;
}

#sidebar {
  width: 250px; /* Adjust width as needed */
  background-color: #dfd3c3; /* Light gray background */
  padding: 20px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
  height: 100vh;
  /*max-height: 100vh; */
  color: #596e79; /* White text for headings */
  position: sticky;
  /* overflow-y: scroll; */
}

#sidebar h3 {
  margin-top: 0;
}

#sidebar ul {
  list-style: none;
  padding: 0;
  color: #596e79; /* Light text color for list items */
}

#sidebar ul li {
  margin: 10px 0;
  font-size: 16px;
}

/* Style for main content area */
.content {
  flex-grow: 1;
  padding: 20px;
  background-color: #f0ece2;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #c7b198;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  color: #fff;
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
  border: 1px solid #444;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#submitUsernameIcon {
  color: #fff;
}

#modalButton {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#modalButton:hover,
#modalButton:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

h1 {
  color: #fff;
  text-align: center;
}

h2 {
  border-bottom: 2px solid #000000;
  color: #000000;
  padding-bottom: 10px;
  margin-top: 30px;
}

/* input[type="text"],
input[type="number"],
textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    box-sizing: border-box;
    border-radius: 4px;
    background: none;
    color: #fff;
} */

/* CSS */
.button-54 {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000;
  cursor: pointer;
  border: 3px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px,
    5px 5px 0px 0px;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* .button-54:hover {
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px, 6px 6px 0px 0px, 7px 7px 0px 0px, 8px 8px 0px 0px;
    top: -5px;
    left: -5px;
  } */

.button-54:active {
  box-shadow: 0px 0px 0px 0px;
  top: 5px;
  left: 5px;
}

@media (min-width: 768px) {
  .button-54 {
    padding: 0.25em 0.75em;
  }
}

#movieDetails {
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 15px;
  margin-top: 15px;
}

#movieSection {
  background-color: #dfd3c3; /* Dark background for the section */
  padding: 20px; /* Adds padding around the content */
  border-radius: 8px; /* Optional: rounds the corners */
  border: 1px solid #000000; /* Subtle border */
  margin: 20px 0; /* Adds some space around the section */
  text-align: center; /* Centers the content */
  max-width: 400px; /* Maximum width of the section */
  margin-left: auto; /* Centers the section horizontally */
  margin-right: auto;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px,
    rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

#movieSection img {
  max-width: 100%; /* Ensures the image is not larger than the section */
  max-height: 300px;
  border-radius: 4px; /* Rounds the corners of the image */
}

.modalText {
  margin-top: 15px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 15px;
}

.container {
  display: flex;
  margin-top: 20px;
}

.left-column,
.right-column {
  flex: 1;
  padding: 20px;
}

.left-column {
  border-right: 2px solid #eee;
}

#usernameInput {
  padding: 10px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 4px;
  background: none;
  color: #fff;
  width: 20%; /* Adjust the width as needed */
  /* Additional styling (optional) */
  margin: 0 auto;
  display: block;
  color: white;
}

::placeholder {
  color: white;
}

#cupcakeInput {
  padding: 10px;
  box-sizing: border-box;
  border-radius: 4px;
  background: none;
  font-size: 4em; /* Makes the text larger */
  text-align: center; /* Centers the text inside the input box */
  width: 100%; /* Adjust the width as needed */
  /* Additional styling (optional) */
  margin: 0 auto;
  display: block;
  outline: none;
  border: none;
  color: #596e79;
  font-family: "Comfortaa", sans-serif;
  font-weight: 700;
}

/* Webkit browsers like Chrome, Safari */
#cupcakeInput::-webkit-outer-spin-button,
#cupcakeInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
#cupcakeInput[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

#submitSection {
  background-color: #dfd3c3; /* Dark background for the section */
  padding: 20px; /* Adds padding around the content */
  border-radius: 8px; /* Optional: rounds the corners */
  border: 1px solid #000000; /* Subtle border */
  margin: 20px 0; /* Adds some space around the section */
  text-align: center; /* Centers the content */
  max-width: 400px; /* Maximum width of the section */
  margin-left: auto; /* Centers the section horizontally */
  margin-right: auto;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px,
    rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

/* ... [Rest of your existing style.css code] */

.timer-display {
  color: #73c6c3; /* Green color, like classic digital displays */
  font-size: 4em; /* Large font size for visibility */
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  display: inline-block;
  letter-spacing: 3px; /* Space out the digits */
}

#lastBidMessage {
  font-size: 3em;
  margin: 0;
}

#usernameSection {
  position: fixed; /* Position it over other content */
  top: 0; /* Align to the top of the viewport */
  left: 0; /* Align to the left of the viewport */
  width: 100vw; /* Cover the full viewport width */
  height: 100vh; /* Cover the full viewport height */
  background-color: #596e79; /* Semi-transparent black background */
  z-index: 10; /* Ensure it's above all other content */
  justify-content: center; /* Center the content horizontally */
  align-items: center; /* Center the content vertically */
  display: flex;
  flex-direction: column;
  transition: opacity 0.5s ease-out; /* Adjust time as needed */
  opacity: 1; /* Start fully visible */
}

.fade-out {
  opacity: 0;
  visibility: hidden; /* Ensure it's not clickable after fade out */
}

#usernameBox {
  display: flex;
  justify-content: center; /* Center the content horizontally */
  align-items: center; /* Center the content vertically */
  flex-direction: row;
}

#usernameInput {
  margin: 5px; /* Spacing around input and button */
  width: 100%;
}

#submitUsernameIcon {
  font-size: 2em;
  padding-left: 10px;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

#submitUsernameIcon:hover {
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
  75% {
    transform: translateX(-10px);
  }
}

/* Class to apply the shake animation */
.shake-animation {
  animation: shake 0.5s; /* Adjust duration as needed */
}

.admin-card {
  background-color: #dfd3c3; /* Dark background for the section */
  padding: 20px; /* Adds padding around the content */
  border-radius: 8px; /* Optional: rounds the corners */
  border: 1px solid #444; /* Subtle border */
  margin: 20px 0; /* Adds some space around the section */
  text-align: center; /* Centers the content */
  max-width: 600px; /* Maximum width of the section */
  margin-left: auto; /* Centers the section horizontally */
  margin-right: auto;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px,
    rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
  color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.admin-input {
  width: 50%;
  padding: 10px;
  margin: 10px auto; /* Updated to center the inputs */
  border: none;
  box-sizing: border-box;
  border-radius: 4px;
  color: #000000;
  background: #c7b198;
}

.admin-button {
  width: 25%;
  padding: 10px;
  margin: 10px auto; /* Updated to center the inputs */
  border-radius: 10px;
  border: none;
  background: #ff9a2d;
}

.logo-container .logo {
  width: 200px;
  padding: 25px;
  /* display: flex;
  float: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto; */
}

/* .nav-links {
  list-style: none;
  padding: 0;
}

.nav-links li {
  display: inline-block;
  margin: 0 10px;
}

.nav-links li a {
  text-decoration: none;
  color: #333;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 10px;
} */

/* Dropdown Styling */
select {
  padding: 10px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-radius: 4px;
  background: none;
  color: #fff;
  width: 20%; /* Adjust the width as needed */
  /* Additional styling (optional) */
  margin: 0 auto;
  display: block;
  color: white;
  transition: all 0.3s ease; /* Smooth transition for interactions */
}

#usernameDropdown {
  margin-bottom: 2em;
}

select:hover {
  border-color: #888; /* Darker border on hover for feedback */
}

select:focus {
  outline: none; /* Remove the default focus outline */
  border-color: #555; /* More noticeable border color on focus */
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Blue glow effect */
}

/* Arrow Indicator (optional) */
select {
  /* background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048"><path d="M2048 608v128h-2048v-128h2048zm0 512v128h-2048v-128h2048zm0 512v128h-2048v-128h2048z" fill="%23333"/></svg>'); */
  background-repeat: no-repeat;
  background-position: right 12px top 50%; /* Position the arrow indicator */
  background-size: 12px; /* Size of the arrow */
}

/* Styling for options */
option {
  padding: 8px 12px;
  background-color: #2e393e; /* White background */
  color: #d6d6d6; /* Dark text for readability */
  font-size: large;
}