* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
        zoom: 1.2;
    -moz-transform: scale(1.2);
    -moz-transform-origin: 0 0;
}

.wrapper {
    top: 50%;
    margin: 0 auto;
    left: 50%;
    position: absolute;
    perspective: 1500px;
    transform: translate(-50%, -50%);
}

.bigwrapper {
    display: grid;
    position: relative;
    margin: 0 auto;
    /* max-width: 100%; */
    height: 50vh;
/*    height: 50vh;*/
/*    width: 50vw;*/
    align-items: center;
}

@keyframes rotate {
    0% {
        transform: rotate3d(0, 0, 0, 0);
    }
    100% {
        transform: rotate3d(0, 1, 0, 360deg);
/*        transform: rotate3d(0, 7, 2, 360deg);*/
        /*        transform: rotate3d(0, -2, -1, 360deg);*/
    }
}

.welcome {
    text-align: center;
    margin-top: -4rem;
/*    color: #f62d13;*/
}

.userclass {
    color: #fad61f;
}

.box {
    width: 200px;
    height: 200px;
    position: absolute;
    background-size: cover;
    border: 6px solid #fad61f;
/*    border: 6px solid #0d1117;*/
    /*
    width: 150px;
    height: 150px;
*/
}

.box-area {
    position: absolute;
    animation-name: rotate;
    transform-style: preserve-3d;
    animation-duration: 15s;
/*    animation-duration: 6s;*/
    animation-timing-function: linear;
/*    animation-timing-function: cubic-bezier(0.72, 0.36, 0.41, 1.02);*/
    animation-iteration-count: infinite;
    color: black;
    font-size: 1.2em;
    text-align: center;
}

img {
    width: 100%;
    height: auto;
}

.front-box {
    transform: translateX(-100px) translateY(0px) translateZ(100px);
    /*    background: #bb86fc;*/
    padding: 13px;
    background-image: url(
    'img/picachu01.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.back-box {
    transform: translateX(-100px) translateY(0px) translateZ(-100px);
    /*    background: #bb86fc;*/
    padding: 13px;
    background-image: url('img/picachu01.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.right-box {
    transform: translateY(0px) rotateY(90deg) translateZ(0px);
    /*    background: #bb86fc;*/
    padding: 13px;
    background-image: url('img/picachu01.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.left-box {
    transform: translateX(-200px) translateY(0px) rotateY(90deg);
    /*    background: #bb86fc;*/
    padding: 13px;
    background-image: url('img/picachu01.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.bottom-box {
    transform: translateY(100px) translateX(-100px) rotateX(90deg);
    /*    background: #bb86fc;*/
    padding: 13px;
/*    background-image: url('./img/picachu01.png');*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.top-box {
    transform: translateX(-100px) translateY(-100px) rotateX(90deg);
    /*    background: #bb86fc;*/
    padding: 13px;
    background-image: url('img/picachu01.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}