body{
    background-color: rgb(56, 55, 55);
    color: white;
    font-family: Verdana, Arial, Calibri;
    text-align: center;
    font-size: 2em;
}

#poutsaki{
    display: none;
    transition: 1s;
}

#button{
    background-color: grey;
}

#cm{
    display: none;
}

#plus{
    display: none;
}
#minus{
    display: none;
}
#reset{
    display: none;
}

button{
    border-radius: 20px;
    border: 0px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: orange;
    color: white;
    font-weight: bold;
    font-size: x-large;
}

.buttons{
    width: 75px;
}

#button:hover{
    cursor: pointer;
    animation-name: buttonhover2;
    animation-duration: 0.12s;
    animation-fill-mode: forwards;
}

.buttons:hover{
    cursor: pointer;
    animation-name: buttonhover2;
    animation-duration: 0.12s;
    animation-fill-mode: forwards;
}

#button.out{
    animation-name: buttonhover;
    animation-duration: 0.2s;
    animation-fill-mode: backwards;
}


@keyframes buttonhover {
    0%{
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: x-large;
        box-shadow: 0px 0px 0px;
    }
    100%{
        padding-left: 21px;
        padding-right: 21px;
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: xx-large;
    }
}

@keyframes buttonhover2 {
    0%{
        background-color: orange;
    }
    100%{
        background-color: orangered;
    }
}