@font-face {
    font-family: 'inconsolata';
    src: url('Inconsolata-Bold.ttf');
}
/* .output {
    text-align: center;
   
    
} */
.answer {
    text-align: center;
    font-size: 60px;
    display: block;
    font-family: 'inconsolata';
    letter-spacing: 54;
    padding-left: 54;
}
.title {
    text-align: center;
    font-size: 100;
    margin: 0%;
}
#input-container {
    display: flex;
    justify-content: center;
}
#hidden {
    visibility: hidden;
}
.button {
    width: 100;
}
.button:hover {
    cursor: pointer;
}
#input-box {
    width: 480px;
    height: 100px;
    font-size: 60px;
    display: block;
    font-family: 'inconsolata';
    letter-spacing: 54;
    padding-left: 54;
    border: none;
    outline: none;
    pointer-events:none;
    caret-color: transparent; 
}

#submit {
    /* make a round border */
    border-style: solid;
    border-color: rgb(150, 150, 150);
    border-radius: 10px;
    background-color: rgb(216, 216, 216);
}

#submit:hover {
    background-color: rgb(233, 233, 233);
}

#info {
    position: absolute;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    vertical-align: middle;
    width: 150;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 5px;
    background-color: black;
}