@keyframes run {
            0% {
                transform: rotateX(0deg) rotateY(0deg)
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg)
            }
        }

        body {
            margin: 0;
            perspective: 800px;
            background: linear-gradient(45deg,darkblue,hotpink);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .nav{
            width: 80%;
            margin: 0 atuo;
            display: grid;
            grid-template-columns: repeat(6,1fr);
            grid-template-rows: repeat(2,1fr) auto;
            grid-gap: 10px;
        }

        .boxs {
            transform-style: preserve-3d;
            width: 200px;
            height: 200px;
            margin: 200px auto;
            animation: run 20s infinite linear;
        }

        .box {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            position: absolute;
            border: 5px solid #fff;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.25);
            line-height: 200px;
            text-align: center;
            font-size: 48px;
            color: #fff;
        }

        .box:nth-child(1) {
            transform: translateZ(100px);
        }

        .box:nth-child(2) {
            transform: rotateY(180deg) translateZ(100px)
        }

        .box:nth-child(3) {
            transform: rotateY(90deg) translateZ(100px)
        }

        .box:nth-child(4) {
            transform: rotateY(-90deg) translateZ(100px)
        }

        .box:nth-child(5) {
            transform: rotateX(90deg) translateZ(100px)
        }

        .box:nth-child(6) {
            transform: rotateX(-90deg) translateZ(100px)
        }
        .top{
            position: absolute;
            width: 80vw;
            display: flex;
            flex-direction: column;
            background: rgba(255,255,255,0.25);
            margin: 0 auto;
            box-sizing: border-box;
            padding: 20px;
            justify-content: center;
            align-items: center;
        }
        .top a{
            color: #fff;
            text-decoration: none;
            background: #000;
            border-radius: 50px;
            margin: 5px;
            text-align: center;
            padding: 5px 10px;
        }
        .top a:hover{
            color: greenyellow;
        }
        .top h1,.top h2{
            padding: 5px;
            margin: 0;
        }
        footer{
            text-align: center;
        }
        footer a{
            color: #000;
            text-decoration: none;
        }
        footer a:hover{
            color: #fff;
        }