@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: "Lexend", 'Courier New', Courier, monospace;
}

:root{
    --color1: #EE2375;
    --color2: #4E4363;
    --color3: #2BE2F3;
    --color4: #404040;
    --color5: #000;
}

body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    background-color: var(--color2);
}

header{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    color: var(--color1);
    background-color: var(--color4);
}

h1{
    display: flex;
    align-items: center;
    font-size: 1.6em;
}

h1:before{
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 5px 20px;
    background-color: var(--color3);
    transform: rotate(45deg);
}

h1:after{
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 5px 20px;
    background-color: var(--color1);
    transform: rotate(45deg);
}

header #logo{
    width: 50px;
    height: 50px;
    background-color: #000;
    border-radius: 50%;
}

header #logo::before{
    content: "";
    display: block;
    position: relative;
    top: 12px;
    left: 1px;
    width: 48px;
    height: 25px;
    background-color: #ffffff;
    border-radius: 50%;
}

header #logo::after{
    content: "";
    display: block;
    position: relative;
    top: -10.5px;
    left: 5px;
    width: 20px;
    height: 20px;
    background-color: #f00;
    border-radius: 50%;
    animation: alternate-reverse zigZag 1s infinite ease-in-out;
}

@keyframes zigZag{
    from{
        left: 5px;
    }
    
    to{
        left: 25px;
    }
}

.cubo{
    width: 50px;
    height: 50px;
    background-color: var(--color3);
    box-shadow: 0px 0px 5px #fff;
    animation: chuva 1.5s infinite ease-in;
    position: fixed;
    z-index: -2;
}

@keyframes chuva{
    from{
        top: 0;
    }
    
    to{
        top: 100%
    }
}

main{
    display: flex;
    flex-direction: column;
}

main > h2 > strong{ font-size: 1.4em; }

main > h2{
    width: 90%;
    padding: 15px;
    margin: 25px auto;
    color: var(--color3);
    font-size: 1.3em;
    text-align: center;
    background-color: #0000008e;
    border-radius: 30px;
}

main > h3{
    width: 75%;
    padding: 15px;
    margin: 25px auto;
    color: var(--color1);
    font-size: 1.2em;
    text-align: center;
    background-color: #0000008e;
    border-radius: 30px;
}

main > .formas{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.formas > .forma{
    margin-top: 25px;
    min-width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.formas > .forma > .fundo{
    width: 100px;
    height: 100px;
    background-color: #000;
    position: absolute;
    z-index: -1;
    transform: rotate(45deg) scale(1.19);
}

.formas > .forma::before{
    content: "";
    width: 100px;
    height: 100px;
    background-color: var(--color1);
    position: absolute;
    z-index: -1;
    animation: rotate 3s infinite ease-in-out;
}

@keyframes rotate{
    to{
        transform: rotate(90deg);
    }
}

.formas > .forma > .formaGeometrica{
    width: 100px;
    height: 100px;
    background-color: #000;
    border: 1px solid var(--color3);
    transform: scale(0.8);
}

.formas > .forma > a{
    margin: 30px 0;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    background-color: #fff;
    border: 1px solid var(--color1);
    box-shadow: 1px 1px 3px #000;
    cursor: pointer;
    animation: beating 1s infinite alternate-reverse ease-in-out;
}

@keyframes beating{
    from{
        transform: scale(1);
    }

    to{
        transform: scale(1.05);
    }
}

.formas:first-of-type > .forma:nth-child(1) > .formaGeometrica{
    border-radius: 50%;
}

.formas:first-of-type > .forma:nth-child(3) > .formaGeometrica{
    margin-top: 15px;
    margin-bottom: 10px;
    height: 75px;
}


.formas:first-of-type > .forma:nth-child(4) > .formaGeometrica{
    width: 0; 
    height: 0; 
    border: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent; 
    border-bottom: 90px solid var(--color3);
}

.formas:first-of-type > .forma:nth-child(4) > .formaGeometrica::after{
    content: "";
    width: 0; 
    height: 0; 
    position: relative;
    left: -45px;
    top: -15px;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 82px solid #000;
}

.container:nth-child(2) {
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: animateSphere 10s infinite; 
  }
  
.border {
    border: 1px solid #2BE2F3;
}

.circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #000;
}

.circle:nth-child(1) {transform: rotate3d(1, 0, 0, 0deg);}
.circle:nth-child(2) {transform: rotate3d(1, 0, 0, 36deg);}
.circle:nth-child(3) {transform: rotate3d(1, 0, 0, 72deg);}
.circle:nth-child(4) {transform: rotate3d(1, 0, 0, 108deg);}
.circle:nth-child(5) {transform: rotate3d(1, 0, 0, 144deg);}

.circle:nth-child(6) {transform: rotate3d(0, 1, 0, 0deg);}
.circle:nth-child(7) {transform: rotate3d(0, 1, 0, 36deg);}
.circle:nth-child(8) {transform: rotate3d(0, 1, 0, 72deg);}
.circle:nth-child(9) {transform: rotate3d(0, 1, 0, 108deg);}
.circle:nth-child(10) {transform: rotate3d(0, 1,0, 144deg);}

.circle:nth-child(11) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 0deg);}
.circle:nth-child(12) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 36deg);}
.circle:nth-child(13) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 72deg);}
.circle:nth-child(14) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 108deg);}
.circle:nth-child(15) {transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 144deg);}
  
