style.css

* {
  font-size: 40px;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: black;
  font-family: 'Playfair Display', serif;

}

.unload {
  display: none;
}

.loader {

  align-items: center;
  width: 100vw;
  justify-content: center;
  height: 100vh;
  display: flex;

}


#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#changeHeading {
  color: black;
}

::-webkit-scrollbar {
  display: none;
}

.background {
  width: 430px;
  height: 520px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;

}

.background .shape {
  height: 200px;
  width: 200px;
  position: absolute;
  border-radius: 50%;
}

/* .shape:first-child {
  background: linear-gradient(to right, #ff512f, #f09819);
  align-self: flex-end;
  left: -8vw;
  top: -18vh;
}

.shape:last-child {
  background: linear-gradient(#1845ad, #23a2f6);
  align-self: flex-start;
  right: -8vw;
  bottom: -18vh;
} */

#submit:hover {
  transform: scale(1.1, 1.1);
}

#reset:hover {
  transform: scale(1.1, 1.1);
}

#randomize:hover {
  transform: scale(1.1, 1.1);
}

#color:hover+#n {
  text-shadow: 2px 2px white;
}

#unit:hover,
#time:hover,
#color:hover,
#view:hover,
#countdown:hover,
#sound:hover,
#music-url:hover,
#music-file:hover {
  background-color: lightyellow;
  color: black;
}

#unit:hover,
#view:hover,
#sound:hover,
#music-file:hover {
  cursor: pointer;
}

input[type="color"]:hover {
  border: 2px solid #f09819;
  cursor: pointer;
  opacity: 0.8;
}

#music-url:hover+#n {
  text-shadow: 2px 2px white;
}


h1 {
  font-size: 25px;
  text-align: center;
}

/* Tooltip style */
.theme-toggle:hover::before {
  content: "MODE";
  position: absolute;
  top: -30px;
  /* Adjust as needed for positioning */
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  opacity: 0;
  /* Initially hidden */
  transition: opacity 0.3s ease;
  /* Smooth transition */
  z-index: 200;
  /* Ensure tooltip appears above other elements */
}

.theme-toggle:hover::after {
  content: "";
  position: absolute;
  top: -10px;
  /* Adjust as needed for positioning */
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: black;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-toggle:hover::before,
.theme-toggle:hover::after {
  opacity: 1;
  /* Show tooltip on hover */
}


.box {
  /* min-height: 100vh; */
  /* max-width: calc(100% - 40px); */
  position: relative;
  /* background: rgba(255, 255, 255, 0.063); */
  backdrop-filter: blur(10px);
  padding: 10px 25px;
  overflow: visible;
  box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
  color: #ffffff;
  margin: 5px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 5px;
  margin-top: 50px;
  /*adding background img*/
  background: #180410;
  background-image: url(assets/images/formbgi.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  height: auto;
  width: 975px;
}

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.box::before,
.box::after {
  content: '';
  position: fixed;
  inset: -0.1rem;
  z-index: -1;
  background: conic-gradient(from var(--gradient-angle), #f34b4e, #ff6d8d, #8eebe8fc, #776ede, #8eebe8fc, #ed666c);
  border-radius: inherit;
  animation: moving 3s linear infinite;

  mask: linear-gradient(to right, black 0.5%, transparent 0%, transparent 99.5%, black 90%),
    linear-gradient(to bottom, black 0.5%, transparent 0%, transparent 99.5%, black 90%);
}


@keyframes moving {
  0% {
    --gradient-angle: 0deg;
  }

  100% {
    --gradient-angle: 360deg;
  }
}

label {
  /* font-size: 22px; */
  font-size: 20px;
  /* font-weight: 300; */
  font-family: system-ui;
}

input {
  /* background-color: rgba(255, 255, 255, 0.07); */
  background: #290a1d;
  outline: none;
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 5px 10px;
  border-radius: 10px;
}

::placeholder {
  font-family: system-ui;
  color: #8d8080;
  font-size: 15px;
}

input:focus {
  outline: none;
  width: 4rem;
  border: none;
}

i {
  font-size: 20px;
}

strong {
  font-family: arial;
  font-size: 17px;
  color: #f09819;
}

#view,
#unit,
#sound {
  text-align: center;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.07);
  outline: none;
  border: none;
  padding: 5px 10px;
  color: #e5e5e5;
  font-size: 20px;
  width: auto;
}

select {
  font-family: 'Playfair Display', serif;
}

select option {
  color: #e5e5e5;
  font-size: 18px;
  font-family: 'Playfair Display', serif;
  background-color: #333;
  border: none;
  outline: none;
}

#time,
#color {
  border-radius: 10px;
}

