@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");

#meta {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 13.28px;
  color: grey;
}

iframe:not(#instagram-embed-0) {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  margin-bottom: 20px;
}

p, h1, h2, h3, h4, h5, img {
  margin-bottom: 20px;
}

br {
  display: none;
}

img {
  aspect-ratio: 3/2;
  object-fit: cover;
}


@media (prefers-color-scheme: dark) {
    body {
      background-color: #0d0d0d !important;
    }

    article, p {
      color: #f1f1f1 !important;
    }

    #meta p {
      color: grey !important;
    }

    img {
      outline: #333 2px solid !important;
    }
}

img {
  outline: #D3D3D3 2px solid;
}

@media only screen and (max-width: 500px) {
  * {
    margin: 0;
    padding: 0;
    font-family: Noto Sans;
  }

  header {
    height: 60px;
    width: 100%;
    background-color: #09214D;
    position: sticky;
  }

  header a {
    height: 60px;
    width: 200px;
    display: flex;
    align-items: center;
  }

  header a img {
    height: 50px;
    margin-left: 10px;
  }

  #wrapper {
    width: 90vw;
    margin: auto;
  }

  #cover {
    width: 100vw;
    display: block;
    margin: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    margin-bottom: 20px;
  }

  #article-1 {
    margin-top: 20px;
  }

  article img {
    width: 100%;
  }

  footer {
    height: 250px;
    background-color: #09214D;
  }
}

@media only screen and (min-width: 500px) {
  * {
    margin: 0;
    padding: 0;
    font-family: Noto Sans;
  }

  header {
    height: 60px;
    width: 100%;
    background-color: #09214D;
    position: sticky;
  }

  header a {
    height: 60px;
    width: 200px;
    display: flex;
    align-items: center;
  }

  header a img {
    height: 50px;
    margin-left: 10px;
  }

  #wrapper {
    width: 90vw;
    margin: auto;
  }

  #cover {
    width: 100%;
    display: block;
    margin: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    margin-bottom: 20px;
  }

  #article-1 {
    margin-top: 20px;
  }

  article img {
    max-width: 500px;
    width: 100%;
  }

  footer {
    height: 250px;
    background-color: #09214D;
  }
}

@media only screen and (min-width: 540px) {
  * {
    margin: 0;
    padding: 0;
    font-family: Noto Sans;
  }

  header {
    height: 60px;
    width: 100%;
    background-color: #09214D;
    position: sticky;
  }

  header a {
    height: 60px;
    width: 200px;
    display: flex;
    align-items: center;
  }

  header a img {
    height: 50px;
    margin-left: 10px;
  }

  #wrapper {
    width: 500px;
    margin: auto;
  }

  #cover {
    width: 100%;
    display: block;
    margin: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    margin-bottom: 20px;
  }

  #article-1 {
    margin-top: 20px;
  }

  article img {
    max-width: 500px;
    width: 100%;
  }

  footer {
    height: 250px;
    background-color: #09214D;
  }
}

@media only screen and (min-width: 740px) {
  * {
    margin: 0;
    padding: 0;
    font-family: Noto Sans;
  }

  header {
    height: 60px;
    width: 100%;
    background-color: #09214D;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  header a {
    height: 60px;
    width: 200px;
    display: flex;
    align-items: center;
  }

  header a img {
    height: 25px;
    margin-left: 20px;
  }

  #nav {
    color: white;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #nav-panel {
    height: 60px;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
  }

  #nav a {
    color: white;
    text-decoration: none;
  }

  #nav h3 {
    font-size: 14px;
    text-decoration: none;
  }

  .hover1:hover {
    background-color: lime;
    color: #1f1f1f;
    text-decoration-color: #1f1f1f;
  }

  .hover2:hover {
    background-color: lime;
    color: #1f1f1f;
    text-decoration-color: #1f1f1f;
  }

  .hover3:hover {
    background-color: lime;
    color: #1f1f1f;
    text-decoration-color: #1f1f1f;
  }

  .hover4:hover {
    background-color: lime;
    color: #1f1f1f;
    text-decoration-color: #1f1f1f;
  }

  #wrapper {
    width: 500px;
    margin: auto;
  }


  #cover {
    width: 708px;
    display: block;
    margin: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    margin-bottom: 20px;
  }

  #article-1 {
    margin-top: 20px;
  }

  article img {
    max-width: 500px;
    width: 100%;
  }

  footer {
    height: 250px;
    background-color: #09214D;
  }
}