@font-face {
  font-family: "Tamanegi Kaisho Geki";
  src: url("../fonts/玉ねぎ楷書激無料版v7改.ttf");
  font-display: block;
  unicode-range: U+0-2642, U+266A-51CD, U+51DD-FFEF
}

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr;
}

main {
  contain: inline-size;

  &::before {
    content: "";
    position: fixed;
    top: var(--header-height);
    width: 100vw;
    height: calc(100vh - var(--header-height));
    background:
      linear-gradient(rgb(205 205 205 / 0.5), rgb(255 255 255 / 0.5)),
      url("../images/BAE1M.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

img.emoji {
  display: inline;
  height: 1.2em;
  width: 1.2em;
  margin: 0 .075em;
  vertical-align: -20%;
}

.msg-container {
  --message-width: 350px;
  padding: 20px;
  margin: 0 auto;
}

#msg-load-spinner {
  display: flex;
  justify-content: center;
  padding-top: 4rem;
}

.msg {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: 20px auto;
  scroll-margin-top: var(--header-height);
  margin-bottom: 3rem;
  width: var(--message-width);
  font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", "Noto Sans Canadian Aboriginal", sans-serif;

  .sender-name {
    position: relative;
    top: 5px;
    margin-right: 2rem;
    grid-area: 1 / 1 / auto / span 2;
    font-family: "Noto Sans", "Noto Sans JP", "Noto Sans KR", sans-serif;
    transform: rotate(356.5deg);

    >div {
      position: relative;
      display: inline-block;
      padding: 0.4rem 1.2rem;
      background-color: #fb46ce;
      border: 5px solid #00144b;
      box-shadow: 2px 1px black;

      &::before {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        border-width: 1px 2px;
        border-style: solid;
        border-color: #000ebf #fa144b #fa144b #000ebf;
      }

      >a {
        position: relative;
        color: inherit;
        text-decoration: none;

        &::before {
          content: "#";
          display: inline-block;
          visibility: hidden;
          font-size: 0.9em;
          margin-left: -.8em;
          text-decoration: none;
          width: 0.8em;
        }
      }

      >a:hover {
        text-decoration: underline;

        &::before {
          visibility: visible;
        }
      }
    }
  }

  .sender-title {
    position: relative;
    left: -8px;
    top: 10px;
    margin-right: 2rem;
    grid-area: 2 / 2;
    font-family: "Edo SZ", "Tamanegi Kaisho Geki", "Noto Serif JP", "Noto Serif KR", serif;

    >div {
      position: relative;
      display: inline-block;
      padding: 0.4rem 0.8rem;
      background-color: #11ddee;
      border: 4px solid #00144b;
      box-shadow: 3px 1px black;

      &::before {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        border-width: 1px 2px;
        border-style: solid;
        border-color: #11dd4b #0014ee #0014ee #11dd4b;
      }

      >span {
        position: relative;
      }
    }
  }

  .msg-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-area: 3 / 2;
    padding: 1rem;
    border: 5px solid rgb(0 0 0 / 0);
    z-index: 0;

    p {
      white-space: break-spaces;
    }
  }

  .msg-img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
  }

  .video.placeholder>img {
    width: 100%;
    height: auto;
  }

  msg-content-bg {
    position: relative;
    grid-area: 2 / 2 / span 2;
    background-color: white;
    border: 5px solid #00144b;
    box-shadow: 2px 1px black;

    &::before {
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      border-width: 1px;
      border-style: solid;
      border-color: #ff144b #00ffff #00ffff #ff144b;
    }
  }

  msg-decals {
    grid-area: 3 / 2;
    opacity: 0.2;

    &.decal-1 {
      background: no-repeat top 20px left 10px / 50px url("../images/message-decal-cross.png"), no-repeat bottom right / 100px url("../images/message-decal-circle.png");
      margin: 0 -20px -20px 0;
    }

    &.decal-2 {
      background: no-repeat top right / 100px url("../images/message-decal-circle.png");
      margin: -20px -10px 0 0;
    }

    &.decal-3 {
      background: no-repeat bottom 18px right 15px / 50px url("../images/message-decal-cross.png");
    }

    &.decal-4 {
      background: no-repeat top 15px right 20px / 50px url("../images/message-decal-cross.png"), no-repeat bottom left / 100px url("../images/message-decal-circle.png");
      margin: 0 0 -20px -25px;
    }

    &.decal-10 {
      background: no-repeat bottom 5px right 5px / 100px url("../images/headpat.png");
    }
  }
}