.front-bar
{
    height: 66%;
    background-color: aqua;
    text-align: center;
    border: 1px solid yellow;
    border-radius: 4px;
    position: absolute;
    padding-top: 1px;
    left: 0;
    right:0;
    font-size: 1.2em;
}
#heading
{
font-family: monospace;
color: blue;
margin: 0;
}
#container
{
    position: absolute;
    top:9%;
    left: 25%;
    width: 45%;
    height: 55%;
    border: 1px solid red;
    background-color: whitesmoke;
    overflow: auto;
    border-radius: 4px;
    align-content: center;
}
span
{
    font-family: monospace;
    font-size: 16px;
    padding-left: 5px;
    padding-top: 3px;
}
#container1
{
    position: absolute;
    top:65%;
    left:25%;
    width: 45%;
    height: 5%;
    border: 1px solid red;
    background-color: black;
    border-radius: 2px;
    color: white;
}
input
{
    font-family: monospace;
    font-size: 16px;
    
}
#result
{
    height: 25%;
    width: 14%;
    border-radius: 4px;
    background-color: black;
    position: absolute;
    top:17%;
    left:71%;
    padding-left: 4px;
    font-family: monospace;
    color: white;
    font-size: 1.2em;
}

#countdown
{
    height: 7%;
    width: 14%;
    border-radius: 4px;
    background-color: #f3f3f3;
    position: absolute;
    top:9%;
    left:71%;
    border: 2px solid blue;
    font-family: monospace;
    font-size: 15px;
}

.restart
{
    height:5%;
    width:8%;
    left:44%
    background-color: darkgray;
    color: blue;
    border-radius: 4px;
    border-color: black;
        
}
.right
{
    color:blue;
}
.wrong
{
    color:red;
}