* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   overflow: hidden;
}

body {
   font-family: 'Quicksand', sans-serif;
   color: #fff;
}

h1 {
   font-size: 2.5rem;
   margin-bottom: 2rem;
}

h1, h2 {
   font-weight: 400;
}

h2 {
   opacity: 0.7;
   margin-bottom: 0.5rem;
}

.weather-report {
   display: flex;
   font-weight: 500;
}

.icon {
   height: fit-content;
}

.date, .quote {
   font-weight: 500;
}

.quote {
   position: absolute;
   top: 0;
   padding: .5rem;
   right: 5px;
   margin-top: 1rem;
   width: 300px;
   box-shadow: 1px 1px 5px #000;
}

.quote > blockquote {
   margin-bottom: .5rem;
}

.temp, .desc {
   align-self: center;
}

.main-container {
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.time {
   font-size: 8rem;
}

.github, .social {
   width: 100%;
   margin-bottom: 16px;
   font-weight: 600;
   position: absolute;
   bottom: 0;
   text-align: center;
   font-size: 18px;
}

.social > a {
   margin: 0 5px;
   color: #000;
}

.github > a {
   color: #000;
}

@media (max-width: 575px) {
   .time {
      font-size: 5rem;
   }

   h1 {
      font-size: 2rem;
      margin-top: 1rem;
   }

   h2 {
      font-size: 1.2rem;
   }

   .quote {
      position: static;
   }

   .weather-quote {
      text-align: center;
      width: 100%;
   }
}

@media (max-width: 480px) {
   .time {
      font-size: 4rem;
      text-align: center;
   }

   h1 {
      font-size: 1.8rem;
   }
}