app.scss

@font-face {
  font-family: "Lora";
  font-weight: 400;
  font-style: normal;
	src: url("./fonts/Lora/Lora-Regular.ttf") format("ttf");
}
@font-face {
	font-family: "Lora";
  font-weight: 400;
  font-style: italic;
	src: url("./fonts/Lora/Lora-RegularItalic.ttf") format("ttf");
}
@font-face {
	font-family: "Lora";
  font-weight: 700;
  font-style: normal;
	src: url("./fonts/Lora/Lora-Bold.ttf") format("ttf");
}
@font-face {
	font-family: "Lora";
  font-weight: 700;
  font-style: italic;
	src: url("./fonts/Lora/Lora-BoldItalic.ttf") format("ttf");
}
@font-face {
	font-family: "Anonymous_Pro";
  font-weight: 400;
  font-style: normal;
	src: url("./fonts/Anonymous_Pro/AnonymousPro-Regular.ttf") format("ttf");
}
@font-face {
	font-family: "Anonymous_Pro";
  font-weight: 700;
  font-style: normal;
	src: url("./fonts/Anonymous_Pro/AnonymousPro-Bold.ttf") format("ttf");
}

$small-screen: 1024px;

$mono-family: "Anonymous_Pro", monospace;
$sans-serif-family: "Lora", sans-serif;

$bg-dark:#333;
$bg-light: #555;
$primary-color: #c7c3c4;
$primary-color-light: #E7E3E4;
$highlight: #98ecfb;
$light-fg: #25cae6;
$med-fg: #76ee27;
$warm-fg: #ec6f2b;
$strong-fg: #eb3263;

$char1:  #FF7F50;
$char2:  #E0FFFF;
$char3:  #DDA0DD;
$char4:  #66CDAA;
$char5:  #6495ED;
$char6:  #00FFFF;
$char7:  #FFEFD5;
$char8:  #BC8F8F;
$char9:  #FFA07A;
$char10: #FFc0CB;

h1, h2, h3, h4, h5 {
  font-family: "Anonymous_Pro", monospace;
  color: $light-fg;
}

body {
  font-family: "Lora", sans-serif;
  background-color: $bg-dark;
  color: $primary-color;
}

.ok {
  color: $med-fg;
}
.warn {
  color: $strong-fg;
}
.err {
  color: $strong-fg;
}

@mixin focus-border {
    &:focus {
      border-color: $highlight;
    }
}

@mixin btn($color, $bg-color) {
    color: $color;
    background-color: $bg-color;
    border: 2px darken($bg-color, 5%) solid;
    &[disabled] {
      color: $primary-color-light;
      border-color: darken($bg-light, 5%);
      background-color: $bg-light;
    }
    @include focus-border();
}

.btn {
  font-size: 100%;
  font-family: $mono-family;
  border: 0;
  padding: 0.2em;

  &.scary {
    @include btn($bg-dark, $strong-fg)
  }
  &.friendly {
    @include btn($bg-dark, $med-fg)
  }

  &.primary {
    @include btn($bg-dark, $light-fg)
  }
}

input {
  background-color: $bg-light;
  color: $primary-color-light;
  font-size: 1em;
  border: 2px $primary-color solid;
  padding: 0.2em;
  margin: 0.1em 0;
  box-sizing: border-box;
  @include focus-border();
}

a {
  color: $light-fg;
  &:hover {
    color: $highlight;
  }
  &:visited {
    color: $light-fg;
  }
}

.lobby {
  display: flex;
  flex-direction: row;
  @media screen and (max-width: $small-screen) {
    flex-wrap: wrap;
  } 

  .lobby-games {
    margin-bottom: 1em;
    @media screen and (min-width: $small-screen) {
      flex-grow: 2;
    }
    @media screen and (max-width: $small-screen) {
      width: 100%;
    }
  }
  .chatbox {
    @media screen and (max-width: $small-screen) {
      height: 10em;
    }
  }
  .chatbox-container {
    @media screen and (max-width: $small-screen) {
      width: 100%;
    }
  }
}


.logged-in {
  position: sticky;
  top: 0;
  display: flex;
  margin-top: -10px;
  margin-left: -10px;
  margin-right: -10px;
  background: $bg-light;
  padding: 0.4em;

  .logged-in-left {
    flex-grow: 2;
    margin-top: 0.5em;
  }
  .logged-in-right {
    text-align: right;
    margin-top: 0.1em;
  }
}

.login-alternative {
  font-size: 0.9em;
  font-style: italic;
}

.login-box {
  width: 25em;
  margin: auto;
  padding: 1em;
  input {
    width: 100%;
  }
  button {
    margin: 1em 0;
  }
}

.chatbox-container {
  width: 40em;

  .chatbox {
    border: 1px $primary-color-light solid;
    height: 20em;
    overflow-y: scroll;
    padding: 0.5em;
    background-color: $bg-light;
    p {
      margin: 0.2em;
      font-family: $mono-family;
    }
    .chat-event {
      font-style: italic;
      color: $med-fg;
    }
  }

  form {
    width: 100%;
    ul {
      list-style: none;
      margin-top: 0.5em;
      padding-inline-start: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      li {
        &.chat-message {
          flex-grow: 5; 
        }
        &.chat-warnings {
          width: 100%;
        }
        .chat-message-input {
          width: 100%;
        }
      }
    }
  }
}

.game-page {
  display: flex;
  flex-direction: row;
  @media screen and (max-width: $small-screen) {
    flex-wrap: wrap;
  } 
  .game-state {
    @media screen and (min-width: $small-screen) {
      flex-grow: 2;
    }
    @media screen and (max-width: $small-screen) {
      width: 100%;
    }
  }
  .chatbox {
    @media screen and (max-width: $small-screen) {
      height: 10em;
    }
  }
  .chatbox-container {
    @media screen and (max-width: $small-screen) {
      width: 100%;
    }
  }
}