*, html, body {
    font-family: helvetica, arial, sans-serif;
    /* font-size: 22px; */
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}
.container {
  height: 100vh;
  padding: 2rem 1rem 4rem 1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

#phrase-container {
  z-index: -1;
  position: absolute;
  left: 2rem;
  top: 2rem;
}

#svg-container {
  flex-grow: 1;
  width: 100%;
}
#svg-container > svg {
  width: 100%;
  height: 100%;
}

#input-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;  
}

#input-container * {
}

#word-input {
    flex-basis: content;
}

@media screen and (min-width: 320px) and (max-width: 425px) {
    /* #input-container {    
        width: 80%;
        margin: auto;
    } */
    *, html, body {
      font-size: 20px;
    }
    #input-container * {
      font-size: 20px;
    } 
}