* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  font-weight: 300;
  color: white;
  transition: all 0.3s ease-in-out;
  a {
    text-decoration: none;
  }
}

body {
  background: #222222;
  min-height: 100vh;
  div.greeter {
    width: 800px;
    height: 550px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    outline: 1px solid white;
    div.header {
      text-align: center;
      padding: 20px;
      > * {
        margin: 15px;
      }
    }
    div.settings {
      width: 100%;
      > div {
        display: flex;
        justify-content: space-between;
        margin: 15px;
        border-bottom: 1px solid white;
        &.clef,
        &.chord_types {
          > div div {
            padding: 5px;
            cursor: pointer;
            &.active {
              background: green;
            }
          }
        }
        * {
          margin: 5px;
          display: flex;
        }
        select {
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }
    div.start {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        padding: 10px;
        border: 2px solid white;
        background: rgba(255, 255, 255, 0.1);
        font-size: 1.2em;
        cursor: pointer;
      }
    }
    div.errors {
      width: 100%;
      height: 30px;
      text-align: center;
      margin: 10px;
      p#error_text {
        color: red;
      }
    }
  }
  div#game {
    display: none;
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    outline: 1px solid white;
    div.header {
      width: 100%;
      height: 130px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    div.box {
      display: flex;
      justify-content: space-evenly;
      > div {
        width: 300px;
        height: 300px;
        outline: 1px solid white;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 3px 3px white;
        &:first-child {
          background-color: rgba(255, 255, 255, 1);
        }
        &:last-child {
          display: flex;
          align-items: center;
          flex-direction: column;
          > * {
            padding: 10px;
            margin: 20px;
          }
          input[type="text"] {
            background: black;
            outline: 1px solid white;
            border: none;
          }
          button {
            padding: 10px;
            border: 2px solid white;
            background: rgba(255, 255, 255, 0.1);
            font-size: 1.2em;
            cursor: pointer;
          }
        }
      }
    }
    div.next {
      width: 100%;
      height: 80px;
      display: flex;
      padding: 20px;
      justify-content: center;
      align-items: center;
      button {
        padding: 10px;
        border: 2px solid white;
        background: rgba(255, 255, 255, 0.1);
        font-size: 1.2em;
        cursor: pointer;
      }
    }
  }
}