*{
  user-select: none;
}

body{
    background-color: black;
    cursor:cell;
  }

@media (prefers-color-scheme: light) { 
  body {
    background-color: #FCFBF4;
  }
  
  div{
  color: black;
  }

  p{
    color: black;
  }
}


@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
  }
  div{
  color: #FCFBF4;
  }

  p{
    color: #FCFBF4;
  }
}




.clock {
  position: relative;
  display: grid;
  flex:1;
  height: 35vw;
  width: 35vw;
  border: 0.1px solid white;
  border-radius: 5px;
  padding: 4.5vw;
  text-align: center;
  margin: 0px auto;
  overflow:hidden;
  place-items: center;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 10%;
  width: 100%;
}

p{
  opacity: 0.2;
}

p,
.it,
.is,
.am,
.pm,
.a,
.quarter,
.twenty,
.five-up,
.half,
.ten-up,
.to,
.past,
.nine,
.one,
.six,
.three,
.four,
.five-down,
.two,
.eight,
.eleven,
.seven,
.twelve,
.ten-down,
.oclock {
  margin: 0px;
  font-size: 2.3vw;
  justify-content: space-between;
  font-family: 'Quicksand', sans-serif;
  transition: 250ms ease;
}

.it,.is{
  opacity: 100%;
}

.on{
  opacity: 1;
}
.off{
  opacity: 0.2;
}

.nightColor{
  color: #2e07b0;
  border-color: #2e07b0;
}

.dayColor{
  color: #f5b105;
  border-color: #f5b105;
}

.title, .description {
  font-family: 'Quicksand', sans-serif;
}
.title{
  font-size: 3vw;
  margin: 3vw auto;
  text-align: center;
}

.description{
  margin: 3vw auto;
  text-align:center;
  opacity:60%
}

.hasShadow{
  box-shadow: 0px 0px 35px;
}