table{
    width: 100%;
    height: 100%;
    border-spacing: 0px 0px;
}

.container{
    position: absolute;
    width: 50vw;
    height: 40vw;
    left: 50%;
    transform: translate(-50%);
    top: 4rem;

}

.game{
    width: 100%;
    height: 100%;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.4);
    border: transparent;
}

.controller{
    position: absolute;
    width: 50vw;
    height: 5vw;
    left: 50%;
    top: 45vw;
    transform: translate(-50%);
}

.player1{
    background-image:url(board/red.svg);
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    pointer-events: none;
}

.player2{
    background-image:url(board/yellow.svg);
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    pointer-events: none;
}

.win{
    background-image:url(board/green.svg);
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    pointer-events: none;
}

.board{
    background-image:url(board/boardpiece.svg);
    width: 14.285714286%;
    height: 14.285714286%;
    background-size: 100% 100%;
    border: 0px solid rgb(69, 89, 194);
    margin: 0px;
}

.finaltext{
    position: absolute;
    width: 20vw;
    height: 10vw;
    top: 20vw;
    right: 5%;
}

.finaltext img {
    position: relative;
    height: 5vw;
    width: 5vw;
    margin-left: 50%;
    transform: translate(-60%);
    opacity: inherit;
}
#finalText {
    position: relative;
    text-align: center;
    font-size: 2vw;
}

.title {
    position: absolute;
    width: 35vw;
    height: 3vw;
    top: 0.5rem;
    left: 60%;
    transform: translate(-50%);
    text-align: center;
    font-size: 40px;
}

.turn-controller {
    position: absolute;
    padding-left: 1vw;
    width: 20vw;
    height: 10vw;
    top: 20vw;
    left: 5%;
}

.turn-controller .row > img {
    height: 5vw;
    width: 5vw;
    opacity: inherit;
}
.turn-controller .row > span {
    position: relative;
    padding-top: 1vw;
    text-align: center;
    font-size: 2vw;
}

.btn-reset {
    width: 100%;
    height: 100%;
}
.btn-control{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3px;
}
.controllerSmall {
    position: absolute;
    visibility: hidden;
}

@media (max-width: 1400px){
    .container{
        position: absolute;
        width: 60vw;
        height: 50vw;
        left: 60%;
        transform: translate(-50%);
    }

    .controller{
        left: 60%;
        top: 58vw;
        transform: translate(-50%);
    }

    .turn-controller{
        top: 50%;
        left: 5vw;
        transform: translateY(-50%);
    }

    .finaltext{
        top: 20%;
        left: 5vw;
    }
}


@media (max-width: 1000px){
    .container{
        position: absolute;
        width: 80vw;
        height: 64vw;
        left: 50%;
        transform: translate(-50%);
    }

    .controller{
        visibility: hidden;
    }
    .controllerSmall{
        width: 20vw;
        left: 50%;
        top: 75vw;
        transform: translate(-50%);
        visibility: visible;
    }

    .turn-controller {
        top: 80vw;
        left: 15vw;
    }

    .finaltext{
        top: 75vw;
        left: 65vw;
    }

    .title {
        left: 50%;
        transform: translate(-50%);
        width: 60vw;
    }
}

@media (max-width: 500px) {
    .container{
        width: 100vw;
        height: 80vw;
    }
    .turn-controller {
        top: 60vh;
    }

    .title {
        width: 100vw;
        font-size: 30px;
    }
    .controller{
        top: 100vw;
        width: 80vw;
        transform: translate();
    }
}

/* @media (pointer:coarse) {

    .container{
        background-color: red;
        width: 1000px;
    }

    .controller {
        visibility: hidden;
    }
    .controllerSmall {
        left: 60%;
        top: 58vw;
        transform: translate(-50%);
        visibility: visible;
    }
} */