body{
 height: 90vh;

}
.navbar{
    width: 100%;
    height: 20vh;
}

.main{
    width: 330px;
    height: 45px;
    margin: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: flex;
}

.placeholder{
    width: 170px;
    height: 100%;
    line-height: 45px;
    text-align: center;
    font-weight: bold;
    font-size: 30px;

}

#output{
 width: 160px;
 height: 100%;
 line-height: 45px;
 text-align: center;
 font-weight: bold;
 font-size: 30px;
}

#key-code-display{
    width: 100px;
    height: 45px;
    display: flex;
    margin: auto;
    margin-top: 100px;
    color: blueviolet;
    font-weight: bold;
    font-size: 30px;
    align-items: center;
    box-shadow: 0 4px 8px 0 rgba(226, 27, 27, 0.2), 0 6px 20px 0 rgba(29, 212, 29, 0.19);
    justify-content: center;
}