@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Hegarty&family=Playwrite+US+Modern:wght@100..400&family=Roboto+Mono:wght@100..700&display=swap');
body {
    overflow: hidden;
    position: relative;
    height: 100vh; /* This is the new line you need to add */
}
.clock-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /* text-align: center; is no longer needed because of align-items: center */
}
/* The rest of your CSS remains the same */
b {
  font-weight: inherit;
}
h1 {
  font-family: monospace;
  font-size: 4vw;
  line-height: 1em;
  font-weight: bolder;
  vertical-align: middle;
  margin: 10px;
  text-align: center;
  cursor: inherit;
  user-select: none;
  -webkit-user-select: none; /* Chrome, Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet-explorer/Edge */
  font-family: 'Roboto Mono', monospace;
}
h2 {
  font-family: fantasy;
  font-weight: lighter;
  font-size: 12vw;
  line-height: 1em;
  vertical-align: middle;
  white-space: nowrap;
  margin: 0;
  text-align: center;
  cursor: inherit;
  user-select: none;
  -webkit-user-select: none; /* Chrome, Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet-explorer/Edge */
  font-family: 'BBH Sans Hegarty', sans-serif;
}
.button {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0px;
    right: 20px;
    z-index: 1000;
    background: transparent;
}
.button button {
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    color: #000000;
    background-color: lightgray;
    border: 2px solid darkgray; 
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 1vw; 
}
.button button:hover {
    background-color: #f2f2f2;
}
h8 {
    font-size: 1vw;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
}
/* This is the existing container for positioning. It does not need changes. */
/* .button { ... } */
.button.is-fullscreen {
    opacity: 0; 
}
/* Rule to target the h8 text inside the button when in fullscreen */
.button.is-fullscreen h8 {
    opacity: 0;
}
.button.button.is-fullscreen button:hover {
  background-color: lightgray;
  cursor: none;
}
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
/* Style for the container of the switch */
.switch-container {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 20px;
    left: 20px;  /* Moves the container to the left */
    z-index: 1000;
    background: transparent;
}
/* Hide default HTML checkbox */
.switch-container input {
    opacity: 0;
    width: 0;
    height: 0;
}
/* The slider/track itself */
.switch-label {
    position: relative;
    display: inline-block;
    width: 30px; /* 50% smaller */
    height: 17px; /* 50% smaller */
    margin: 0 2px; /* Adjusting margin for the smaller size */
}
.switch-label .slider {
    position: absolute;
    cursor: inherit;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fafafa;
    transition: .4s;
}
/* The "thumb" or dot on the slider */
.switch-label .slider:before {
    position: absolute;
    content: "";
    height: 13px; /* 50% smaller */
    width: 13px; /* 50% smaller */
    left: 2px; /* 50% smaller */
    bottom: 2px; /* 50% smaller */
    /* background-color: #8fd6ff; */
    transition: .4s;
    cursor: inherit;
}
/* When the checkbox is checked, move the slider dot */
.switch-container input:checked + .switch-label .slider:before {
    transform: translateX(13px); /* 50% smaller */
}

/* Rounded corners for the track and dot */
.switch-label .slider.round {
    border-radius: 17px; /* 50% smaller */
    cursor: inherit;
}
.switch-label .slider.round:before {
    border-radius: 50%;
}
/* Text styles for EN/ES labels */
.lang-text {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8em; /* Adjusted for better visual balance */
    color: #000000;
    font-weight: bold;
    transition: opacity 0.4s ease-in-out;
}
/* Default state: EN is active, ES is faded */
#lang-text-en {
  opacity: 1;
  cursor: inherit;
  user-select: none;
}
#lang-text-es {
  opacity: 0.25;
  cursor: inherit;
  user-select: none;
}
/* When switch is checked (ES is active): EN is faded, ES is active */
.switch-container input:checked ~ #lang-text-en {
  opacity: 0.25;
  cursor: inherit;
}
.switch-container input:checked ~ #lang-text-es {
  opacity: 1;
  cursor: inherit;
}
----------------------------------------------------------------------------------------------------------------------------------------------------- {fill: #000000;}