#submit a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  margin: 0 0;
  color: #ff4d00;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.5s;
  letter-spacing: 4px;
}

#submit a:hover {
  background-color: #ff4d00;
  color: #050801;
  box-shadow: 0 0 5px #ff4d00,
    0 0 25px #ff4d00,
    0 0 50px #ff4d00,
    0 0 200px #ff4d00;
}

#submit a span {
  position: absolute;
  display: block;
}

#submit a:nth-child(1) {
  filter: hue-rotate(290deg);
}

#submit a:nth-child(3) {
  filter: hue-rotate(110deg);
}

#submit a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff4d00);
  animation: animate1 1s linear infinite;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }

  50%,
  100% {
    left: 100%;
  }
}

#submit a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #ff4d00);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes animate2 {
  0% {
    top: -100%;
  }

  50%,
  100% {
    top: 100%;
  }
}

#submit a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #ff4d00);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes animate3 {
  0% {
    right: -100%;
  }

  50%,
  100% {
    right: 100%;
  }
}

#submit a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #ff4d00);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}

#reset a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  margin: 0 0;
  color: #e35ee5;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.5s;
  letter-spacing: 4px;
}

#reset a:hover {
  background-color: #e35ee5;
  color: #050801;
  box-shadow: 0 0 5px #e35ee5,
    0 0 25px #e35ee5,
    0 0 50px #e35ee5,
    0 0 200px #e35ee5;
}

#reset a span {
  position: absolute;
  display: block;
}

#reset a:nth-child(1) {
  filter: hue-rotate(290deg);
}

#reset a:nth-child(3) {
  filter: hue-rotate(110deg);
}

#reset a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e35ee5);
  animation: animate1 1s linear infinite;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }

  50%,
  100% {
    left: 100%;
  }
}

#reset a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #e35ee5);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes animate2 {
  0% {
    top: -100%;
  }

  50%,
  100% {
    top: 100%;
  }
}

#reset a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #e35ee5);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes animate3 {
  0% {
    right: -100%;
  }

  50%,
  100% {
    right: 100%;
  }
}

#reset a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #e35ee5);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}


@keyframes animate4 {
  0% {
    bottom: -100%;
  }

  50%,
  100% {
    bottom: 100%;
  }
}

#randomize a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  margin: 20px 0;
  color: #03e9f4;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.5s;
  letter-spacing: 4px;
}

#randomize a:hover {
  background-color: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4,
    0 0 25px #03e9f4,
    0 0 50px #03e9f4,
    0 0 200px #03e9f4;
}

#randomize a span {
  position: absolute;
  display: block;
}

#randomize a:nth-child(1) {
  filter: hue-rotate(290deg);
}

#randomize a:nth-child(3) {
  filter: hue-rotate(110deg);
}

#randomize a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: animate1 1s linear infinite;
}

@keyframes animate1 {
  0% {
    left: -100%;
  }

  50%,
  100% {
    left: 100%;
  }
}

#randomize a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}

@keyframes animate2 {
  0% {
    top: -100%;
  }

  50%,
  100% {
    top: 100%;
  }
}

#randomize a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}

@keyframes animate3 {
  0% {
    right: -100%;
  }

  50%,
  100% {
    right: 100%;
  }
}

#randomize a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}


@keyframes animate4 {
  0% {
    bottom: -100%;
  }

  50%,
  100% {
    bottom: 100%;
  }
}

.button {
  justify-content: center;
  margin-top: 10px;
  display: flex;

  margin-bottom: 10px;

  align-items: center;
  gap: 20px;
}

button {
  border: none;
  font-size: 20px;
  padding: 10px 20px;
  color: #fff;
}

.screen {
  display: flex;
  justify-content: center;
  align-items: center;
}

#error {
  display: flex;
  align-items: center;
  justify-content: center;
}

#error strong {
  font-size: 22px;
  color: red;
}

.connect {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  font-weight: 700;
}

nav ul li a {
  display: inline-block;
  font-weight: bold;
  font-family: sans-serif;
  height: 45px;
  transition: 0.2s all;
}

nav ul li a:hover {
  transform: scale(1.1);
}

