html{
    font-size: 62.5%;
    font-family: "Open Sans", sans-serif;
}
.main{
    width: 100vw;
    height: 94vh;
    display: grid;
    place-content: center;
}
.content{
    width: 400px;
    height: 400px;
    background: linear-gradient(90deg, #1CB5E0 0%, #000851 100%);
    display: grid;
    place-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;

}
.cont-circle, .cont-decagono ,.cont-triangle{
    grid-row: 2/3;
    grid-column: 2/3;
    margin: auto;
}
.circle, .decagono ,.triangle{
    width: 90px;
    height: 90px;
    background-color: white;
}
.circle{
    clip-path: circle(50% at 50% 50%);
}
.decagono{
    clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}

.cont-circle{
    width: 90px;
    height: 90px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
    
  
    .circle{
        grid-column: 1/2;
        grid-row: 1/2;
        top: -245px;
        position: absolute;
        animation: 10s Ani-circle ease-in-out infinite ;
    }
    .line{
        z-index: 2;
        width: 90px;
        height: 90px;
        scale: 1.4;
        border-radius: 50%;
        /* border: 5px solid white; */
        grid-column: 1/2;
        grid-row: 1/2;
        animation: 10s Ani-circle-line ease-in-out infinite ;
    }
}
.cont-decagono{
    
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    .decagono{
        grid-column: 1/2;
        grid-row: 1/2;
        z-index: 2;
        scale: 0;
        animation: 10s Ani-decagono ease-in-out infinite ;
    }

    .cont-decagono-deca{
        position: relative;
        background-color: transparent;
        grid-column: 1/2;
        grid-row: 1/2;
        width: 90px;
        height: 90px;
        z-index: 3;
        scale: 0;
        animation: 10s Ani-decagono-line ease-in-out infinite ;
        .line{
            position: absolute;
            width: 30px;
            height: 5px;
            background-color: white;
            animation: 10s Ani-decagono-line-line ease-in-out infinite ;     
        }
        .lineD-1{
            top: -27px;
            right: -29px;
            rotate: 128deg;
        }
        .lineD-2{
            top: -34px;
            right: 29px;
            rotate: 90deg;
        }
        .lineD-3{
            top: -12px;
            right: 85px;
            rotate: 44deg;
        }
        .lineD-4{
            top: 31px;
            right: 100px;
            rotate: 0deg;
        }
        .lineD-5{
            top: 61px;
            right: 100px;
            rotate: 0deg;
        }
        .lineD-6{
            top: 96px;
            right: 76px;
            rotate: -38deg;
        }
        .lineD-7{
            top: 113px;
            right: 29px;
            rotate: 90deg;
        }
        .lineD-8{
            top: 99px;
            right: -28px;
            rotate: 44deg;
        }
        .lineD-9{
            top: 61px;
            right: -43px;
            rotate: 0deg;
        }
        .lineD-10{
            top: 31px;
            right: -43px;
            rotate: 0deg;
        }
    }
}
.cont-triangle{
    width: 90px;
    height: 90px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    .triangle{
        grid-column: 1/2;
        grid-row: 1/2;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        z-index: 1;
        scale: 0;
        animation: 10s Ani-triangle ease-in-out infinite ;
    }
    .cont-line{
        position: relative;
        width: 90px;
        height: 90px;
        grid-column: 1/2;
        grid-row: 1/2;
        z-index: 2;
        scale: 0;
        animation: 10s Ani-triangle-line ease-in-out infinite ;

        .line{
            position: absolute;
            width: 30px;
            height: 5px;
            background-color: white;
            animation: 10s Ani-triangle-line-line ease-in-out infinite ;
            
        }
        .line-1{
            top: -30px;
            left: 29px;
            rotate: 90deg;
    
        }
        .line-2{
            left: -40px;
            bottom: -16px;
            rotate: -33deg;
        }
        .line-3{
            right: -32px;
            bottom: -19px;
            rotate: 45deg;
        }
    
    }
    
}
@keyframes Ani-circle{
    0%{ 
        
        scale: 1;
    }
    10%{
        top: 5px;
    }
    12%{
        top: 0;
    }
    24%{
        scale: 0;
    }
    38%{}
    52%{}
    66%{}
    80%{
        scale: 0;
    }
    94%{
        scale: 1;
        top: 0;    }
    97%{}
    100%{
        top: 254px;

    }
}
@keyframes Ani-circle-line{
    0%{scale: 0;}
    10%{}
    12%{}
    24%{}
    38%{}
    52%{}
    66%{
        scale: 0;
    }
    85%{
        scale: 0;
        
    }
    93%{
        border: 5px solid wheat;
    }

    94%{
        scale: 1.3;
    }
    95%{
        border: 5px solid transparent;
    }
    100%{
        border: 5px solid transparent;
    }
}

@keyframes Ani-decagono{
    0%{
        scale: 0;
    }
    12%{}
    24%{
        scale: 0;
    }
    38%{
        scale: 1;
    }
    52%{
        scale: 0;
    }
    66%{}
    80%{}
    94%{}
    100%{}
}
@keyframes Ani-decagono-line{
    0%{
        scale: 0;
    }
    12%{}
    30%{
        scale: 0;
    }
    38%{
        scale: 1;
    }
    52%{
        scale: 0;
    }
    66%{}
    80%{}
    94%{}
    100%{}
}
@keyframes Ani-decagono-line-line{
    0%{
    }
    12%{}
    30%{}
    38%{
        background-color: white;
    }
    40%{
        background-color: transparent;
    }
    52%{
    }
    66%{}
    80%{}
    94%{}
    100%{}
}

@keyframes Ani-triangle{
    0%{
        scale: 0;
    }
    12%{}
    24%{}
    38%{}
    52%{
        scale: 0;
    }
    66%{
        scale: 1;
    }
    80%{
        scale: 0;
    }
    94%{}
    100%{}
}
@keyframes Ani-triangle-line{
    0%{
        scale: 0;
    }
    12%{}
    24%{}
    38%{}
    55%{
        scale: 0;
    }
    62%{
        scale: 1.2;
    }
    80%{
        scale: 0;
    }
    94%{}
    100%{}
}
@keyframes Ani-triangle-line-line{
    0%{
        background-color: transparent;
    }
    12%{}
    24%{}
    38%{}
    59%{
        background-color: white;
        
    }
    61%{
        background-color: transparent;
    }
    61%{}
    80%{
    }
    94%{}
    100%{background-color: transparent;}
}
/*
0 arriba -c

12 baja -c
24 cierra -c
38 abre -o
52 cierra -o
66 abre -t
80 cierra -t 
94 abre -c
100 baja -c

*/