@font-face {
    font-family: 'Fake Hope';
    src: url('FakeHope-Regular.woff2') format('woff2'),
        url('FakeHope-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }
    @font-face {
        font-family: 'Arcade Interlaced';
        src: url('ArcadeInterlaced.woff2') format('woff2'),
            url('ArcadeInterlaced.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'LLPixel';
        src: url('LLPixel.woff2') format('woff2'),
            url('LLPixel.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Computo Monospace';
        src: url('Computo-Monospace.woff2') format('woff2'),
            url('Computo-Monospace.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    } 
        
    @font-face {
      font-family: 'Robot_Font';
      src: url('Robot_Font.woff2') format('woff2'),
          url('Robot_Font.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
  }  
    * {
        margin: 0;
        padding: 0;
        font-family: 'LLPixel';
      }
  body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; 
    background: var(--background);
  }
  .clock {
    width: 95vw;
    height: auto;
  }
  .date {
    display: block;
    text-align: center;
    font-size: 2vw;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: 100;
  }
  .date, .hr, .min, .sec, .milisec, .colon, .t1, .t3, .pr {
    color: var(--text);
    text-shadow: 0 0 10px var(--shadow-1), 0 0 15px var(--shadow-2), 0 0 20px var(--shadow-2);
  }


  .hr, .min, .sec, .milisec {
    font-family: 'Computo Monospace';
    width: 20%;
    float: left;
    text-align: center;
    font-size: 8vw;
  }
  .hr {
    transform: translate(19vw);
  }
  .min {
    transform: translate(-1vw);
  }
  .sec {
    transform: translate(-21vw);
  }
  .colon {
    font-family: 'Computo Monospace';
    width: 20%;
    float: left;
    text-align: center;
    font-size: 8vw;
    /* transform: translate(10vw); */
  }

  .colon:nth-child(4) {
    transform: translate(10vw);
}

.colon:nth-child(6) {
  transform: translate(-10vw);
}

  .t1{
    display: block;
    font-family: 'Arcade Interlaced';
    font-size: 3vw;
    text-align: center;
    font-weight: bold;
  }

  .t3{
    font-family: 'Arcade Interlaced';
      font-size: 1vw;
      font-weight: 200;
      display: block;
      text-align: center;
      margin: 50px 20px 20px 20px;
  }
  .pr{
    font-family: 'Robot_Font';
    font-weight: 100;
    font-size: 1.5vw;
    margin-left: 20px;
    margin-right: 10px;
    text-align: center;
  }
  .toggle-btn {
    width: 40px;
    height: 25px;
    border-radius: 25px;
    position: absolute;
    top: 50px;
    right: 50px;
    background: var(--toggle);
  }
  .toggle-btn .control {
    width: 19px;
    height: 19px;
    border-radius: 25px;
    position: relative;
    top: 3px;
    background: var(--toggle-control);
  }
  .dark .toggle-btn .control {
    float: right;
    right: 3px;
  }
  .light .toggle-btn .control {
    left: 3px;
  }
  .toggle-btn .light-txt, .toggle-btn .dark-txt {
    position: absolute;
    top: -100%;
  }
  .toggle-btn .light-txt {
    left: -80%;
    color: var(--light-txt);
  }
  .toggle-btn .dark-txt {
    left: 80%;
    color: var(--dark-txt);
  }
  
  /* set colors for dark theme */
  .dark {
    --background: #000;
    --text: rgb(255, 0, 0);
    --shadow-1: #cf0404;
    --shadow-2: #2c0101;
    --toggle: #fff;
    --toggle-control: #000;
    --dark-txt: #fff;
    --light-txt: #333;
  }
  /* set colors for light theme */
  .light {
    --background: #eee;
    --text: #666;
    --shadow-1: #bbb;
    --shadow-2: #ddd;
    --toggle: #666;
    --toggle-control: #fff;
    --dark-txt: #bbb;
    --light-txt: #666;
  }

  .button {
    padding: 15px 20px;
    margin: 10px;
    font-size: 2vw;
    font-weight: 100;
    text-shadow: none;
    color: white;
    background: var(--text);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 0 10px var(--shadow-1), 0 0 15px var(--shadow-2), 0 0 20px var(--shadow-2);
    transition: all 0.3s ease;
  }
  .button:hover {
      background: linear-gradient(45deg, #0056b3, #003d80);
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.7);
  }
  .button i {
      margin-right: 8px;
  }