nav, footer {
    margin-left: -15px;
    margin-right: -15px;
}
#board {
    background-color: rgb(222, 191, 145);
}

#scoreboard {
    padding: 10px;
    background-color: rgba(240, 248, 255, 0.713);
    backdrop-filter: blur(5px);
    border: solid black 4px;
    border-radius: 10px;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    z-index: 10;
}

#controlls {
    padding: 10px;
    background-color: rgb(0, 65, 122);
    border: solid black 4px;
    border-radius: 10px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
    z-index: -10;
}

.interface {
    border: solid black 4px;
    border-radius: 10px;
    margin: 5%;
    position: sticky;
    top: 0;
}

.card {
    margin: 2.5%;
    border-width: 5px;
}

footer{
    font-size: 12pt;
    color: white;
    padding: 15px;
    border-top: solid;
    border-color: rgb(56, 56, 56);
    border-width: 2px;
    background-color: #343a40;
    width: 100vw;
}

.card:click {
    border-style: inset;
}

#aSkull:hover {
    /* background-color: blanchedalmond; */
    box-shadow: 5px 5px 5px 5px rgb(132, 240, 9);
}

#bSkull:hover {
    /* background-color: blanchedalmond; */
    box-shadow: -5px 5px 5px 5px rgb(132, 240, 9);
}

#cSkull:hover {
    /* background-color: blanchedalmond; */
    box-shadow: 5px -5px 5px 5px rgb(132, 240, 9);
}

#dSkull:hover {
    /* background-color: blanchedalmond; */
    box-shadow: -5px -5px 5px 5px rgb(132, 240, 9);
}

.clicked {
    animation-name: clickFeedback;
    animation-duration: .2s;
}

@keyframes clickFeedback {
    0% {background-color: black;}
    2.5% {background-color: red;}
    5% {background-color: white;}
    7.5% {background-color: red;}
    10% {background-color: black;}
    12.5% {background-color: yellow;}
    15% {background-color: white;}
    17.5% {background-color: yellow;}
    20% {background-color: black;}
    22.5%{background-color: red;}
    25% {background-color: white;}
    27.5%{background-color: red;}
    30% {background-color: black;}
    32.5% {background-color: yellow;}
    35% {background-color: white;}
    37.5% {background-color: yellow;}
    40% {background-color: black;}
    42.5%{background-color: red;}
    45% {background-color: white;}
    47.5%{background-color: red;}
    50% {background-color: black;}
    52.5% {background-color: yellow;}
    55% {background-color: white;}
    60% {background-color: black;}
    62.5%{background-color: red;}
    65% {background-color: white;}
    70% {background-color: black;}
    72.5% {background-color: yellow;}
    75% {background-color: white;}
    77.5% {background-color: yellow;}
    80% {background-color: black;}
    82.5%{background-color: red;}
    85% {background-color: white;}
    87.5%{background-color: red;}
    90% {background-color: black;}
    92.5% {background-color: yellow;}
    95% {background-color: white;}
    97.5% {background-color: yellow;}
    100% {background-color: white;}
}

.animateWin {
    animation-name: borderShift;
    animation-duration: 3s;
}


@keyframes borderShift {
    0% {border-color: rgba(150, 60, 235, 0.6);
        box-shadow: 25px 25px 50px 20px yellow;}
    6% {border-color: rgba(37, 139, 235, 0.6);}
    12% {border-color: rgba(27, 238, 203, 0.6);}
    18% {border-color: rgba(236, 240, 27, 0.6);}
    25% {border-color: rgba(235, 162, 45, 0.6);
        box-shadow: -25px 25px 50px 20px rgb(0, 254, 157);}
    31% {border-color: rgba(235, 60, 60, 0.6);}
    37% {border-color: rgb(255, 255, 255);}
    44% {border-color: rgb(248, 232, 9);}
    50% {border-color: rgba(255, 0, 0, 0.6);}
    56% {border-color: rgba(150, 60, 235, 0.6);}
    62% {border-color: rgba(37, 139, 235, 0.6);}
    68% {border-color: rgba(27, 238, 203, 0.6);}
    74% {border-color: rgba(236, 240, 27, 0.6);
        box-shadow: -25px -25px 50px 20px rgb(0, 254,157);}
    80% {border-color: rgba(235, 162, 45, 0.6);}
    86% {border-color: rgba(235, 60, 60, 0.6);
        box-shadow: 25px -25px 50px 30px blue;}
    90% {border-color: rgb(255, 255, 255);}
    95% {border-color: rgb(248, 232, 9);
        box-shadow: 25px 25px 60px 40px red;}
    100% {border-color: rgba(255, 0, 0, 0.6);
        box-shadow: -25px 25px 70 50px orange;}
}

