@import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap");

body {
  background: black;
  padding: 0px 15px;
}

@media screen and (min-width: 1900px) {
  html,
  body {
    cursor: none;
    overflow: hidden;
  }
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width: 580px) {
  .clockdate-wrapper {
    background: #141e30;
    background: -webkit-linear-gradient(to right, #243b55, #141e30);
    background: linear-gradient(to right, #243b55, #141e30);
    padding: 25px;
    text-align: center;
    border-radius: 5px;
    flex: 1 0 21%;
    margin: 10px;
  }
}

@media screen and (max-width: 579px) {
  .clockdate-wrapper {
    background: #141e30;
    background: -webkit-linear-gradient(to right, #243b55, #141e30);
    background: linear-gradient(to right, #243b55, #141e30);
    padding: 15px;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    flex: 1 0;
    margin: 10px;
  }
}

.clockdate-wrapper  {
  --myColor1: #243b55;
  --myColor2: #141e30;;
}
.clockdate-wrapper {
  background: linear-gradient(to bottom, var(--myColor1) 0%, var(--myColor2) 100%); 
}

#clock,
#date,
#description {
  font-family: "Varela Round", sans-serif;
  color: #fff;
  font-weight: bold;
}
#clock {
  font-size: 80px;
  padding-top: 15px;
  padding-bottom: 15px;
  letter-spacing: 5px;
}
#date {
  letter-spacing: 2px;
  font-size: 22px;
}
#description {
  letter-spacing: 3px;
  font-size: 22px;
}
#clock .ampm {
  font-size: 40px;
  padding-left: 15px;
}

@media screen and (max-width: 579px) {
  #clock {
    font-size: 40px;
    letter-spacing: 0px;
  }
  #date {
    font-size: 18px;
    letter-spacing: 0px;
  }
  #description {
    font-size: 18px;
    letter-spacing: 0px;
  }
  #clock .ampm {
    font-size: 20px;
    letter-spacing: 0px;
  }
}

@media screen and (min-width: 580px) {
  .primary-clock #clock {
    font-size: 120px;
    padding-top: 15px;
    padding-bottom: 15px;
    letter-spacing: 8px;
  }
  .primary-clock #date {
    font-size: 25px;
  }
  .primary-clock #description {
    font-size: 40px;
  }
  .primary-clock #clock .ampm {
    font-size: 60px;
  }
}

.clockdate-wrapper.black-clock-face #clock,
.clockdate-wrapper.black-clock-face #date,
.clockdate-wrapper.black-clock-face #description {
  color: black;
}