/* stylesheet for corru/meqou stuff */

@font-face {
  font-family: SpaceMono;
  src: url(/fonts/SpaceMono-Regular.ttf);
  src: url(/fonts/SpaceMono-Regular.woff) format('woff');
}

@font-face {
  font-family: LibreBarcode;
  src: url(/fonts/LibreBarcode128Text-Regular.woff) format('woff');
}

@keyframes corru-proceed {
  from {
    opacity: 0%;
    transform: translateY(-10px);
  }
  40% {
    opacity: 100%;
  }
  60% {
    opacity: 100%;
  }
  to {
    opacity: 0%;
    transform: translateY(10px);
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(-100vw);
  }
  to {
    transform: translateX(0vw);
  }
}

body {
  font-family: SpaceMono;
}

h1 {
  font-family: LibreBarcode;
  margin: 0;
  font-size: 72px;
}

  h1::before {
    content: "!!__";
  }

  h1::after {
    content: "__!!";
  }

a {
  background-color: black;
  padding: 0 4px;
  border-radius: 4px;
}

a:link {
  color: magenta;
}

a:visited {
  color: cyan;
}

a:hover {
  text-decoration: underline dashed black;
}

/*.part {
  animation: expand-from-top 1.5s ease-in-out;
}*/

.corru {
  display: block;
  border: none;
  font-family: SpaceMono;
  background-color: black;
  padding: 9px;
  max-width: 1080px;
  margin: 0 auto;
}

  .corru > p {
    margin: 9px 6px;
    padding: 9px 6px;
    line-height: 20px;
    box-sizing: border-box;
    display: block;
    text-align: center;
    background-color: white;
    color: black;
    text-transform: uppercase;
    animation: slide-in-left 0.25s ease-out;
  }

  .corru .talk {
    border: 1px solid currentColor;
    display: flex;
    flex-direction: row;
    margin: 9px 6px;
  }
  /* since dialogue boxes are gonna just be images and a div for the content, we can just do this */

    .corru .talk img {
      width: 100px;
      height: 100px;
      aspect-ratio: 1;
      border: 1px solid currentColor;
      border-radius: 50%;
      margin: 5px;
    }

    .corru .talk div {
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: left;
    }

      .corru .talk div h1, p {
        padding-left: 10px;
      }

      .corru .talk div h1 {
        font-family: LibreBarcode;
        text-transform: uppercase;
        font-weight: 300;
        font-size: 48px;
        display: block;
        text-align: left;
        border-bottom: 1px solid;
        margin: 5px;
      }

      .corru .talk div p {
        margin: 5px;
        padding-right: 10px;
        padding-bottom: 10px;
      }

    .corru .talk.init {
      color: cyan;
    }

    .corru .talk.meqou {
      color: magenta;
    }

      .corru .talk.meqou img {
        background-color: white;
        object-fit: none;
      }

.corru .proceed {
  color: white;
  background-color: black;
  animation: corru-proceed 1s ease-in-out infinite;
}