body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
  margin: 0;
  background-image: linear-gradient(to right, rgba(0,0,0, 0.7) 0 100%), url("../assets/common/bg_main.jpg");
  background-size: cover;
    font-family: "Oswald", sans-serif;
    font-size: 3vmin;
    color: white;
}
::backdrop {
  background-image: linear-gradient(to right, rgba(0,0,0, 0.7) 0 100%), url("../assets/common/bg_main.jpg");
  background-size: cover;
}
main {
  display: block;
  margin: auto;
  text-align: center;
  align-content: center;
  height: auto;
  word-wrap: break-word;
  white-space: normal;
  width: 100%;
  max-width: 1100px;
  padding: 20px;
  padding-top: calc(64px + 20px);
  column-count: 2;
}
.site-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    padding: 8px 16px;
    align-items: center;
    justify-content: center;
    background: #33604c;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.logo-wrap {
    display: flex;
    align-items: center;
    height: 100%;
}
.logo {
    max-height: 72px;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
}
@media (max-width: 480px) {
  .site-header { height: 56px; padding: 6px 12px; }
  .logo { max-height: 40px; }
}
.container-item {
    display: inline-block;
    width: 100%;
    padding: 1vmin;
}
.intro {
    max-width: 25vw;
    max-height: 25vh;
    height: auto;
    width: auto;
    object-fit: contain;
}
#caption-title {
    font-size: 5vmin;
}
button {
    background: #33604c;
    font-family: "Oswald", sans-serif;
    font-size: xx-large;
    color: white;
}