:root {
  --bg-color: #333;
  --txt-color: #f0f0f0;
  --font-s: 'Trebuchet MS', sans-serif;
  --st-b: 1;
}

.clock {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--bg-color);
    font-size: 100px;
    font-family: var(--font-s);
    color: var(--txt-color);
    transition: opacity 1s ease;
}
.dow { /* Day of Week */
    position: absolute;
    top: 5%;
    left: 5%;
    font-size: 40px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    transition: opacity 1s ease;
}
.date { /* Date */
    position: absolute;
    bottom: 5%;
    right: 5%;
    font-size: 40px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    transition: opacity 1s ease-out;
}
.temp { /* Temp */
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    transition: opacity 1s ease-out;
}
.sbg { /* Settings Background */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--bg-color) 80%, lightgray);
    opacity: var(--st-b);
    transition: opacity 0.3s ease-in-out;
}


.settings { /* Settings Button */
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 30px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    background-color: color-mix(in srgb, var(--bg-color) 70%, lightgray);
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 15px;
    opacity: var(--st-b);
    transition: opacity 0.3s ease-in-out;
}
.settings:hover { /* Settings Button Hover Effect */
    background-color: color-mix(in srgb, var(--bg-color) 90%, gray);
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}
.reset { /* Reset Button */
    position: absolute;
    bottom: 5%;
    left: 5%;
    font-size: 30px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    background-color: color-mix(in srgb, var(--bg-color) 70%, lightgray);
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 15px;
}
.reset:hover { /* Reset Button Hover Effect */
    background-color: color-mix(in srgb, var(--bg-color) 90%, gray);
}
/* SETTINGS OPTIONS */
.tf { /* 24-Hour Format Button */
    position: absolute;
    top: 10%;
    left: 5%;
    font-size: 20px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    background-color: color-mix(in srgb, var(--bg-color) 70%, gray);
    border: none;
    cursor: pointer;
    padding: 5px 5px;
    border-radius: 5px;
    transition: opacity 1s ease-out;
}
.ap { /* Show AM/PM Button */
    position: absolute;
    top: 10%;
    left: calc(5% + 20%);
    font-size: 20px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    background-color: color-mix(in srgb, var(--bg-color) 70%, gray);
    border: none;
    cursor: pointer;
    padding: 5px 5px;
    border-radius: 5px;
    transition: opacity 1s ease-out;
}
.bgc { /* Background Color Input */
    resize: none;
    position: absolute;
    top: 20%;
    left: calc(5% + 20%);
    font-size: 15px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    background-color: color-mix(in srgb, var(--bg-color) 70%, gray);
    border-color: color-mix(in srgb, var(--bg-color) 80%, gray);
    border-width: 1px;
    border-radius: 5px;
    transition: opacity 1s ease-out;
}
.bgct { /* Background Color Text */
    position: absolute;
    top: 20%;
    left: 5%;
    font-size: 20px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    transition: opacity 1s ease-out;
}
.txtc { /* Text Color Input */
    resize: none;
    position: absolute;
    top: 30%;
    left: calc(5% + 20%);
    font-size: 15px;
    font-family: var(--font-s);
    font-weight: lighter;
    color : var(--txt-color);
    background-color: color-mix(in srgb, var(--bg-color) 70%, gray);
    border-width: 1px;
    border-color: color-mix(in srgb, var(--bg-color) 80%, gray);
    border-radius: 5px;
    transition: opacity 1s ease-out;
}
.txtct { /* Text Color Text */
    position: absolute;
    top: 30%;
    left: 5%;
    font-size: 20px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    transition: opacity 1s ease-out;
}
/* <Checkbox Group> */
.checkbox-group {
  position: relative;
  height: 200px; 
}
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--voffset, 0%); 
  top: var(--offset, 0%); 
  width: 20px;
  height: 20px;
  cursor: pointer;
  background-color: color-mix(in srgb, var(--bg-color) 70%, gray);
  border: 1px solid color-mix(in srgb, var(--bg-color) 80%, gray);
  border-radius: 5px;
  display: grid;
  place-content: center;
}
input[type="checkbox"]::after {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background-color: var(--txt-color);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="checkbox"]:checked::after {
  transform: scale(1);
}
input[type="checkbox"]:nth-of-type(1) { --voffset: calc(5% + 20%); }
input[type="checkbox"]:nth-of-type(2) { --voffset: calc(5% + 20%); }
input[type="checkbox"]:nth-of-type(3) { --voffset: calc(5% + 20%); }
input[type="checkbox"]:nth-of-type(4) { --voffset: calc(5% + 20%); }
input[type="checkbox"]:nth-of-type(5) { --voffset: calc(5% + 20%); }
input[type="checkbox"]:nth-of-type(1) { --offset: 40%; }
input[type="checkbox"]:nth-of-type(2) { --offset: 50%; }
input[type="checkbox"]:nth-of-type(3) { --offset: 60%; }
input[type="checkbox"]:nth-of-type(4) { --offset: 80%; }
input[type="checkbox"]:nth-of-type(5) { --offset: 70%; }
/* </Checkbox Group> */
.dowct { /* Day of Week Checkbox Text */
    position: absolute;
    top: 40%;
    left: 5%;
    font-size: 20px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    transition: opacity 1s ease-out;
}
.datect { /* Date Checkbox Text */
    position: absolute;
    top: 50%;
    left: 5%;
    font-size: 20px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    transition: opacity 1s ease-out;
}
.clockct {  /* Clock Checkbox Text */
    position: absolute;
    top: 60%;
    left: 5%;
    font-size: 20px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    transition: opacity 1s ease-out;
}
.tempct { /* Temp Checkbox Text */
    position: absolute;
    top: 70%;
    left: 5%;
    font-size: 20px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    transition: opacity 1s ease-out;
}
.fontt { /* Font Dropdown Text */
    position: absolute;
    left: 40%;
    top: 10%;
    font-size: 20px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    transition: opacity 1s ease-out;
}
.font  {
  /* Positioning */
  position: absolute;
  top: 10%;
  left: calc(40% + 15%);
  /* Styling */
  background-color: color-mix(in srgb, var(--bg-color) 70%, gray);
  border: 1px solid color-mix(in srgb, var(--bg-color) 80%, gray);
  border-radius: 5px;
  font-size: 20px;
  color: var(--txt-color);
  font-family: var(--font-s);

  cursor: pointer;

  /* Smooth Animation Setup */
  transition: 
    opacity 1s ease-out, 
    background-color 0.3s ease, 
    transform 0.3s ease, 
    box-shadow 0.3s ease;
}

/* Hover effect for a "lifted" feel */
.font:hover {
  background-color: color-mix(in srgb, var(--bg-color) 60%, gray);
  transform: translateX(calc(-50% + 100px)) scale(1.02);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.sett { /* Settings Checkbox Text */
    position: absolute;
    top: 80%;
    left: 5%;
    font-size: 20px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    border: none;
    cursor: pointer;
    transition: opacity 1s ease-out;
}
.tempf { /* Celsius Button */
    position: absolute;
    top: 70%;
    left: 40%;
    font-size: 20px;
    font-family: var(--font-s);
    font-weight: lighter;
    color: var(--txt-color);
    background-color: color-mix(in srgb, var(--bg-color) 70%, gray);
    border: none;
    cursor: pointer;
    padding: 5px 5px;
    border-radius: 5px;
    transition: opacity 1s ease-out;
}