.col {
    text-align: center !important;
    font-size: 6vh;
}

.button {
    width: 12.5vh;
    height: 12.5vh;
    border-radius: 50% !important;
    margin-top: 2vh !important;
    background-color: rgba(0, 247, 255, 0.836);
    border: solid 1vh rgba(255, 0, 0, 0.911);
    opacity: 80%;
    animation-name: r-btnzoom;
    animation-duration: 0.2s;
}

.mode-name{
    font-size: 3vh;
    color: rgb(255, 0, 64);
    text-shadow: 0.5px 0.5px 0px white, 4px 4px 0px rgba( 0, 0, 0, 0.5);
}

.mode:hover{
    cursor: pointer;
}


@keyframes btnzoom {
    from {
        font-size: 6vh;
        opacity: 80%
    }

    to {
        font-size: 7vh;
        opacity: 100%
    }
}


@keyframes r-btnzoom {
    from {
        font-size: 7vh;
        opacity: 100%
    }

    to {
        font-size: 6vh;
        opacity: 80%
    }
}


@keyframes contzoom {
    from {
        font-size: 5vh;
        opacity: 100%;
        box-shadow: 1vh 1vh 0.5vh;
        left: 0;
        top: 0;
    }

    to {
        font-size: 4.5vh;
        opacity: 90%;
        box-shadow: none;
        left: 0.5vh;
        top: 0.5vh;
    }
}


@keyframes r-contzoom {
    from {
        font-size: 4.5vh;
        opacity: 90%;
        box-shadow: none;
        left: 0.5vh;
        top: 0.5vh;
    }

    to {
        font-size: 5vh;
        opacity: 100%;
        box-shadow: 1vh 1vh 0.5vh;
        left: 0;
        top: 0;
    }
}


.button:hover {
    animation-name: btnzoom;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
}



.head {
    color: rgb(0, 255, 213);
    font-size: 3vh;
}

.foot{
    margin-top: 5vh;
    position: absolute ;
    padding: 0 !important;
    bottom: 0 !important;
}

.results {
    background-color: rgb(3, 53, 59);
    width: 50vw;
    border-bottom-right-radius: 10vw;
}


.enemy {
    margin-top: 2vw !important;
}


body {
    background-color: rgb(0, 65, 62) !important;
}


#vs {
    color: white;
    margin-top: 4vh;
}


#result{
    text-align: center;
    color: white;
    font-size: 5vh;
    margin-top: 5vh;
}


#continue{
    margin-top: 2vh !important;
    font-size: 5vh;
    opacity: 100%;
    animation-name: r-contzoom;
    animation-duration: 0.15s;
    visibility: hidden;
    box-shadow: 1vh 1vh 0.5vh;
    position: relative;
}


#continue:hover{
    animation-name: contzoom;
    animation-duration: 0.15s;
    animation-fill-mode: forwards;
}


.fa-undo{
    position: relative;
    left: 0.5em;
}


.fa-undo:hover{
cursor: pointer;
}