@import url('colores.css');
/*CONFIGURACIO DEFIGURA*/
.figura{
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    z-index: 0;
}
/*TAMANIOS DE FIGURA*/
.figuraGrande{
    width: 700px;
    height: 700px;
}

.figuraMediana{
    width: 500px;
    height: 500px;
}

.figura400{
    width: 400px;
    height: 400px;
}

.figuraPequena{
    width: 72px;
    height: 72px;
}

.figura300{
    width: 300px;
    height: 300px;
}

.figura250{
    width: 250px;
    height: 250px;
}

.figura80{
    width: 80px;
    height: 80px;
    position:relative;
    z-index: 0;
}

.figuraSmall{
    width: 15px;
    height: 15px;
}
/*COLORES DE FIGURA*/
.colorFirst{
    background: var(--first-color);
}

.colorSecond{
    background: var(--second-color);
}

.colorThird{
    background: var(--third-color);
}
/*POSICION DE FIGURAS*/
.derecha{
    left: 120px;
    bottom: 0px;
}

.medio{
    left: 500px;
    bottom: 0px;
}

.izquierda
{
    position: absolute;
    z-index: 0;
}

.izquierda2
{
    position: absolute;
    z-index: 0;
    left: -50px;
}

.left200{
    left: 200px;
    bottom: -80px;
}

.left-200{
    left: -200px;
    bottom: 0px;
}

.leftt-200{
    left: -200px;
    top: 0px;
}

.left-350{
    left: -350px;
    bottom: 300px;
}

.right50{
    top: -50px;
    right: 50px;
}

.right-320{
    right: -320px;
    bottom: -150px;
}

.derechaSuperior{
    top: -690px;
    right: 190px;
}

.derechaArriba{
    top: -300px;
    right: -250px;
}

.medioCaja{
    margin:0px auto;
}

.z1{
    top: 100px;
    left: 250px;
}
.z2{
    top: 50px;
    left: 850px;
}
.y3{
    top: 250px;
    left: 300px;
}
.z4{
    top: 300px;
    left: 750px;
}
.z5{
    top: 300px;
    left: 400px;
}
.y1{
    top: 50px;
    left: 400px;
}
.y2{
    top: 75px;
    left: 750px;
}
.z3{
    top: 200px;
    left: 200px;
}
.y4{
    top: 250px;
    left: 950px;
}
.y5{
    top: 200px;
    left: 800px;
}

.izquierdaSuperior{
    position:absolute;
    left: -300px;
    top: -100px;
}

.derechaSuperior2{
    top: -400px;
    right: -50px;
}
/*----------------------*/

@media (max-width:780px){
    .figuraGrande {
        width: 400px;
        height: 400px;
    }
}