:root {
      --white:#FFFFFF;
      --grey:#ADBAC7;
      --background:#171B21;
      --blue:#368CEF;
      --field:#22272E;
      --description: #707070;
      --line: #2D3239;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&display=swap');

body { background-color: var(--background); font-family: 'Inter', sans-serif;}


.main {
      width: 100%;
      height: 100%;
      display: none;
      flex-direction: column;
}

.top {
      display: flex;
      flex-direction: column;
}

.top .time {
      color: white;
      text-align: center;
}

.top .date {
      color: var(--grey);
      font-size: clamp(20px, 1vw, 42px);
      text-align: center;
      margin-top: clamp(20px, 1vw, 80px);
}

.middle {
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 40px;
      margin-top: 5.5vh;
}

.middle div {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 40vw;
      height: clamp(50px, 7.5vh, 200px);
      background-color: var(--field);
}

.middle div span {
      vertical-align: middle;
      font-size: clamp(22px, 2vw, 36px);
      padding: 5px 15px;
      color: var(--white);
      font-weight: 500;
}

.bottom {
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 40px;
      margin-top: 4vh;
}

.bottom div div {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 40vw;
      background-color: var(--field);
}

.bottom .bottom-holder div span {
      vertical-align: middle;
      padding: 5px 15px;
      color: var(--white);
      font-weight: 500;
}

.infoText {
      vertical-align: middle;
      font-size: clamp(14px, 2vh, 20px);
      padding: 5px 15px;
      color: var(--grey);
      font-weight: 500;
      text-align: center;
}

.contact-info {
      font-size: clamp(10px, 2vh, 20px);
      color: var(--grey);
      font-weight: 500;
      vertical-align: bottom;
}

.contact-div {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 100%;
      margin: 5px 0px 20px 0px;
}
@media (max-width: 767px) {
      .middle, .bottom{
            flex-direction: column;
            width: 100%;
            gap: 0;
      }

      .middle div, .bottom div div{
            width: 100%;
            height: clamp(50px, 7.5vh, 100px);
      }

      .top .time {
            font-size: clamp(80px, 8vw, 150px);
      }

      .bottom .bottom-holder div span {
            font-size: clamp(22px, 2vw, 36px);
      }

      #div-0 { border-radius: 15px 15px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-1 { border-radius: 0px 0px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-2 { border-radius: 0px 0px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-3 { border-radius: 0px 0px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-4 { border-radius: 0px 0px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-5 { border-radius: 0px 0px 15px 15px; }
      .middle div:nth-child(1) { border-radius: 15px 15px 0px 0px; border-bottom: solid var(--line) 3px; }
      .middle div:nth-child(2) { border-radius: 0px 0px 15px 15px; }
}

@media (min-width: 770px) and (max-width: 1600px) {
      .middle div, .bottom div div{
            height: clamp(50px, 13vh, 180px);
      }

      .top .time {
            font-size: clamp(80px, 8vw, 178px);
      }

      .bottom .bottom-holder div span {
            font-size: clamp(26px, 4vw, 36px);
      }

      .bottom .bottom-holder div span, .middle div span {
            font-size: clamp(36px, 2vw, 50px);
            padding: 10px 20px;
      }

      #div-0 { border-radius: 15px 15px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-1 { border-radius: 0px 0px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-2 { border-radius: 0px 0px 15px 15px; }
      #div-3 { border-radius: 15px 15px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-4 { border-radius: 0px 0px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-5 { border-radius: 0px 0px 15px 15px; }
      .middle div:nth-child(1) { border-radius: 15px }
      .middle div:nth-child(2) { border-radius: 15px; }
      
}

@media (min-width: 1601px) {
      .middle div, .bottom div div{
            height: clamp(120px, 10vh, 200px);
      }

      .top .time {
            font-size: clamp(85px, 9vw, 178px);
      }

      .top .date {
            font-size: clamp(40px, 2vw, 80px);
      }

      .bottom .bottom-holder div span, .middle div span {
            font-size: clamp(45px, 2vw, 80px);
            padding: 15px 40px;
      }

      #div-0 { border-radius: 15px 15px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-1 { border-radius: 0px 0px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-2 { border-radius: 0px 0px 15px 15px; }
      #div-3 { border-radius: 15px 15px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-4 { border-radius: 0px 0px 0px 0px; border-bottom: solid var(--line) 3px; }
      #div-5 { border-radius: 0px 0px 15px 15px; }
      .middle div:nth-child(1) { border-radius: 15px }
      .middle div:nth-child(2) { border-radius: 15px; }
}

.info {
      display: flex;
      height: 100%;
      width: 100%;
      justify-content: center;
      align-items: center;
}

.infoMessage {
      display: none;
      color: var(--white);
      font-size: clamp(20px, 5vw, 60px);
      margin: 0px 5px;
      margin-bottom: 50px;
      text-align: center;
      line-height: 1.3;
}
  
.loading {
      width: 50px;
      height: 50px;
      border: 5px solid #ccc;
      border-top: 5px solid transparent;
      border-radius: 50%;
      margin-bottom: 50px;
      animation: spin 1s linear infinite;
}
    
@keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
}