* {
 
    margin: 0;
    padding:0;
    
    box-sizing: border-box;

}

/*
.bangers-regular {
    font-family: "Bangers", serif;
    font-weight: 400;
    font-style: normal;
}
*/
@font-face {

  font-family: 'Bangers'; /* Choose a name for your font */
  src: url('fonts/Bangers-Regular.ttf');  /* url('fonts/Bangers-Regular.ttf') format('ttf'); */ /* Add other formats if needed */

}

/* ################################################################################ */

#canvas1 {

    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    max-width:  100%;
    max-height: 100%;

    /* border: 5px solid black; */
    background: #4d79bc;

}

#layer1, #layer2, #layer3, #layer4, #player, #angler1, #angler2, #lucky, #hivewhale, #drone, #projectile, #gears, #smokeExplosion, #fireExplosion {
    display: none;
}

/* ################################################################################ */

#canvas2 {

    /* display: none; */
    
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    max-width:  100%;
    max-height: 100%;

    /* border: 5px solid green; */
    /* background: #4d79bc; */

}

/* ################################################################################ */

/* PROBLEM */
#3d_slider {

    /* display: none; */
    
    position: absolute;
    top:  5%;
    left: 5%;
    width:  90%;
    height: 30%;
    
    /* border: 5px solid black; */
   
    font-family: 'Bangers', Helvetica;  /* ####################################################### */

}

/* ################################################################################ */

/* #user_input {
} */
#canvas_table {

    /* display: none; */
    
    position: absolute; 
    top:  50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    max-width:  100%;
    max-height: 100%;

    /* border: 5px solid green; */
    /* background: #4d79bc; */

}

#table_bg1, #table_bg2, #item_up, #item_fire, #item_down, #item_left {
    display: none;
}

/* ################################################################################ */

/* PROBLEM */
#anim_fighting {

    /* border: 5px solid red; */


}

/* ################################################################################ */

@media screen and (max-width: 699px) {

    .container {

                                margin-top: 50px;
        
        display: flex;
        justify-content: center;
        align-item: center;
        
        /* min-height: 100vh; */
        
        /* background: #000; */
        
        transform-style: preserve-3d;

    }
    
    .box {

        position: relative;
        
        width:  60px;
        height: 60px;

        transform-style: preserve-3d;
        
        transition: 7s;  /* 1.5s; */
        transform: perspective(1500px) rotateY(0deg);  /* 1000px */

    }

    .box span {

        position: absolute;
        top:  0;
        left: 0;

        width:  100%;
        height: 100%;

        transform-origin: center;
        transform-style: preserve-3d;
        
        transform: rotateY(calc(var(--i) * 24deg)) translateZ(150px);  /* 45deg */ /* 300px */
        
        -webkit-box-reflect: below 0px linear-gradient(transparent,transparent,#0004);

    }
    
    .btns {

        position: absolute;
        
        /* bottom: 100px; */
                                top: -100px;
        
        /* display: flex; */
                                display: none;
        
        gap: 30px;

    }

}

/* @media screen and (max-width: 1023px) { */
@media screen and (min-width: 700px) {

    .container {

                                margin-top: 10px;
        
        display: flex;
        justify-content: center;
        align-item: center;
        
        /* min-height: 100vh; */
        
        /* background: #000; */
        
        transform-style: preserve-3d;

    }
    
    .box {

        position: relative;
        
        width:  100px;
        height: 100px;

        transform-style: preserve-3d;
        
        transition: 7s;  /* 1.5s; */
        transform: perspective(1500px) rotateY(0deg);  /* 1000px */

    }

    .box span {

        position: absolute;
        top:  0;
        left: 0;

        width:  100%;
        height: 100%;

        transform-origin: center;
        transform-style: preserve-3d;
        
        transform: rotateY(calc(var(--i) * 24deg)) translateZ(250px);  /* 45deg */ /* 300px */
        
        -webkit-box-reflect: below 0px linear-gradient(transparent,transparent,#0004);

    }
    
    .btns {

        position: absolute;
        
        /* bottom: 100px; */
                                top: -60px;
        
        /* display: flex; */
                                display: none;
        
        gap: 30px;

    }

}

@media screen and (min-width: 1024px) {

    .container {

                                margin-top: 40px;
        
        display: flex;
        justify-content: center;
        align-item: center;
        
        /* min-height: 100vh; */
        
        /* background: #000; */
        
        transform-style: preserve-3d;

    }

    .box {

        position: relative;
        
        width:  170px;
        height: 170px;

        transform-style: preserve-3d;
        
        transition: 7s;  /* 1.5s; */
        transform: perspective(1500px) rotateY(0deg);  /* 1000px */

    }

    .box span {

        position: absolute;
        top:  0;
        left: 0;

        width:  100%;
        height: 100%;

        transform-origin: center;
        transform-style: preserve-3d;
        
        transform: rotateY(calc(var(--i) * 24deg)) translateZ(430px);  /* 45deg */ /* 300px */
        
        -webkit-box-reflect: below 0px linear-gradient(transparent,transparent,#0004);

    }

    .btns {

        position: absolute;
        
        /* bottom: 100px; */
                                top: -90px;
        
        /* display: flex; */
                                display: none;
        
        gap: 30px;

    }

}

@media screen and (min-width: 1300px) {

    .container {

                                margin-top: 60px;
        
        display: flex;
        justify-content: center;
        align-item: center;
        
        /* min-height: 100vh; */
        
        /* background: #000; */
        
        transform-style: preserve-3d;

    }

    .box {

        position: relative;
        
        width:  200px;
        height: 200px;

        transform-style: preserve-3d;
        
        transition: 7s;  /* 1.5s; */
        transform: perspective(1500px) rotateY(0deg);  /* 1000px */

    }

    .box span {

        position: absolute;
        top:  0;
        left: 0;

        width:  100%;
        height: 100%;

        transform-origin: center;
        transform-style: preserve-3d;
        
        transform: rotateY(calc(var(--i) * 24deg)) translateZ(600px);  /* 45deg */ /* 300px */
        
        -webkit-box-reflect: below 0px linear-gradient(transparent,transparent,#0004);

    }

    .btns {

        position: absolute;
        
        /* bottom: 100px; */
                                top: -110px;
        
        /* display: flex; */
                                display: none;
        
        gap: 30px;

    }

}

/* ################################################################################ */

.box span img {

    position: absolute;
    top:  0;
    left: 0;

    width:  100%;
    height: 100%;

    object-fit: cover;
    user-select: none;

}

.btns .btn {

    position: relative;
    
    width:  60px;
    height: 60px;
    
    color:White;
    
    border: 2px solid #fff;
    
    border-radius: 50%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

}

.btns .btn:active {

}

.btns .btn::before {

}

.btns .btn.prev::before {

}

.btns .btn:active::before {

}

/* ################################################################################ */