:root {
    --color-dark: #1e202b;
    --color-dark-alt: #262936;
    --color-light: #fff;
    --color-primary: #009ad8;
  }
  html {
    font-size: 14px;
  }
  
  body {
    color: #bfc1c8;
    font-family: "Roboto", "Open Sans", sans-serif;
    font-weight: 300;
    line-height: 1.5;
    background: var(--color-dark);
    text-wrap: balance;
  }
  a {
    text-decoration: none;
  }
  /* ?===== Start Navbar */
  .navbar-brand .logo,
  .navbar-brand .logo-info {
    vertical-align: middle;
  }
  .navbar-brand .logo {
    margin-right: 0.625rem;
  }
  
  .navbar-brand .site-title {
    margin-bottom: 5px;
    font-size: 16px;
    color: var(--color-light);
  }
  .navbar-brand .site-description {
    font-size: 10px;
    display: block;
    color: #bfc1c8;
  }
  
  .navbar {
    padding-block: 50px;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 25px;
    padding-left: 25px;
  }
  
  .nav-item a.nav-link {
    color: var(--color-light);
    border: 2px solid transparent;
    border-radius: 30px;
    font-weight: 400;
  }
  
  .navbar-toggler {
    padding: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
  }
  
  .navbar-toggler svg {
    color: var(--color-light);
    font-size: 15px;
  }
  .navbar-toggler:hover {
    border-color: var(--color-primary);
  }
  .navbar-toggler:hover svg {
    color: var(--color-primary);
  }
  
  .navbar-toggler:focus {
    box-shadow: none;
  }
  /* ?===== Start Hero */
  .hero {
    background-image: url("../img/banner.png");
    background-position: 0 20%;
    background-size: cover;
    background-repeat: no-repeat;
    padding-block: 70px;
    min-height: 350px;
  }
  
  .find-form input.form-control,
  .subscribe-form input.form-control {
    padding: 20px 50px 20px 20px;
    background-color: var(--color-dark);
    color: var(--color-light);
    outline: none;
    border: none;
    border-radius: 30px;
  }
  .find-form input.form-control:focus,
  .subscribe-form input.form-control:focus {
    box-shadow: none;
  }
  .find-form input.form-control::placeholder,
  .subscribe-form input.form-control::placeholder {
    color: #757575;
  }
  
  .btn-find {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    padding: 0 40px;
    border: none;
    background: var(--color-primary);
    border-radius: 30px;
    color: var(--color-light);
  }
  
  /* ?===== Start Forecast Table */
  .forecast-table {
    margin-top: -150px;
    margin-bottom: 50px;
  }
  
  .forecast {
    background-color: #323544;
  }
  
  .forecast.tomorrow {
    background-color: var(--color-dark-alt);
  }
  .forecast .forecast-header {
    background: rgba(0, 0, 0, 0.1);
    padding: 10px;
    text-align: center;
    font-weight: 400;
  }
  .forecast .forecast-content {
    padding:30px 20px;
  }
  
  .date {
    font-size: 12px;
  }
  .time {
    font-style: italic;
    font-size: 12px;
  }
  .forecast-content .num {
    font-size: 70px;
  }
  .num,
  .degree {
    color: var(--color-light);
    font-weight: 700;
  }
  .custom {
    color: var(--color-primary);
  }
  
  /* ?===== Start Footer */
  .footer {
    background: var(--color-dark-alt);
    padding: 50px 0;
  }
  
  .footer .social-links a {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 50%;
    background: var(--color-dark);
    color: var(--color-primary);
    text-align: center;
    line-height: 2;
    transition: 0.3s ease;
    font-size: 20px;
  }
  .footer .social-links a:hover {
    background: var(--color-primary);
    color: var(--color-light);
  }
  /* ?===== Start About */
  .weather-svg {
    border-radius: 15px;
  }
  svg .sun {
    animation: moveSun 10s ease-in-out infinite;
  }
  svg .moon {
    animation: moveMoon 10s ease-in-out infinite;
  }
  svg .rocket {
    animation: moveRocket 10s linear infinite;
  }
  svg .rocket-bottom {
    animation: moveRocket 10s linear infinite;
  }
  svg .cloud {
    animation: movecloud 5s ease-in-out infinite;
  }
  
  @keyframes moveRocket {
    0% {
      transform: translateX(-200px) translateY(200px);
    }
    100% {
      transform: translateX(250px) translateY(-250px);
    }
  }
  
  @keyframes movecloud {
    0% {
      transform: scale(1.05) rotateX(10deg);
    }
    50% {
      transform: scale(1) rotateX(-10deg);
    }
    100% {
      transform: scale(1.05) rotateX(10deg);
    }
  }
  @keyframes moveSun {
    0% {
      fill: var(--color-light);
      opacity: 0;
    }
    50% {
      opacity: 1;
      fill: #ffd43b;
    }
    100% {
      opacity: 0;
      fill: var(--color-light);
    }
  }
  @keyframes moveMoon {
    0% {
      opacity: 1;
      transform: rotateX(0deg) rotateY(10deg);
      fill: var(--color-light);
    }
    50% {
      transform: rotateX(10deg) rotateY(-10deg);
      opacity: 0;
      fill: #ffd43b;
    }
    100% {
      transform: rotateX(0deg) rotateY(10deg);
      opacity: 1;
      fill: var(--color-light);
    }
  }