*{
    padding: 0;
    margin:0;
    box-sizing: border-box;
    font-family:"Roboto Mono",monospace;
}

body{
    background-color: #f4c531;
}
.container{
    background-color: white;
    width:450px;
    height: 1200px;
    padding:15px;
    margin:10px auto;
    border-radius: 15px;
}
.container-v1-short{
    background-color: white;
    width:450px;
    height: 475px;
    padding:15px;
    margin:10px auto;
    border-radius: 15px;
}
.container-v2{
    background-color: white;
    width:450px;
    height: 775px;
    padding:15px;
    margin:10px auto;
    border-radius: 15px;
}
.container-v2-short{
    background-color: white;
    width:450px;
    height: 475px;
    padding:15px;
    margin:10px auto;
    border-radius: 15px;
}


h2{
    text-align: center;
    font-weight: bold;
    margin-bottom: 1.5em;
}

.input-wraper{
    margin: 1em auto;
    font-size:1.1em;
    font-weight: bold;
    width: fit-content;
}

.btn-wrper{
    margin-bottom: 1em;
    font:1.1em;
    font-weight: bold;
    text-align: center;
}
.btn{
    padding:1em;
    font-size:1.5em;
    width:80%;
    background-color: #f4c531;
    font-weight: bolder;
    border-radius: 1em;
}
label{
    font-size: 1.5em;
    /* width:5em; */
}
input{
    /* padding:1em; */
    font-size:1.5em;
    width:5em;
    text-align: center;
    /* margin-right:1em; */
}

#error-msg{
    text-align: center;
}
#answer-msg{
    text-align: center;
    color:#0057ff;
}

@media screen and (max-width: 600px) {
    .container {
      width:325px;
      font-size: 13px;
    }
    .container-v1-short{
        width:325px;
        height:400px;
        font-size: 13px;
      }
  }