.animateLoss {
    animation-name: sizeFlashes;
    animation-duration: .5s; 
    animation-iteration-count: infinite;
    /* background-image: url("../images/lossSkull.jpg");   */
}

@keyframes sizeFlashes {
    0% {background-color: white;
        /* background-image: url("../images/lossSkull2.png"); */
        color: red;}
    2.5% {background-color: red;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: white;}
    5% {background-color: black;
        /* background-image: url("../images/lossSkull2.png"); */
        color: yellow;}
    7.5% {background-color: white;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: red;}
    10% {background-color: red;
        /* background-image: url("../images/lossSkull2.png"); */
        color: white;}
    12.5% {background-color: black;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: yellow;}
    15% {background-color: white;
        /* background-image: url("../images/lossSkull2.png"); */
        color: red;}
    17.5% {background-color: red;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: white;}
    20% {background-color: white;
        /* background-image: url("../images/lossSkull2.png"); */
        color: red;}
    22.5% {background-color: red;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: white;}
    25% {background-color: black;
        /* background-image: url("../images/lossSkull2.png"); */
        color: yellow;}
    27.5% {background-color: white;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: red;}
    30% {background-color: red;
        /* background-image: url("../images/lossSkull2.png"); */
        color: white;}
    32.5% {background-color: black;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: yellow;}
    35% {background-color: white;
        /* background-image: url("../images/lossSkull2.png"); */
        color: red;}
    37.5% {background-color: red;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: white;}
    40% {background-color: white;
        /* background-image: url("../images/lossSkull2.png"); */
        color: red;}
    42.5% {background-color: red;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: white;}
    45% {background-color: black;
        /* background-image: url("../images/lossSkull2.png"); */
        color: yellow;}
    47.5% {background-color: white;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: red;}
    50% {background-color: red;
        /* background-image: url("../images/lossSkull2.png"); */
        color: white;}
    52.5% {background-color: black;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: yellow;}
    55% {background-color: white;
        /* background-image: url("../images/lossSkull2.png"); */
        color: red;}
    57.5% {background-color: red;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: white;}
    60% {background-color: white;
        /* background-image: url("../images/lossSkull2.png"); */
        color: red;}
    62.5% {background-color: red;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: red;}
    65% {background-color: black;
        /* background-image: url("../images/lossSkull2.png"); */
        color: yellow;}
    67.5% {background-color: white;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: red;}
    70% {background-color: red;
        /* background-image: url("../images/lossSkull2.png"); */
        color: white;}
    72.5% {background-color: black;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: yellow;}
    75% {background-color: white;
        /* background-image: url("../images/lossSkull2.png"); */
        color: red;}
    77.5% {background-color: red;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: white;}
    80% {background-color: white;
        /* background-image: url("../images/lossSkull2.png"); */
        color: red;}
    82.5% {background-color: red;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: white;}
    85% {background-color: black;
        /* background-image: url("../images/lossSkull2.png"); */
        color: yellow;}
    87.5% {background-color: white;}
        /* background-image: url("../images/lossSkull.jpg");} */
    90% {background-color: red;
        /* background-image: url("../images/lossSkull2.png"); */
        color: white;}
    92.5% {background-color: black;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: yellow;}
    95% {background-color: white;
        /* background-image: url("../images/lossSkull2.png"); */
        color: red;}
    97.5% {background-color: red;
        /* background-image: url("../images/lossSkull.jpg"); */
        color: white}
    100% {background-color: white;
        /* background-image: url("../images/lossSkull2.png"); */
        color: red;}    
}