*{
    margin: 0;
    padding: 0;
    /* transition: all 10ms; */
    user-select: none;
}
body{
    background-color: #000;
    width:100vw;
    height: 100vh;
    min-width: 1256px;
    min-height: 945px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

}

#continer{
    transform-style: preserve-3d;
    position: relative;
    width: 100px;
    height: 100px;
    transition: all 0.1s;
    /* transform: rotateY(30deg) rotateX(30deg) rotateZ(30deg); */
}
.f{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #000;
    box-shadow: 0px 0px 4px #fff;
}
.box{
    width: 100px;
    height: 100px;
    /* background-color: aliceblue; */
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    /* transform: translateX(100px) rotateX(30deg); */
}
.before{
    transform: translateZ(50px);
}
.after{
    transform: translateZ(-50px);
}
.left{
    transform: translateX(-50px) rotateY(-90deg);
}
.right{
    transform: translateX(50px) rotateY(90deg);
}
.top{
    transform: translateY(-50px) rotateX(-90deg);
}
.bottom{
    transform: translateY(50px) rotateX(90deg);
}

.nav{
    position: absolute;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: #ffffff64;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#header{
    left: 0;
}
#footer{
    right: 0;
}

.show{
    width: 240px;
    height: 400px;
    background-color: #ffffffaa;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px black;
}

.showdiv{
    float: left;
    width: 70px;
    height: 70px;
    margin: 5px;
    background-color: #000;
    /* display: inline-block; */
}

.shownum{
    font-size: 1.35rem;
    margin: 2px;
    margin-top: 246px;
}

#small{
    transform-style: preserve-3d;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 40px;
    right: 350px;
    transition: all 0.1s;
    /* background-color: aliceblue; */
}
.smallf{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff9e;
    color: #ffffffc8;
    text-align: center;
    border: 1px solid #fff;
    font-size: 30px;
}

.smallbefore{
    transform: translateZ(25px);
}
.smallafter{
    transform: translateZ(-25px);
}
.smallleft{
    transform: translateX(-25px) rotateY(-90deg);
}
.smallright{
    transform: translateX(25px) rotateY(90deg);
}
.smalltop{
    transform: translateY(-25px) rotateX(-90deg);
}
.smallbottom{
    transform: translateY(25px) rotateX(90deg);
}
#old{
    width: 50px;
    height: 29px;
    position: absolute;
    text-align: center;
    font-size: 18px;
    top: 20px;
    left: 330px;
    background-color: #ffffffd8;
}