/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 10 versions
*/

:root {
    --animation-time: 0.25s;
    --primary-color: #ffccff;
    --secondary-color: #ffbbff;
    --additional-color: #ffaaff;
    --background-color: #ffddff;
    --writing-color: #ffffff;
    }
    
@keyframes abi {
    from {
        transform: scale(0);
        -webkit-transform: scale(0);
        }
    to {
        transform: scale(1);
        -webkit-transform: scale(1);
        }
    }
@-webkit-keyframes abi {
    from {
        transform: scale(0);
        -webkit-transform: scale(0);
        }
    to {
        transform: scale(1);
        -webkit-transform: scale(1);
        }
    }
@keyframes abo {
    from {
        transform: scale(1);
        -webkit-transform: scale(1);
        }
    to {
        transform: scale(0);
        -webkit-transform: scale(0);
        }
    }
@-webkit-keyframes abo {
    from {
        transform: scale(1);
        -webkit-transform: scale(1);
        }
    to {
        transform: scale(0);
        -webkit-transform: scale(0);
        }
    }
@keyframes aoi {
    from { background-color: rgba(0,0,0,0); }
    to { background-color: rgba(0,0,0,0.5); }
}
@-webkit-keyframes aoi {
    from { background-color: rgba(0,0,0,0); }
    to { background-color: rgba(0,0,0,0.5); }
    }
@keyframes aoo {
    from { background-color: rgba(0,0,0,0.5); }
    to { background-color: rgba(0,0,0,0); }
}
@-webkit-keyframes aoo {
    from { background-color: rgba(0,0,0,0.5); }
    to { background-color: rgba(0,0,0,0); }
    }

#check-button,
#end-button,
#info-box-button-left,
#info-box-button-right {
    border: 4px solid var(--secondary-color);
    border-radius: 10px;
    color: var(--writing-color);
    background-color: var(--primary-color);
    text-align: center;
    }
#check-button:active,
#end-button:active,
#info-box-button-left:active,
#info-box-button-right:active {
    border-color: var(--additional-color);
    color: var(--writing-color);
    background-color: var(--secondary-color);
    }
#check-button {
    height: 82px;
    width: 160px;
    font-size: 30px;
    }
#end-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 50px;
    width: 120px;
    font-size: 20px;
    }
#game-word { font-size: 24px; }
#info-box {
    position: absolute;
    top: 45%;
    left: 50%;
    translate: -50% -50%;
    transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    z-index: 2;
    height: 300px;
    width: 400px;
    border: 20px solid var(--background-color);
    border-radius: 20px;
    background-color: var(--background-color);
    text-align: center;
    vertical-align: center;
    }
#info-box-button-left,
#info-box-button-right {
    position: absolute;
    bottom: 16px;
    height: 50px;
    width: 180px;
    font-size: 20px;
    }
#info-box-button-left { left: 8px; }
#info-box-button-right { right: 8px; }
#letter {
    height: 72px;
    width: 72px;
    border-style: none;
    border-radius: 10px;
    background-color: var(--primary-color);
    font-size: 30px;
    font-weight: bolder;
    font-variant: small-caps;
    text-align: center;
    text-transform: uppercase;
    transition: background-color 0.4s;
    -o-transition: background-color 0.4s;
    -webkit-transition: background-color 0.4s;
    &:is(:focus, :hover) { background-color: var(--secondary-color); }
    }
#letter-space { margin-top: 40px; }
#main-contener {
    position: absolute;
    top: 40%;
    left: 50%;
    translate: -50% -50%;
    text-align: center;
    }
#overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0);
    }
#word-space {
    margin-top: 40px;
    text-align: center;
    }
#word-space>span {
    font-size: 40px;
    font-variant: small-caps;
    letter-spacing: 5px;
    }
#win-message,
#lose-message,
#end-message { font-size: 40px; }
#win-message>span {
    &:nth-of-type(3n+0) { color: #0000ff; }
    &:nth-of-type(3n+1) { color: #ff0000; }
    &:nth-of-type(3n+2) { color: #00ff00; }
    }
#lose-message, #end-message { color: #808080; }
.hidden { display: none; }
.anima-box-in {
    animation: abi var(--animation-time) ease-out 0s 1 normal forwards; 
    -ms-animation: abi var(--animation-time) ease-out 0s 1 normal forwards;
    -webkit-animation: abi var(--animation-time) ease-out 0s 1 normal forwards;
    }
.anima-box-out {
    animation: abo var(--animation-time) ease-in 0s 1 normal forwards; 
    -ms-animation: abo var(--animation-time) ease-in 0s 1 normal forwards;
    -webkit-animation: abo var(--animation-time) ease-in 0s 1 normal forwards;
    }
.anima-overlay-in {
    animation: aoi var(--animation-time) linear 0s 1 normal forwards; 
    -ms-animation: aoi var(--animation-time) linear 0s 1 normal forwards;
    -webkit-animation: aoi var(--animation-time) linear 0s 1 normal forwards;
    }
.anima-overlay-out {
    animation: aoo var(--animation-time) linear 0s 1 normal forwards; 
    -ms-animation: aoo var(--animation-time) linear 0s 1 normal forwards;
    -webkit-animation: aoo var(--animation-time) linear 0s 1 normal forwards;
    }
* {
    z-index: 0;
    font-family: 'Comic Sans MS', Tahoma, Verdana, sans-serif;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    }
body { background-color: var(--background-color); }
img {
    display: block;
    height: 384px;
    width: 384px;
    }
p { text-align: center; }

@media screen and (max-width: 800px) {
    #check-button {
        height: 41px;
        width: 80px;
        font-size: 15px;
        }
    #end-button {
        height: 40px;
        width: 90px;
        font-size: 15px;
        }    
    #game-word { font-size: 16px; }
    #info-box {
        height: 225px;
        width: 260px;
        }
    #info-box-button-left,
    #info-box-button-right {
        position: absolute;
        bottom: 8px;
        height: 40px;
        width: 140px;
        font-size: 15px;
        }
    #info-box-button-left { left: -12px; }
    #info-box-button-right { right: -12px; }
    #letter {
        height: 36px;
        width: 36px;
        border-radius: 10px;
        font-size: 15px;
        }
    #letter-space,
    #word-space { margin-top: 30px; }
    #win-message,
    #lose-message,
    #end-message { font-size: 25px; }
    #word-space>span {
        font-size: 20px;
        font-variant: small-caps;
        letter-spacing: 2px;
        }    
    img {
        display: block;
        height: 288px;
        width: 288px;
        }
    }