@keyframes animateSphere {
    0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); }
    50% { transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg); }
    100% { transform: rotateY(720deg) rotateX(720deg) rotateZ(360deg); }
}
  
.cube {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: turn 5s linear infinite;
}
  
.face {
    width: 50px;
    height: 50px;
    border: 2px solid var(--color3);
    position: absolute;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 2rem;
    transition: transform 500ms;
}

#cuboide .left{
    width: 75px;
}

#cuboide .right{
    width: 75px;
}

#cuboide .top{
    height: 75px;
}

#cuboide .bottom{
    height: 75px;
}

#cuboide .front{
    transform: translateZ(37px);
}

#cuboide .back{
    transform: translateZ(-37px)
}
  
.front {
    transform: translateZ(25px);
}

.back {
    transform: translateZ(-25px) rotateY(180deg);
}

.left {
    transform: translateX(-25px) rotateY(-90deg);
}

.right {
    transform: translateX(25px) rotateY(90deg);
}

.top {
    transform: translateY(-25px) rotateX(90deg);
}

.bottom {
    transform: translateY(25px) rotateX(-90deg);
}

@keyframes turn {
    from { transform: rotate3d(0, 0, 0, 0); }
    to { transform: rotate3d(1, 1, 0, 360deg); }
}

.wrap {
    width: 100px;
    height: 100px;
}

.triangle {
    position:absolute;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 52px solid var(--color3);
    /* 129.903810568 */
    transform-origin: 30px 0;
    /* perspective: 150px; */
    perspective-origin: 10% 10%;
}

.face-1 {
    transform-origin: 30px 0;
    transform: rotateY(0deg) rotateX(19.5deg);
}

.face-2 {
    transform-origin: 30px 0;
    transform: rotateY(120deg) rotateX(19.5deg);
}

.face-3 {
    transform-origin: 30px 0;
    transform: rotateY(240deg) rotateX(19.5deg);
}

.face-4 {
    /* bottom face */
    transform-origin: 0 0px;
    transform: rotateX(90deg) translateY(-35px) translateZ(-49px);
    
}

.rotor-x {
    width: 100px;
    height: 100px;
    position: relative;
    left: 10px;

    transform-origin: 30px 65px;
    transform-style: preserve-3d;
    animation: spinX 6s infinite linear;
}

.rotor-y {
    width: 100px;
    height: 100px;
    transform-origin: 30px 65px;
    transform-style: preserve-3d;
    animation: spinY 12s infinite linear;
}

.rotor-z {
    width: 100px;
    height: 100px;
    transform-origin: 30px 65px;
    transform-style: preserve-3d;
    animation: spinZ 18s infinite linear;
}

@keyframes spinX {
    from {
        transform: rotateY(0);
    }
    
    to {
        transform: rotateY(360deg);
    }
}

@keyframes spinY {
    from {
        transform: rotateY(0);
    }

    to {
        transform: rotateY(360deg);
    }
}

@keyframes spinZ {
    from {
        transform: rotateZ(0);
    }

    to {
        transform: rotateZ(360deg);
    }
}

footer{
    padding: 5px;
    padding-bottom: 10px;
    background-color: var(--color1);
    text-align: center;
    font-size: 1.5em;
}

footer a{
    text-decoration: none;
    color: var(--color3);
}

footer a:hover{
    filter: drop-shadow(0px 0px 2px var(--color3));
}