@media only screen and (max-width: 850px) {
  * {
    font-size: 18px !important;
  }

  h1 {
    margin-bottom: 5px;
    font-size: 24px !important;
  }

  input,
  #unit {
    margin-top: 10px;
  }

  #time,
  #unit {
    width: 45%;
  }

  .box {
    padding: 10px 15px;
    width: fit-content;
    height: auto;
  }
}


@media only screen and (max-width: 950px) {

  .box {
    padding: 10px 15px;
    width: auto;
    height: auto;

  }
}


@media only screen and (max-width: 1175px) {

  .box {
    max-width: calc(100% - 40px);
    position: relative;
    background: rgba(255, 255, 255, 0.063);
    backdrop-filter: blur(10px);
    padding: 10px 25px;
    overflow: visible;
    box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: auto;
  }

  input {
    background-color: rgba(255, 255, 255, 0.07);
  }
}

@media only screen and (max-width: 350px) {
  * {
    font-size: 12px !important;
  }

  h1 {
    overflow-wrap: break-word;
    font-size: 16px !important;
  }

  .copyright {
    font-size: 16px !important;
  }

  .socialIcons a i {
    font-size: 26px !important;
  }

  .input {
    width: 15px;
  }


  .box {
    padding: 10px 15px;
    margin: auto;
    width: 250px;
    height: auto;
    margin-top: 50px;

  }
}

@media only screen and (max-width: 450px) {
  .light-mode * {
    font-size: 12px !important;
  }
}

@media only screen and (max-width: 320px) {
  * {
    font-size: 12px !important;
  }

  h1 {
    overflow-wrap: break-word;
    font-size: 14px !important;
  }

  .copyright {
    font-size: 14px !important;
  }

  .socialIcons a i {
    font-size: 24px !important;
  }

  .input {
    width: 15px;
  }


  .box {
    padding: 10px 15px;
    width: 350px;
    height: auto;
  }

}

#timerDisplay {
  position: fixed;
  top: 10px;
  right: 10px;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 5px;
  transition: 500ms;
}

#message {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(113, 230, 245);
  padding: 20px;
  border: 1px solid black;
  z-index: 1000;
  font-size: 18px;
  text-align: center;
}

/* Styles for the the theme toggle checkbox */

.theme-toggle {
  position: fixed;
  top: 30px;
  right: 20px;
  z-index: 100;
  display: flex;
  align-items: center;
  border: none;
  background-color: transparent;
  width: 40px;
  height: 20px;
  margin: 0 5px;
}

.theme-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.85;
  background-color: #000000;
  border-radius: 34px;
  transition: background-color 0.4s;
  box-shadow: 0 0 3px #ffffff;
}

@media screen and (max-width: 425px) {
  .slider {
    cursor: pointer;
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.85;
    background-color: #000000;
    border-radius: 34px;
    transition: background-color 0.4s;
    box-shadow: 0 0 3px #ffffff;
  }

  .input {
    width: 15px;
  }
}

.slider:hover {
  opacity: 1;
}

.light-mode .slider {
  background-color: #ffffff;
  box-shadow: 0 0 5px #020202;
}

.light-mode .slider:before {
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-image: linear-gradient(to bottom right, yellow, orange, red);
  box-shadow: none;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  /* background-image: linear-gradient(to bottom right, yellow, orange, red); */
  background-image: linear-gradient(black, rgb(18, 18, 18));
  box-shadow: inset -3px -1.4px #ffffff, inset -3.2px -1.4px 0.2px 0.1px rgb(58, 52, 58);
  border-radius: 50%;
  transition: transform 0.4s;
}

.dark-mode .slider:before {
  transition: transform 0.4s;
}

input:checked+.slider:before {
  transform: translateX(20px);
}



.socialIcons {

  position: fixed;
  top: 50%;
  right: 2%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 30px;
  backdrop-filter: blur(8px);

}

.icons {
  position: relative;
  background: rgba(106, 106, 106, 0.189);
  top: 0px;
  color: blue;
  box-shadow: 3px 4px 10px rgba(176, 175, 175, 0.248);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% 50%;
  overflow: hidden;
}

.icons a::after {
  content: "";
  width: 40px;
  height: 40px;
  top: -40px;
  left: 0;
  background: linear-gradient(40deg,
      rgb(246, 126, 28),
      rgb(221, 54, 54),
      rgb(250, 41, 118),
      rgb(214, 18, 214));
  position: absolute;
  transition: 0.5s;
}

.icons a:hover::after {
  top: 0;
  left: 0;
}

.icons:nth-child(1) a::after {
  background: linear-gradient(40deg,
      rgb(13, 108, 139),
      rgb(48, 106, 126),
      rgb(38, 126, 156),
      rgb(15, 112, 145));
}

