html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


html {
    height: 100%;
}

#container {
    width:100%;
    margin-top:20%;
display: inline-flex;
    justify-content: space-evenly;
}

@media (max-width: 780px) {
#container{
    margin-top: 0;
    display: block;
}

    #replay{
        color: black !important;
        border: 2px double black !important;
        font-size: 2em !important;
        background: white;
        text-align: center;
    }

    #board{
        justify-content: center;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;

    }
    .name-display{
        display: none;
    }
    img{
        display: none;
    }

    #ia-score{
        background-image: url("images/botbg.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size :cover;

    }
    #player-score{
        background-image: url("images/boybg.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size :cover;

    }
h1{
    position: static !important;
    transform: translate(0)!important;
    font-size: 3em !important;
    text-align: center;
    margin-bottom: 15px;
}

    #announce{
        margin-top: 0 !important;
        padding-top: 0;
        position: absolute;
        top:0;
        font-size: 3em!important;
        width: 100%;
        height: 100%!important;
        z-index: 2;


    }
    #text {
        margin-top: 35%;
    }
    #replay{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%);
        z-index: 1;
    }
}

#container p{
    font-family: 'Zen Loop', cursive;
    font-size: 2em;
    color:white;
}

h1{
    font-family: 'Zen Tokyo Zoo', cursive;
    margin-top: 5%;
    color : white;
    font-size: 4em;
    position : absolute;
    left:50%;

    transform: translate(-50%);
}

body {
    height:100%;

    background-color: #330000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23D18'/%3E%3Cstop offset='1' stop-color='%23330000'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23FA3' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FA3' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;}

#board {


    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;

}

.box {
    width: 95px;
    height:95px;
    background-color: red;
    padding-bottom : 5px;
    background-clip: content-box;
    border-radius: 15px;



}

.no-ownership {
    background-color: lightgrey;
    -webkit-animation: antirotate 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940)reverse both;
    animation: antirotate 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940)reverse both;

}


.no-ownership:hover {
    background-color: grey;

}

#replay{
    position: absolute;
    left:50%;
    transform: translate(-50%);
    margin-top: 20px;
    padding: 5px;
    font-family: 'Zen Tokyo Zoo', cursive;
    color: white;
    font-size: 2em;
    border: 2px white double;
    display: none;
}

#soundToggle{
    height: 30px;
    background-color: lightgrey;
    background-position: center;
    position: absolute;
    border-radius: 100px;
    background-image: url("images/music.svg");
    background-repeat: no-repeat;
    right:10%;
    width:30px;
    top:20px;

}

.toggled-off:before{

    position: absolute;
    content: '';
    background: red;
    display: block;
    width: 100%;
    height: 5px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;


}

#replay:hover{
    -webkit-box-shadow: 5px 5px 15px 5px #fff;
    box-shadow: 5px 5px 15px 5px #fff;
}

.player {
    -webkit-animation: rotate 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: rotate 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    background-color: lightcoral;
    background-image: url("images/boy.svg");
    background-repeat: no-repeat;
    background-position: center;
}

.ia {
    -webkit-animation: rotate 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: rotate 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    background-color: cornsilk;
    background-image: url("images/bot.svg");
    background-repeat: no-repeat;
    background-position: center;
}

.score {
    text-align: center;
    font-size: 7em;
    color:white;
    margin-top: 10px;
font-family: 'Zen Tokyo Zoo', cursive;
}

.frosted {
    backdrop-filter: blur( 0px );
    -webkit-backdrop-filter: blur( 0px );

    padding : 10px;
    border : 2px white double;
}

.frosted img {
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 10px;
    transform: rotate(90deg);
}

.player-bg {
    background: rgba(240,128,128,0.2);


}

.ia-bg {
    background: rgba( 255, 248, 220,0.2);


}



.ia-line {
    background: red;
    background-image: url("images/close.svg");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}

.player-line {
    background : lightgreen;
    background-image: url("images/check.svg");
    background-repeat: no-repeat;
    background-position: center;
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}

#announce{
    font-size: 5em;
    width: 100%;
    padding: 15px;
    margin-top: 10%;
    position: absolute;
    display: none;
    justify-content: center;
    background: rgba( 255, 255, 255, 0.05 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 7.5px );
    -webkit-backdrop-filter: blur( 7.5px );

    border-top: 1px solid rgba( 255, 255, 255, 0.18 );
    border-bottom: 1px solid rgba( 255, 255, 255, 0.18 );
z-index: 1;
    font-family: 'Zen Tokyo Zoo', cursive;


}

.draw {
    color:orange;
}

.win {
    color:lightgreen;
}

.lose {
    color:red;
}

.focus-in-contract {
    -webkit-animation: focus-in-contract 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: focus-in-contract 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;

}

@-webkit-keyframes focus-in-contract {
    0% {
        letter-spacing: 1em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
@keyframes focus-in-contract {
    0% {
        letter-spacing: 1em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }
    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}



@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}
@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}



@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}
@keyframes antirotate{
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}


/* FIREWORKS CSS */



.pyro > .before, .pyro > .after {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; }

.pyro > .after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s; }

@-webkit-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-moz-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-o-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-ms-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-webkit-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; } }
@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; } }
@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; } }
@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; } }
@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; } }
@-webkit-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; } }
@-moz-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; } }
@-o-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; } }
@-ms-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; } }
@keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; } }