@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-VariableFont_wght_200_Light.woff2') format('woff2'),
         url('fonts/Montserrat-VariableFont_wght_200_Light.woff') format('woff'),
         url('fonts/Montserrat-VariableFont_wght_200_0.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-VariableFont_wght_400_4.woff2') format('woff2'),
         url('fonts/Montserrat-VariableFont_wght_400_4.woff') format('woff'),
         url('fonts/Montserrat-VariableFont_wght_400_4.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

body{
  font-family:'Montserrat', sans-serif;
  background-color:white;
  margin: 0px;
  
  /* Codepen flash fix*/
  transform:translateZ(0);
}

#main-container {
  width: 80vw; /* Width relative to the viewport width */
  max-width: 500px; /* Maximum width */
  min-width: 300px; /* Minimum width to prevent cutting off elements */
  margin: 0 auto; /* Center the container horizontally */
  display: flex;
  flex-direction: column;
  align-items: center; /* Horizontal alignment */
  justify-content: center; /* Vertical alignment */
  min-height: 100vh; /* Full viewport height */
  margin-top: -100px; /* Remove top margin */
}



#clock{
  position:relative;
  display:block;
  color: #252525;
  font-size:10vw;
  background: rgb(0,0,0) linear-gradient(140deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.0) 100%);
  width: 100% ; /* Adjusted to viewport width */
  padding: 9vw; /* Adjusted to viewport width */
  margin:0;
  transition:background-color 0.5s linear;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  margin-bottom: 0px;
  max-width: 400px; /* Maximum width */
  max-height: 400px; /* Maximum height */
}

#letters, #letters span{
   display:inline-block;
   line-height: 3.5vw; /* Adjusted to viewport width */
   text-align:center;
   transition:all 0.5s linear;
   font-size: 2.5vw; /* Adjusted to viewport width */
}
#letters span{
    width:35px;
}


.light{
  color:#fff !important;
  text-shadow: 0px 0px 5px #fff;
}


/* Style for the language dropdown menu */
#language-dropdown {
  font-size: 1rem;
  padding: 10px 30px 10px 15px; /* Adjust the right padding to move the icon more toward the center */
  border: 1px solid #373739;
  border-radius: 4px;
  background-color: #373739;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  text-align: center;
  width: auto; /* Remove fixed width to allow content-based width */
  margin: -60px; /* Center the dropdown horizontally */
  box-sizing: content-box; /* Adjust box sizing */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  color: white;
  z-index: 2;
}

/* Style for the dropdown arrow pseudo-element */
#language-dropdown::after {
  content: "▼"; /* Unicode character for a down arrow (▼) */
  position: absolute;
  top: 50%;
  right: 10px; /* Adjust the right distance for padding */
  transform: translateY(-50%);
  pointer-events: none;
}

/* Style for the dropdown when hovered */
#language-dropdown:hover {
  border-color: #888;
}




#desc{
  margin:50px auto;
  width:420px;
  height:520px;
  color:white;
  font-size:18px;
}

/* dots in the edge for showing the minutes */
#e0,#e1,#e2,#e3{ 
    position:absolute;
    color:white;    
    font-size: 2vw; /* Adjusted to viewport width */
}

#e0, #e1{
  top:15px;

}
#e2, #e1{
  right:25px;
}
#e0, #e3{
  left:25px;
}
#e2, #e3{
  bottom:20px;
}


/* Just some basic styling */
h1{
  display:block;
  color:white;
  width:100%;
  text-align:center;
}

a{
  color:#555;
  text-decoration:none;
}

a:hover{
  text-shadow:0 0 2px #555;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #191919;
        color: white;
    }
}

@media screen and (max-width: 668px) {
  #main-container {
    max-width: 100%; /* Adjust the maximum width for smaller screens */
    margin-top: -40px;
  }

  #language-dropdown {
    max-height: none; /* Remove the maximum height for the dropdown */
    overflow-y: visible; /* Disable vertical scroll for the dropdown */
    margin: -60px; 
    z-index: 2;
    padding: 10px;
    font-size: 10px;
    width: 30%;
  }
  #clock{
   padding-top: 80px;
   padding: 50px;
   padding-bottom: 80px;
   margin-top: 0px;
   max-width: 100%; /* Adjust the maximum width for smaller screens */
   font-size: 5vw;
   width: 100% ; /* Adjusted to viewport width */
}