.icons:nth-child(2) a::after {
  background: linear-gradient(40deg,
      rgb(246, 126, 28),
      rgb(221, 54, 54),
      rgb(250, 41, 118),
      rgb(214, 18, 214));
}

.icons:nth-child(3) a::after {
  background: linear-gradient(40deg, #000000, #410bc8);
}

.icons:nth-child(4) a::after {
  background: rgb(19, 12, 12);
}

.icons:nth-child(5) a::after {
  background:
    rgb(88, 101, 242)
}

.ico {
  position: absolute;
  font-size: 21px;
  z-index: 20;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  color: white;
}

.light-mode .icons {
  background: rgba(10, 9, 9, 0);
  box-shadow: 4px 6px 10px rgba(19, 19, 19, 0.333);
}

.light-mode .icons a i {
  color: rgb(21, 21, 21);
}

@media (max-width: 750px),
(max-height: 500px) {

  .socialIcons {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    top: 0%;
    right: 0%;
    left: 0%;
    gap: 20px;
    margin-top: 30px;
    bottom: 0%;
    width: 100%;
    justify-content: center;


  }
}


#facebook:hover {
  background-color: #3B5998;
  ;
  transition: 0.5s;
}

#instagram:hover {
  color: #c13583;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  transition: 0.5s;
}

#twitter:hover {
  background-color: rgb(39, 39, 39);
  transition: 0.5s;
}


#youtube:hover {
  background-color: #C31A1E;
  transition: 0.5s;
}

.copyright {
  display: flex;
  justify-content: center;
  font-size: large;
  color: white;
  height: 50px;
}

@media screen and (max-width : 414px) {

  .box {
    padding: 10px 15px;
    width: min-content;
    height: auto;
    margin: auto;
    margin-top: 50px;
  }


  .input {
    width: 15px;
  }

  .copyright {
    display: flex;
    justify-content: center;
    font-size: large;
    color: white;
    height: 100px;
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  text-align: center;
  animation: slide-down 0.3s ease-out;
}

@keyframes slide-down {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
}

.close:hover,
.close:focus {
  color: #000;
}

h2 {
  font-size: 30px;
  margin-bottom: 16px;
  color: #333;
}

p {
  font-size: 16px;
  margin-bottom: 24px;
  color: #555;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

.snowflakes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.snowflake {
  position: absolute;
  width: 0.3rem;
  height: 0.5rem;
  background-color: #ffffffec;
  animation: snowfall linear infinite;
  animation-duration: 10s;
  animation-fill-mode: both;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 3px 3px 6px #a970e2;
}

@keyframes snowfall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.header-content {
  width: 100%;
  margin: 0;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
}

nav ul li a:hover {
  color: #ff7f50;
}

.popup {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
}

.popup-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  text-align: center;
  animation: slide-down 0.3s ease-out;
}

@keyframes slide-down {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
}

.close:hover,
.close:focus {
  color: #000;
}

#randomize {
  width: fit-content;
  display: flex;
  margin-top: 20px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  color: darkgreen;
}

/* Style for the modal background */
#modalBackground {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Comment form container */
#commentForm {
  background-color: #c9bdf2;
  background-image: linear-gradient(316deg, #a19ab9 0%, #ffffff 74%);  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 150px;
  top: 40%;
  border: 1px solid #888;
  width: 90%;
  max-width: 500px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.5s;
  position: relative;
  transform: translateY(-50%);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Form styling */
form {
  display: flex;
  flex-direction: column;
}

.form-group {
  margin-bottom: 15px;
}

.icon {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-size: 16px;
  color: #7a7a73;
}

.icon i {
  margin-right: 10px;
}

input[type="text"], input[type="email"], textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 14px;
  transition: border-color 0.3s;
}

input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
  border-color: #555;
}

textarea {
  resize: none;
}

.rating {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}

.rating input[type="radio"] {
  display: none;
}

.rating label {
  font-size: 18px;
  color: #0e101a;
  cursor: pointer;
  transition: color 0.3s;
}

.rating input[type="radio"]:checked ~ label {
  color: gold;
}

.rating label:hover,
.rating label:hover ~ label {
  color: gold;
}

button {
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #874ed6;
}

