:root{
    --Size0:400px;
    --Size05:200px;
    --Size05minus:-200px;
}

@media screen and (min-width: 400px) {
    :root{
        --Size0:160px;
        --Size05:80px;
        --Size05minus:-80px;
    }
}

@media screen and (min-width: 600px) {
    :root{
        --Size0:200px;
        --Size05:100px;
        --Size05minus:-100px;
    }
}

@media screen and (max-width: 800px) {
    :root{
        --Size0:300px;
        --Size05:150px;
        --Size05minus:-150px;
    }
}

@media screen and (min-width: 1000px) {
    :root{
        --Size0:400px;
        --Size05:200px;
        --Size05minus:-200px;
    }
}

@media screen and (min-width: 1200px) {
    :root{
        --Size0:600px;
        --Size05:300px;
        --Size05minus:-300px;
    }
}


.PicCube{
    z-index:999999;
    xoverflow: hidden;
    box-sizing: border-box;
    transition: .3s;
    display:inline-block;
    position:relative;
    width:100%;
    height:100%;
}
.cube {
    width: var(--Size0);
    height: var(--Size0);
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 30s linear infinite;
}


.box {

    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.99;
    border:1px solid #808080;
}
.box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Applying styles to each face */
.box1 {
    transform: translateZ(var(--Size05));
}

.box2 {
    transform: rotateY(90deg) translateX(var(--Size05));
    transform-origin: right;
}

.box3 {
    transform: rotateY(180deg) translateZ(var(--Size05));
}

.box4 {
    transform: rotateY(-90deg) translateX(var(--Size05minus));
    transform-origin: left;
}

.box5 {
    transform: rotateX(-90deg) translateY(var(--Size05minus));
    transform-origin: top;
}

.box6 {
    transform: rotateX(90deg) translateY(var(--Size05));
    transform-origin: bottom;
}

/* Animating the elements */
@keyframes rotate {
    0%,
    100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotateY(90deg) rotateZ(15deg);
    }
    40% {
        transform: rotateY(180deg) rotateZ(-15deg);
    }
    60% {
        transform: rotateY(270deg) rotateZ(15deg);
    }
    80% {
        transform: rotateY(360deg) rotateZ(-15deg);
    }
}


button:disabled,
button[disabled]{
  opacity: 0.3;
}

.InfoBox{
    display:block;
    
}