html {
  margin: 0 auto;
}
body {
  -webkit-touch-callout: none;
  background-color: #020202;
}
img {
  max-width: 100%;
  margin-bottom: 2rem;
}
button {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#app {
  height: 100vh;
  width: 100vw;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  font-family: "Merriweather Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  background-image: url("../img/76b8149b6da30f48d4491cd8d3c29aa4ad74c6c6.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: white;
  padding: 2rem 3rem;
  box-sizing: border-box;

  #header {
    text-align: center;
    width: 100%;
    height: 6vh;
    margin-bottom: 5vh;
    position: relative;
    z-index: 1;

    #hr-logo {
      width: auto;
      height: 100%;
    }
  }
  #output {
    height: 73vh;
    overflow: auto;
    position: relative;
    z-index: 0;
    font-size: 1.4rem;
    line-height: 1.5;

    h1 {
      font-size: 2rem;
      margin-bottom: 3rem;
    }
  }
  #overlay {
    backdrop-filter: unset;
    transition: backdrop-filter 0.5s ease;
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;

    &.active {
      left: 0;
      backdrop-filter: blur(3px);
    }
  }
  #footer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7vh;
    background: linear-gradient(#313131, #010101);
    z-index: 1;

    button {
      background-color: transparent;
      border: none;
      width: 4vh;
      height: 4vh;
      background-repeat: no-repeat;
      background-size: cover;
    }

    #home-button {
      background-image: url("../img/home-button.svg");
    }

    #see-button {
      background-image: url("../img/see-button.svg");
    }

    #text-button {
      background-image: url("../img/text-button.svg");
    }

    #question-button {
      background-image: url("../img/question-button.svg");
    }

    #record-button {
      position: relative;
      background-image: url("../img/record-button-default.svg");
      height: 9vh;
      width: 9vh;
      margin-bottom: 4vh;
    }
  }

  #footer-edge {
    position: absolute;
    content: "";
    background-color: #313131;
    width: 11vh;
    height: 11vh;
    bottom: 0vh;
    border-radius: 50%;
    z-index: 0;
    left: calc(50% - 5.5vh);
  }
}