*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  header {
    iframe {
      width: 100%;
    }
  }

  .header_box {
    margin-top: 2.5rem;
    width: 100%;
    .logo {
      /* background-color: antiquewhite; */
      height: 7rem;
    }
    .links {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      height: 2.5rem;
      padding-left: 4vh;
      padding-right: 8vh;

      border-bottom: solid 1px #f2f2f2;
      border-top: solid 1px #f2f2f2;

      .link.search {
        display: flex;
        align-items: center;
        gap: 0.4rem;

        border-radius: 20px;
        background: #f9f9f9;
        padding: 0.4rem;

        .search_input {
          border: none;
          outline: none;
          background: none;
          width: 10rem;
          padding: 0.4rem;;
        }
      }
    }
  }

  article {
    max-width: 100vw;
    letter-spacing: 0.06vh;

    @media (orientation: landscape) {
      h3 {
        padding-left: 25vw;
        padding-right: 25vw;
        font-size: 6.5vh;
      }
    }

    @media (orientation: portrait) {
      h3 {
        padding-left: 8vw;
        padding-right: 8vw;
        font-size: 8vw;
      }
    }

    @media (orientation: landscape) {
      blockquote {
        padding-left: 25vw;
        padding-right: 25vw;
        font-size: 4vh;
        font-weight: 100;
      }
    }

    @media (orientation: portrait) {
      blockquote {
        padding-left: 8vw;
        padding-right: 8vw;
        font-size: 6vw;
        font-weight: 200;
      }
    }

    blockquote {
      color: #6b6b6b;
    }

    @media (orientation: landscape) {
      p {
        padding-left: 25vw;
        padding-right: 25vw;
        font-size: 3vh;
      }
    }

    @media (orientation: portrait) {
      p {
        padding-left: 8vw;
        padding-right: 8vw;
      }
    }

    p {
      color: #242424;
    }

    @media (orientation: landscape) {
      section.image {
        padding-left: 6vw;
        padding-right: 6vw;
        p.image_caption {
          font-weight: 100;
          font-size: 2vh;
        }
      }
    }

    @media (orientation: portrait) {
      section.image {
        p.image_caption {
          font-weight: 200;
        }
      }
    }

    section.image {
      img {
        max-width: 100vw;
        width: 100%;
      }
      p.image_caption {
        padding: 0;
        text-align: center;
      }
    }
  }
}