@media (max-width: 768px) {
  #commentForm {
    width: 95%;
    margin: 50px auto; /* Center the form and add margin for better spacing */
    top: 10%;
    transform: translateY(-40%);
  }

  .icon i {
    font-size: 14px;
  }

  input[type="text"], input[type="email"], textarea, button {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  #commentForm {
    width: 100%;
    margin: 10px auto; /* Less margin for smaller screens */
    top: 30%;
    transform: translateY(-30%);
  }

  .icon i {
    font-size: 12px;
  }

  input[type="text"], input[type="email"], textarea, button {
    font-size: 12px;
  }
}

.success-message {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}



#musicDropdown {
  text-align: center;
  border-radius: 10px;
  background: linear-gradient(#1845ad, #23a2f6);
  outline: none;
  border: none;
  /* padding: 5px 10px; */
  color: #e5e5e5;
  font-size: 24px;
  /* position: fixed; */
  top: 150px;
  left: 20px;
  /* opacity: .4; */
  transition: 500ms;
}

/* #musicDropdown:hover {
  opacity: 1;
} */

#musicDropdown select {
  color: #e5e5e5;
  font-size: 24px;
  background-color: #5fd9f4;
  border: none;
  outline: none;
}

#musicDropdown:hover {
  background: linear-gradient(to right, #ff512f, #f09819);
}

.dark-mode {
  background-color: black;
  color: white;

}

.light-mode {
  background-color: white;
  color: black;
}

.light-mode input {
  background-color: rgba(255, 255, 255, 0.07);
  outline: none;
  border: 1px black solid;
  color: #0a0606;
}

.light-mode .box {
  /* min-height: 100vh; */
  /*box was taking whole vh,20 margin from top and bottom, also became responsive through this, preventing them from overflowing */
  max-width: calc(100% - 40px);
  /*box was taking whole vw gave them 20 margin from top and bottom also making its resposive and preventing from overflowing */
  overflow: visible;
  position: relative;

  /* Added scroll because content overflows */
  background: rgba(0, 0, 0, 0.13);
  border-radius: 5px;
  padding: 10px 25px;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(28, 22, 22, 0.1);
  box-shadow: 0 0 40px rgba(8, 7, 16, 0.6);
  color: #0f0c0c;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: auto;
  margin: 20px;
  margin-top: 50px;
}

.light-mode .box::before,
.light-mode .box::after {
  content: '';
  position: fixed;
  inset: -0.1rem;
  z-index: -1;
  background: conic-gradient(from var(--gradient-angle), #f34ba5, #f8597b, #76acdbfc, #776ede, #33fff8fc, #ed7866);
  border-radius: inherit;
  animation: moving 3s linear infinite;

  mask: linear-gradient(to right, black 0.5%, transparent 0%, transparent 99.5%, black 90%),
    linear-gradient(to bottom, black 0.5%, transparent 0%, transparent 99.5%, black 90%);
}

.light-mode ::placeholder {
  color: #8d8080;
}

.light-mode #view,
.light-mode #unit,
.light-mode #sound {
  background-color: rgba(16, 10, 10, 0.07);
  outline: none;
  border: none;
  color: #080505;
}

.light-mode option {
  color: #0f0b0b;
  background-color: #fff8f8;
  border: none;
  outline: none;
}

.light-mode .icons {
  background: rgba(10, 9, 9, 0.063);
  box-shadow: 4px 6px 10px rgba(19, 19, 19, 0.333);
}

.light-mode .ico {
  color: rgb(102, 100, 100);
}

.light-mode .ico:hover {
  color: white;
  transition: all ease-in 0.1s;
}

.light-mode ::placeholder {
  color: #120c0c;
}

.light-mode .snowflakes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.light-mode .snowflake {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #4134f7;
  animation: snowfall linear infinite;
  animation-duration: 10s;
  animation-fill-mode: both;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 2px 2px 6px #6d63f6;
}

.light-mode ul li a {
  color: #130a0a;
  text-decoration: none;
}

.light-mode .popup {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(239, 234, 234, 0.8);
  backdrop-filter: blur(5px);
}

.light-mode .popup-content {
  background-color: #120e0e;
  /* color: rgb(254, 254, 254); */
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  text-align: center;
  animation: slide-down 0.3s ease-out;
}

.light-mode .popup-content p,
.light-mode .popup-content h2,
.light-mode .popup-content h1 {
  color: #9ba2a8;
}

.light-mode .close {
  color: black;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
}

.light-mode .close:hover,
.light-mode .close:focus {
  color: #aaa;
}

.nameAbout {
  color: #333333;
  font-size: 30px;
}

#aboutPopup {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

