@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap');
html,
body {
      margin: 0;
      padding: 0;
      background-color: #87CEEB;
      background: url('../img/artwork/background.jpg') no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;      
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center top;
      
}

img {
      max-width: 100%;
}

body {
      display: grid;
      font-family: Montserrat;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: minmax(300px, auto);
      color: #000000;
      text-shadow: 0.4px 0.4px 0.4px rgba(0, 0, 0, .2);
}

h1 {
      font-family: Montserrat;
      grid-column: span 3;
      text-align: center;
      color: #000000;
}

#wrapper {
      display: grid;
      grid-column: 3 / 11;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: minmax(auto, auto);
      grid-row-gap: 10px;
}

#clock-box,
#info {
      grid-column: span 3;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
}

#clock-box #clock {
      grid-column: 5 / 9;
      background-color: #87cfebbb;
      padding: .3rem 1rem;
      padding-top: .8rem;
      text-align: center;
      font-size: 2.4rem;
      border-radius: 10rem;
}

.time {
      display: block;
      font-family: Montserrat;
      line-height: 3.2rem;
      letter-spacing: 2px;
}

.date {
      font-size: 30px;
      display: block;
}



.avt {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
}

#info {
      margin-top: 2.6rem;
}

#heart {
      grid-column: span 2;
      display: grid;
      grid-template-rows: 2;
      font-size: 77px;
      color: #ff0000;
      align-self: center;
      padding-bottom: 2.6rem;
      text-align: center;
}

.anni {
      font-size: 20px;
      letter-spacing: 0.2px;
      font-weight: 700;
}

#info .one {
      grid-column: 3 / 6;
      text-align: center;
      font-size: 1.7rem;
      font-weight: 700;
}

#info .two {
      grid-column: 8 / 11;
      text-align: center;
      font-size: 1.7rem;
      font-weight: 700;
}

footer {
      grid-column: span 3;
      text-align: center;
      font-size: 2rem;
      font-weight: 700;
}

#mask {
      background-image: linear-gradient(to top, #6d44cc5d 0%, #f09cd880 100%);
      opacity: .42;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
}

@media (max-width: 992px) {
      #wrapper {
            grid-column: span 12;
      }

      #clock-box #clock {
            grid-column: 2 / 12;
      }

      .avt {
            width: 120px;
            height: 120px;
      }

      #info .one,
      #info .two {
            grid-column: span 12;
      }

      #heart {
            grid-column: span 12;
            padding-bottom: 1rem;
      }

      footer {
            font-size: 1.2rem;
            margin: 0;
            padding-bottom: 2rem;
      }
}

::-webkit-scrollbar-track {
      background-color: #ffffff;
}

::-webkit-scrollbar {
      width: 7px;
      height: 7px;
      background-color: #ffffff;
      cursor: pointer;
}

::-webkit-scrollbar-thumb {
      background-color: #87CEEB;
      border-radius: 5px 5px 5px 5px;
}

::-moz-scrollbartrack-vertical {
      background-color: white;
}

::-moz-scrollbar {
      width: 7px;
      height: 7px;
      background-color: #87CEEB;
      cursor: pointer;
}

::-moz-scrollbarbutton-up {
      background-color: #87CEEB;
      border-radius: 5px 0 0 5px;
}

input[type="checkbox"] {
      height: 0;
      width: 0;
      visibility: hidden;
}