dark_mode.css

@media (prefers-color-scheme: dark) {
  #background {
    background-image: linear-gradient(to top, #1b7474 0%, #290753 100%);
  }

  .container {
    border-radius: 35px;
    background: linear-gradient(145deg, #282828, #212121);
    box-shadow: 13px 13px 28px #104747, -13px -13px 28px #290753;
  }

  .side_block {
    border-radius: 35px;
    background: #252525;
    box-shadow: 9px 9px 18px #131313, -9px -9px 18px #373737;
  }

  #inner {
    border-radius: 35px;
    background: #252525;
    box-shadow: 9px 9px 18px #131313, -9px -9px 18px #373737;
  }

  h1,
  #location {
    color: #ffffff;
  }

  #date {
    color: #ffffff;
  }

  #icon {
    border-radius: 67px;
    background: linear-gradient(145deg, #282828, #212121);
    box-shadow: 11px 11px 22px #131313, -11px -11px 22px #373737;
  }

  #temperature {
    color: #ffffff;
  }

  #description {
    color: #ffffff;
  }

  input[type="text"] {
    border-radius: 35px;
    background: linear-gradient(145deg, #282828, #212121);
    box-shadow: 12px 12px 24px #131313, -12px -12px 24px #373737;
  }

  button {
    background: linear-gradient(145deg, #005dc1, #0a88ff);
    box-shadow: 12px 12px 24px #131313, -12px -12px 24px #373737;
  }

  #clock {
    color: #ffffff;
  }

  a {
    color: #ffffff;
  }

  a:visited {
    color: #ffffff;
  }
}