@media only screen and (min-width: 1279px) {
    .copyright p {
        bottom: -2%;
        left: 15.5%;
    }
}

@media only screen and (min-width: 1335px) {
    .copyright p {
        bottom: -2%;
        left: 17.6%;
    }
    .scene {
        perspective: 200px;
    }
    section h1 {
        margin-top: 10vw;
    }
}

@media only screen and (min-width: 1599px) {
    .copyright p {
        bottom: -2%;
        left: 16.7%;
    }
    .scene {
        perspective: 130px;
    }
    section h1 {
        margin-top: 11vw;
    }
}

@media only screen and (min-width: 1919px) {
    .copyright p {
        bottom: -2%;
        left: 24.5%;
    }
    .scene {
        perspective: 100px;
    }
    section h1 {
        margin-top: 13vw;
    }
}

@media only screen and (min-width: 2159px) {
    .copyright p {
        bottom: -2%;
        left: 28.2%;
    }
    .scene {
        perspective: 70px;
    }
    section h1 {
        margin-top: 10vw;
    }
    .pen {
        top: 40%;
        right: 7%;
    }
}

@media only screen and (min-width: 2559px) {
    .copyright p {
        bottom: -2%;
        left: 32.2%;
    }
    .scene {
        perspective: 65px;
    }
    section h1 {
        margin-top: 15vw;
    }
    .pen {
        top: 40%;
        right: 10%;
    }
    .page img:nth-child(1) {
        top: 50%;
        right: 4%;
    }
    .page img:nth-child(2) {
        top: 51%;
        right: 3.75%;
    }
    .page img:nth-child(3) {
        top: 52%;
        right: 3.5%;
    }
    .page img:nth-child(4) {
        top: 53%;
        right: 3.25%;
    }
    .copyright a:nth-of-type(1) {
        bottom: 0%;
        right: 23.5%;
    }
    .copyright a:nth-of-type(2) {
        bottom: 0%;
        right: 16.5%;
    }
    .copyright a:nth-of-type(3) {
        bottom: 0%;
        right: 12.5%;
    }
    .copyright a:nth-of-type(4) {
        bottom: 0%;
        right: 27.3%;
    }
}

