header {
  width: 100vw;
  min-height: 10vh;
  height: auto;
  background-color: #F7F7F7;
  opacity: 0.55;
  padding: 1rem 2rem 1rem 2rem;
  display: flex;
  flex-direction: row;
  z-index: 2;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center; }

.right-header {
  width: auto;
  height: auto;
  opacity: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto; }
  .right-header button {
    z-index: 2; }
  .right-header .subtitle {
    width: auto;
    height: 0;
    font-size: 1rem;
    margin: -40px auto;
    opacity: 0;
    padding: 1rem;
    border-radius: 20px;
    background-color: #212121;
    color: #F7F7F7;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: margin-top 0.6s ease, opacity 0.7s ease-in-out; }
  .right-header #sub1 {
    grid-column: 1; }
  .right-header #sub2 {
    grid-column: 2; }
  .right-header #sub3 {
    grid-column: 3; }

footer {
  width: 100vw;
  height: 8vh;
  background-color: #F7F7F7;
  padding: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  z-index: 2;
  opacity: 0.75;
  margin-top: -8vh; }
  footer hr {
    width: 44%;
    border: none;
    height: 1px;
    color: #212121;
    background-color: #212121; }
  footer .footer-content {
    text-align: center;
    width: 300px; }

@keyframes shake {
  0% {
    transform: translateX(0); }
  25% {
    transform: translateX(-3px); }
  50% {
    transform: translateX(3px); }
  75% {
    transform: translateX(-3px); }
  100% {
    transform: translateX(0); } }

article {
  width: 100vw;
  height: 110vh;
  background: url("/images/moon.jpg") center bottom/cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; }
  article .nick_name {
    font-size: 3em;
    color: #4A3A3A;
    text-shadow: 3px 3px #212121; }
  article .copy {
    width: 100%;
    height: 18vh;
    padding: 1rem 1rem 20vh 1rem;
    color: #4A3A3A;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; }
    article .copy .left-side, article .copy .right-side {
      width: 40%;
      height: auto;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center; }
    article .copy .arrow-container {
      width: 20%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.15s ease; }
      article .copy .arrow-container:hover {
        animation: shake 0.3s ease; }
    article .copy .left-side {
      align-items: start; }
    article .copy .right-side {
      align-items: end; }
    article .copy .arrow {
      width: 6rem;
      height: 6rem;
      background-color: #2D3530;
      clip-path: polygon(100% 30%, 50% 60%, 0 30%, 0 10%, 50% 40%, 100% 10%); }

button {
  width: 100px;
  height: 45px;
  margin: 1rem 1rem 0.5rem 1rem;
  border: none;
  border-radius: 20px; }

main {
  width: 100vw;
  display: flex;
  flex-wrap: wrap; }

@font-face {
  font-family: 'Roboto';
  src: url("/fonts/Roboto.ttf") format("truetype");
  font-weight: 300;
  font-style: normal; }

@media (max-width: 768px) {
  .poly-container {
    width: 100vw;
    display: flex;
    flex-wrap: wrap; }
  aside {
    width: 100%;
    height: auto;
    background-color: #FFC4C4;
    box-sizing: border-box; }
  .aside-left {
    clip-path: polygon(0 0, 70% 0%, 100% 15vh, 100% 85%, 70% 100%, 0 100%, 0% 70%, 0 20%);
    padding: 12vh 20vh 12vh 2rem; }
  #content {
    text-align: justify;
    line-height: 2rem;
    letter-spacing: 0.1rem; }
  .aside-right {
    clip-path: polygon(100% 0, 30% 0, 0 15vh, 0 85%, 30% 100%, 100% 100%, 100% 70%, 100% 20%); }
    .aside-right #burning_ship {
      width: 100%;
      height: 15vh;
      object-fit: cover;
      object-position: top right;
      opacity: 0.92; } }

@media (min-width: 769px) {
  .poly-container {
    width: 100vw;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: -18vh; }
  aside {
    width: 50%;
    height: 100%;
    background-color: #FFC4C4;
    box-sizing: border-box; }
  .aside-left {
    clip-path: polygon(0 0, 70% 0%, 100% 14vh, 100% 85%, 70% 100%, 0 100%, 0% 70%, 0 20%);
    padding: 12vh 2rem 12vh 2rem; }
  #content {
    text-align: justify;
    line-height: 2rem;
    letter-spacing: 0.1rem; }
  .aside-right {
    clip-path: polygon(100% 0, 30% 0, 0 14vh, 0 85%, 30% 100%, 100% 100%, 100% 70%, 100% 20%); }
    .aside-right #burning_ship {
      width: 100%;
      height: 16vh;
      object-fit: cover;
      object-position: top right;
      opacity: 0.92; } }

body {
  font-family: 'Roboto', sans-serif;
  color: #212121;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-wrap: wrap; }
  body a {
    color: #212121;
    text-decoration: underline; }
    body a:hover {
      color: wheat; }
  body p {
    font-weight: 600; }