body {
  background-color: black;
  color: white;
  margin: 0;

  height: 100vh;
  width: 100vw;

  font-family: Verdana, Geneva, Tahoma, sans-serif;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;

    button {
      width: 60px;
      height: 100%;
      border-radius: 0;
      border: 0;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      transition: width ease-in-out 0.2s;
    }
    button.active {
      background-color: #6667ab;
      color: white;
      width: 100px;
    }

    .left {
      margin: 0 auto 0 0;
    }

    .right {
      margin: 0 0 0 auto;
    }
  }

  .page {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
    width: 100%;

    .content {
      width: 100%;
      background-color: #111;
      flex-grow: 1;
    }

    .content.message-list {
      overflow-y: auto;
      overflow-x: hidden;
      width: 100%;

      .message:nth-child(even) {
        background-color: #1a1a1a;
      }
      .message {
        display: grid;
        box-sizing: border-box;
        grid-template-columns: 80px 5fr;
        grid-gap: 0.75rem;
        padding: 0.8rem 0.15rem;
        width: 100%;
        overflow-y: auto;
        .pfp {
          height: 30px;

          width: auto;
          display: flex;

          img {
            height: 100%;
            width: auto;
            margin: auto;
            border-radius: 50px;
            background-color: black;
          }
        }

        .name {
          font-size: 1.15rem;
          color: #dbdbdb;
        }

        .body {
          width: 100%;
          word-wrap: anywhere;
          overflow-x: hidden;

          .image-container {
            width: 100%;
            max-width: 400px;
            max-height: 300px;

            img {
              width: auto;
              height: 100%;

              max-width: 400px;
              max-height: 300px;
            }
          }
        }

        .timestamp {
          text-align: center;
          color: #dbdbdb;
        }
      }
    }

    .content.settings {
      .setting {
        width: 100%;
        display: flex;
        padding: 0.5rem 0.25rem;
        box-sizing: border-box;
      }
      .setting-toggle {
        input {
          margin: auto 0 auto auto;
          width: 20px;
          height: 20px;
        }
      }
      .setting:nth-child(even) {
        background-color: #1a1a1a;
      }
    }
  }
  .footer {
    width: 100%;
    height: 40px;
  }

  .footer.text-entry {
    display: Flex;
    flex-direction: row;
    input {
      flex-grow: 1;
      margin-right: 0;
      border: 0;
      font-size: 1.3rem;
      min-width: 0;
    }

    button {
      width: 75px;
      border: 0;
      border-radius: 0;
    }
  }

  .hidden {
    display: none !important;
  }
}

button {
  width: 100px;
  height: 100%;
  background-color: white;
  border-radius: 2px;
  border: 0;
  cursor: pointer;
  outline: none;

  span {
    width: 100%;
    height: 100%;
    img {
      max-height: 70%;
      width: auto;
      user-select: none;
      -webkit-user-drag: none;
    }
  }
}
button:focus {
  filter: brightness(50%);
}

input {
  outline: none;
}
input:focus {
  background-color: lightgray;
}

@media screen and (max-width: 400px) {
  body {
    .header {
      height: 30px;

      button {
        width: 50px;
      }
    }

    .page {
      .content.message-list {
        .message {
          grid-template-columns: 80px 5fr;
          grid-gap: 0.75rem;
          padding: 0.8rem 0.15rem;

          .pfp {
            height: 30px;
          }
        }
      }
    }
  }
}