#aboutPopup .popup-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 90%;
  max-width: 500px;
  text-align: center;
  animation: slide-down 0.3s ease-out;
}

#aboutPopup .popup-content h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#aboutPopup .popup-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 15px;
}

#aboutPopup .popup-content p strong {
  font-weight: bold;
  color: #080505;
  font-size: 25px;
  display: block;
}

#aboutPopup .popup-content ul {
  list-style-type: disc;
  margin-left: 40px;
  padding-left: 0;
}


.box h1 {
  font-family: Arial, sans-serif;
  font-size: 39px;
  color: #ffffff;
}

.box span {
  /* font-family: Arial, sans-serif;
  font-size: 39px; */
  font-family: sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: #ff7f50;
}

.light-mode .box h1 {
  color: black !important;
}

.light-mode .footerContainer {
  background-color: #080505;
}

.light-mode .copyright {
  background-color: white;
  color: black;
}

.rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
}

.rating input[type="radio"] {
  display: none;
}

.rating label {
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s;
}

.rating input[type="radio"]:checked~label {
  color: #ffc107;
}

.rating {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  direction: ltr;
}

.rating input[type="radio"] {
  display: none;
}

.rating label {
  cursor: pointer;
  font-size: 24px;
  margin-right: 10px;
}

.rating label:before {
  content: "\2605";
  /* Unicode character for a star */
  color: #ccc;
}

.rating input[type="radio"]:checked+label:before {
  color: #ffd700;
  /* Yellow color for selected star */
}

#backToTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  font-size: 20px;
  cursor: pointer;
  border: none;
  background: linear-gradient(#1845ad, #23a2f6);
  color: white;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  opacity: 0.4;
  transition: 500ms;
  display: flex;
  justify-content: center;
  align-items: center;
}

#backToTopBtn:hover {
  background: linear-gradient(to right, #ff512f, #f09819);
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.header {
  margin-top: 100px;
  width: 100vw;
}

.navMain {
  display: flex;
  justify-content: flex-start;
  gap: 35px;
  padding-left: 50px;
  visibility: hidden;
}

.sidebarOne {
  position: fixed;
  padding: 35px;
  top: 0;
  left: 0;
  height: 100vh;
  width: 230px;
  background-color: rgba(0, 0, 0, 0.697);
  backdrop-filter: blur(3px);
  z-index: 999;
  display: none;
  flex-direction: column;
  padding-top: 50px;
  overflow: scroll;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
}

.slide-in {
  animation-name: slide-in;
}

.slide-out {
  animation-name: slide-out;
}

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.fade-in {
  animation-name: fade-in;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
 .fade-out {
  animation-name: fade-out;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

@keyframes fade-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}


.sidebar ul {
  flex-direction: column;
  justify-content: flex-start;
  padding-left: 50px;
  gap: 35px;
  display: flex;
}

.cross {
  color: white;
  display: flex;
  margin-bottom: 30px;
}

.light-mode .cross {
  color: #000;
}

#sidebarLines {
  cursor: pointer;
  display: flex;
  color: white;
  position: fixed;
  top: 20px;
  left: 20px;
  right: auto;
  z-index: 1;
}

/* added a condition to toggle colour of sidebarlines in light mode */
.light-mode #sidebarLines {
  color: black;
}

.navMain li a {
  display: none;
}

#music-file {
  /* width: 260px; */
  font-size: 20px;
  font-family: 'Playfair Display', serif;
  cursor: pointer;
}

.file-input {
  font-family: 'Playfair Display', serif;
}

button {
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 16px;

  border: 0;

  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

  cursor: pointer;

  box-shadow: rgba(0, 0, 0, 0.1) -3px -3px 9px inset, rgba(0, 0, 0, 0.15) 0 3px 9px inset, rgba(0, 0, 0, 0.6) 0 1px 1px inset, rgba(0, 0, 0, 0.3) 0 -8px 36px inset, rgba(0, 0, 0, 0.6) 0 1px 5px inset, rgba(0, 0, 0, 0.2) 2px 19px 31px;
  background-color: #7F00FF;
  background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, .23) 0, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 69.79%, rgba(0, 0, 0, 0) 100%);
  transition: all 150ms ease-in-out;

}

button:hover {
  filter: brightness(1.05);
}

button:active {
  transform: scale(.95);
}

.navHeader .header-content nav .logo img {
  margin-right: auto;
  width: 120px;
  height: 100px;
}

.icon {
  text-transform: none;
}

#preset{
  display: flex;
  justify-content: center;
  gap: 20px;
}