@media only screen and (max-width: 1024px) {
    header nav a {
        font-size: 6.625vw;
    }
    section h1 {
        padding-top: 5vw;
        font-size: 3rem;
    }
    section p {
        padding: 5vw 0;
        font-size: 3.125vw;
    }
    section a {
        padding: 4.275vw 8.75vw;
        border-radius: 10vw;
        margin-left: 0;
        font-size: 4.15vw;
    }
    .face {
        border-radius: 2px;
    }
    .pen {
        top: 67%;
        right: 35%;
        width: 18vw;
        filter: hue-rotate(5deg) drop-shadow(3mm 2mm 2mm #161719ad);
    }
    .page img:nth-child(1) {
        top: 70%;
        right: 31%;
        width: 35vw;
    }
    .page img:nth-child(2) {
        top: 71%;
        right: 30.75%;
        width: 35vw;
    }
    .page img:nth-child(3) {
        top: 72%;
        right: 30.5%;
        width: 35vw;
    }
    .page img:nth-child(4) {
        top: 73%;
        right: 30.25%;
        width: 35vw;
        filter: hue-rotate(5deg) drop-shadow(3mm 2mm 3mm #161719ad);
    }
    .copyright p {
        font-size: 3.5vw;
        bottom: -2%;
        left: 32%;
    }
    .copyright a {
        font-size: 3.5vw;
    }
    .copyright a:nth-of-type(1) {
        bottom: 13%;
        right: -1%;
    }
    .copyright a:nth-of-type(2) {
        bottom: 1%;
        right: -2.5%;
    }
    .copyright a:nth-of-type(3) {
        bottom: 9%;
        right: -1%;
    }
    .copyright a:nth-of-type(4) {
        bottom: 5%;
        right: -2.5%;
    }
    .theme-box {
        position: fixed;
        top: 5%;
        right: 0%;
        transform: translate(-50%, -50%);
    }
    .theme-switch {
        display: inline-block;
        height: 4vw;
        position: relative;
        width: 7vw;
    }
    .slider:before {
        bottom: 6px;
        height: 3vw;
        left: 4px;
        width: 3vw;
    }
}

@media only screen and (max-width: 770px) {
    .theme-box {
        position: fixed;
        top: 5%;
        right: 0%;
        transform: translate(-50%, -50%);
    }
    .theme-switch {
        display: inline-block;
        height: 4vw;
        position: relative;
        width: 8vw;
    }
    .slider:before {
        bottom: 4px;
        height: 3vw;
        left: 4px;
        width: 3vw;
    }
    section h1 {
        padding-top: 5vw;
        font-size: 3.3rem;
    }
    .whole-cube {
        top: 22.5%;
        left: 70%;
        filter: drop-shadow(2mm 2mm 1mm #16171977);
        transform: translate(-50%, -50%) scale(2.5);
    }
}

@media only screen and (max-width: 445px) {
    header nav a {
        font-size: 6.625vw;
    }
    section h1 {
        padding-top: 5vw;
        font-size: 3rem;
    }
    section p {
        padding: 5vw 0;
        font-size: 3.125vw;
    }
    section a {
        padding: 4.275vw 8.75vw;
        border-radius: 10vw;
        margin-left: 0;
        font-size: 4.15vw;
    }
    .face {
        border-radius: 2px;
    }
    .pen {
        top: 67%;
        right: 35%;
        width: 18vw;
        filter: hue-rotate(5deg) drop-shadow(3mm 2mm 2mm #161719ad);
    }
    .page img:nth-child(1) {
        top: 70%;
        right: 31%;
        width: 40vw;
    }
    .page img:nth-child(2) {
        top: 71%;
        right: 30.75%;
        width: 40vw;
    }
    .page img:nth-child(3) {
        top: 72%;
        right: 30.5%;
        width: 40vw;
    }
    .page img:nth-child(4) {
        top: 73%;
        right: 30.25%;
        width: 40vw;
        filter: hue-rotate(5deg) drop-shadow(3mm 2mm 3mm #161719ad);
    }
    .copyright p {
        font-size: 3.5vw;
        bottom: -2%;
        left: 32%;
    }
    .copyright a {
        font-size: 3.5vw;
    }
    .copyright a:nth-of-type(1) {
        bottom: 13%;
        right: -1%;
    }
    .copyright a:nth-of-type(2) {
        bottom: 1%;
        right: -2.5%;
    }
    .copyright a:nth-of-type(3) {
        bottom: 9%;
        right: -1%;
    }
    .copyright a:nth-of-type(4) {
        bottom: 5%;
        right: -2.5%;
    }
    .theme-box {
        position: fixed;
        top: 7%;
        right: 72.5%;
        transform: translate(-50%, -50%);
    }
    .theme-switch {
        display: inline-block;
        height: 5vw;
        position: relative;
        width: 11.9vw;
    }
    .slider:before {
        bottom: 4px;
        height: 3vw;
        left: 4px;
        width: 3vw;
    }
    .circle-login {
        top: 1.3%;
        right: 3.5%;
    }
}

@media only screen and (max-width: 380px) {
    .pen {
        top: 70%;
        right: 35%;
        width: 18vw;
        filter: hue-rotate(5deg) drop-shadow(3mm 2mm 2mm #161719ad);
    }
    .page img:nth-child(1) {
        top: 73%;
        right: 31%;
        width: 40vw;
    }
    .page img:nth-child(2) {
        top: 74%;
        right: 30.75%;
        width: 40vw;
    }
    .page img:nth-child(3) {
        top: 75%;
        right: 30.5%;
        width: 40vw;
    }
    .page img:nth-child(4) {
        top: 76%;
        right: 30.25%;
        width: 40vw;
        filter: hue-rotate(5deg) drop-shadow(3mm 2mm 3mm #161719ad);
    }
    .theme-box {
        position: fixed;
        top: 7.5%;
        right: 72.5%;
        transform: translate(-50%, -50%);
    }
}

@media only screen and (min-width: 370px) and (max-width: 375px) and (min-height: 800px) and (max-height: 815px) {
    .theme-box {
        top: 6.4%;
    }
}

@media only screen and (max-width: 370px) {
    .pen {
        top: 65%;
        right: 25%;
        width: 20vw;
        filter: hue-rotate(5deg) drop-shadow(3mm 2mm 2mm #161719ad);
    }
    .page img:nth-child(1) {
        top: 72%;
        right: 21%;
        width: 45vw;
    }
    .page img:nth-child(2) {
        top: 73%;
        right: 20.75%;
        width: 45vw;
    }
    .page img:nth-child(3) {
        top: 74%;
        right: 20.5%;
        width: 45vw;
    }
    .page img:nth-child(4) {
        top: 75%;
        right: 20.25%;
        width: 45vw;
        filter: hue-rotate(5deg) drop-shadow(3mm 2mm 3mm #161719ad);
    }
}

@media only screen and (max-width: 330px) {
    .page img:nth-child(1) {
        top: 76%;
        right: 21%;
        width: 45vw;
    }
    .page img:nth-child(2) {
        top: 77%;
        right: 20.75%;
        width: 45vw;
    }
    .page img:nth-child(3) {
        top: 78%;
        right: 20.5%;
        width: 45vw;
    }
    .page img:nth-child(4) {
        top: 79%;
        right: 20.25%;
        width: 45vw;
        filter: hue-rotate(5deg) drop-shadow(3mm 2mm 3mm #161719ad);
    }
    .theme-box {
        position: fixed;
        top: 8%;
        right: 68.5%;
        transform: translate(-50%, -50%);
    }
    .theme-switch {
        display: inline-block;
        height: 5.4vw;
        position: relative;
        width: 13.5vw;
    }
    .slider:before {
        bottom: 4px;
        height: 3vw;
        left: 4px;
        width: 3vw;
    }
}

@media only screen and (max-width: 300px) {
    .theme-box {
        top: 6%;
        right: 66%;
    }
}

@media only screen and (min-width: 1010px) and (max-width: 1024px) and (min-height: 1250px) and (max-height: 1366px) {
    .circle-login {
        transform: scale(1.2);
        top: 2.9%;
    }
}

@media only screen and (width: 540px) and (height: 720px) {
    .page img:nth-child(1) {
        top: 75%;
        right: 30%;
        width: 35vw;
    }
    .page img:nth-child(2) {
        top: 76%;
        right: 29.75%;
        width: 35vw;
    }
    .page img:nth-child(3) {
        top: 77%;
        right: 29.5%;
        width: 35vw;
    }
    .page img:nth-child(4) {
        top: 78%;
        right: 29.25%;
        width: 35vw;
        filter: hue-rotate(5deg) drop-shadow(3mm 2mm 3mm #161719ad);
    }
    .theme-box {
        top: 5.5%;
    }
    .theme-switch {
        display: inline-block;
        height: 4vw;
        position: relative;
        width: 9.5vw;
    }
    .slider:before {
        bottom: 4px;
        height: 2.7vw;
        left: 4px;
        width: 2.7vw;
    }
}

@media only screen and (max-width: 1024px) {
    .whole-cube {
        display: none;
    }
}

@media only screen and (min-width: 1200px) and (min-height: 700px) {
    .whole-cube {
        top: 2%;
        left: 16%;
        transform: scale(0.6);
    }
}

@media only screen and (min-width: 1500px) and (min-height: 840px) {
    .whole-cube {
        top: 2%;
        left: 16%;
        transform: scale(0.7);
    }
    .circle-login {
        top: 2.5%;
        transform: scale(1);
    }
}

@media only screen and (min-width: 1800px) and (min-height: 900px) {
    .whole-cube {
        top: 2%;
        left: 23%;
        transform: scale(0.8);
    }
    .circle-login {
        top: 3%;
        transform: scale(1.2);
    }
}

@media only screen and (min-width: 2100px) and (min-height: 1000px) {
    .whole-cube {
        top: 2.5%;
        left: 26%;
        transform: scale(0.7);
    }
}

@media only screen and (min-width: 2100px) and (min-height: 1300px) {
    .whole-cube {
        top: 1.7%;
        left: 26%;
        transform: scale(0.7);
    }
}

@media only screen and (max-width: 360px) and (max-height: 580px) {
    .page img:nth-child(1) {
        top: 76%;
        right: 45%;
        width: 25vw;
    }
    .page img:nth-child(2) {
        top: 77%;
        right: 44.75%;
        width: 25vw;
    }
    .page img:nth-child(3) {
        top: 78%;
        right: 44.5%;
        width: 25vw;
    }
    .page img:nth-child(4) {
        top: 79%;
        right: 44.25%;
        width: 25vw;
        filter: hue-rotate(5deg) drop-shadow(3mm 2mm 3mm #161719ad);
    }
    .pen {
        width: 12vw;
        top: 70%;
        right: 47%;
    }
    .theme-box {
        top: 8%;
    }
}