html{
  color-scheme: dark light;
}
@media (prefers-color-scheme: dark) {
  .temperature {
    background: #333;
    color: white;
  }
  .calculator {
    background: black;
    color: #ddd;
  }
  .collapsible {
    background: #333;
    color: white;
  }
  .content {
    background: black;
    color: #ddd;
  }
  .active, .collapsible:hover {
    background: #333;
  }
}

@media (prefers-color-scheme: light) {
  .temperature{
    background: white;
    color: #555;
  }
  .calculator {
    background: #eee;
    color: black;
  }
  .collapsible {
    background: white;
    color: #555;
  }
  .collapsible {
    background: #eee;
    color: black;
  }
  .active, .collapsible:hover {
    background-color: #ffffff;
  }
}
/*How does this work, I'm actually; what the actual heck.*/
.container{
text-align: center;
width: 50vw;
display: table;
margin: 0 auto;
font-family: 'Roboto', sans-serif;
font-size: 5vh;
}
.container > .calculator {
display: inline-block;
width: 100%;
padding: 0 0 1em 0;
}

.Yesents {
background-color: #EA4C89;
border-radius: 8px;
border-style: none;
color: #FFFFFF;
cursor: pointer;
font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
height: 40px;
padding: 10px 16px;
transition: color 100ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
margin: 0 auto;
}

.button-1:hover,
.button-1:focus {
background-color: #F082AC;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
cursor: pointer;
border: none;
outline: none;
font-family: 'Roboto', sans-serif;
font-size: larger;
width: 50vw;
}

/* Style the collapsible content. Note: hidden by default */
.content {
padding: 0 18px;
display: none;
overflow: hidden;

}

.footer{
font-family: 'Roboto', sans-serif;
font-size: 1vh;
text-align: left;
bottom: 1px;
position: fixed;
}

button.gold {
background-color: gold !important;
color: #333 !important;
}

#confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@keyframes confetti-fall {
  to {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0; /* Fade out effect */
  }
}

/* Confetti particle style */
.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: confetti-fall linear infinite;
}