body, html{
    background-image: url(/img/fondomejorado.jpg);
    background-size: 400%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}



.tamaño{
    font-size: 35px;
}

#socialmedia{
    color: #0eb8b8;
}
#yo{
    background-image: url(/img/yo.jpg);
    height: 40rem;
    background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: 100%;

}
.cabeceras{
    background-color: turquoise;
}


/* social media */
.glassIco{
    --width: 100px;
    width: var(--width);
    height: var(--width);
    color:turquoise;
    font-size: 35px;
    border-radius: 50px;
    backdrop-filter: blur(2px);
    border: 5px solid rgb(6, 63, 57);
    border-right-color: rgb(16, 100, 92);
    border-bottom-color: #23796F;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    margin-left: 100px;
    margin-right: 100px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glassIco, .glassIco *{
    box-sizing: border-box;
    transition: 200ms;
}
.glassIco:before{
    content: "";
    position: absolute;
    display: block;
    width: 50%;
    height: 100%;
    background: turquoise;
    filter: blur(0px);
    transition: 400ms;
    transform: skewX(45deg) translateX(calc(var(--width) + 50%));
}

.glassIco:hover{
    transform: translateY(-20px);
}

.glassIco:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 - 50%));
}





.glassIcoLO{
    --width: 90px;
    width: var(--width);
    height: 90px;
    color:turquoise;
    font-size: 35px;
    border-radius: 100px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 30px rgba(0, 255, 247, 0.099);
    background-image: url(/img/logo-2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
    text-decoration: none;
    margin-left: 100px;
    margin-right: 100px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glassIcoLO, .glassIcoLO *{
    box-sizing: border-box;
    transition: 200ms;
}
.glassIcoLO:before{
    content: "";
    position: absolute;
    display: block;
    width: 50%;
    height: 100%;
    background: turquoise;
    filter: blur(0px);
    transition: 400ms;
    transform: skewX(45deg) translateX(calc(var(--width) + 50%));
}

.glassIcoLO:hover{
    transform: translateY(-20px);
}

.glassIcoLO:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 - 50%));
}


/* Glass GRaphic Design */

.glassIcoGD{
    --width: 100px;
    height: 100px;
    color: yellow;
    font-size: 35px;
    border-radius: 5px;
    background:#597410;
    border: 1px solid turquoise;
    border-right-color: turquoise;
    border-bottom-color: #23796F;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 30px rgb(238, 255, 0);
    text-decoration: none;
    margin: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.glassIcoGD, .glassIcoGD *{
    box-sizing: border-box;
    transition: 200ms; 
    
}
.glassIcoGD:before{
    content: "";
    position: absolute;
    display: flex;
    width: 10%;
    height: 100%;
    background: yellow;
    filter: blur(0px);
    transition: 400ms;
    transform: skewX(45deg) translateX(calc(var(--width) + 100%));
    opacity: 0.5;
}

.glassIcoGD:hover{
    transform: translateY(+50px);
}

.glassIcoGD:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 - 100%));
}

.glassIcoGD > *{
    opacity: 0.8;
}

/* Glass Animation */

.glassIcoAN{
    --width: 100px;
    height: 100px;
    color: turquoise;
    font-size: 35px;
    border-radius: 5px;
    background:#107474;
    border: 1px solid turquoise;
    border-right-color: turquoise;
    border-bottom-color: #23796F;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 30px rgb(0, 255, 247);
    text-decoration: none;
    margin: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.glassIcoAN, .glassIcoAN *{
    box-sizing: border-box;
    transition: 200ms; 
    
}
.glassIcoAN:before{
    content: "";
    position: absolute;
    display: flex;
    width: 10%;
    height: 100%;
    background: turquoise;
    filter: blur(0px);
    transition: 400ms;
    transform: skewX(45deg) translateX(calc(var(--width) + 100%));
    opacity: 0.5;
}

.glassIcoAN:hover{
    transform: translateY(+50px);
}

.glassIcoAN:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 - 100%));
}

.glassIcoAN > *{
    opacity: 0.8;
}

/* Glass Modeling */

.glassIcoMO{
    --width: 100px;
    height: 100px;
    color: red;
    font-size: 35px;
    border-radius: 5px;
    background:#741010;
    border: 1px solid turquoise;
    border-right-color: turquoise;
    border-bottom-color: #23796F;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 30px rgb(255, 0, 0);
    text-decoration: none;
    margin: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
   
}

.glassIcoMO, .glassIcoMO *{
    box-sizing: border-box;
    transition: 200ms; 
    
}
.glassIcoMO:before{
    content: "";
    position: absolute;
    display: flex;
    width: 10%;
    height: 100%;
    background: red;
    filter: blur(0px);
    transition: 400ms;
    transform: skewX(45deg) translateX(calc(var(--width) + 100%));
    opacity: 0.5;
}

.glassIcoMO:hover{
    transform: translateY(+50px);
}

.glassIcoMO:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 - 100%));
}

.glassIcoMO > *{
    opacity: 0.8;
}
/* iconos cristal de los niveles */
.glassIcoBL{
    --width: 100px;
    height: var(--width);
    color:turquoise;
    font-size: 35px;
    backdrop-filter: blur(2px);
    text-decoration: none;
    margin: 20px;
    opacity: 0.5;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glassIcoBL, .glassIcoBL *{
    box-sizing: border-box;
    opacity: 0.5;
    transition: 200ms;
}
.glassIcoBL:before{
    content: "";
    position: absolute;
    display: block;
    width: 200%;
    height: 50%;
    background: rgb(0, 255, 229);
    filter: blur(0px);
    transition: 1000ms;
    opacity: 0.5;
    transform: skewX(45deg) translateX(calc(var(--width)));
}

.glassIcoBL:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 - 30%));
    opacity: 0.5;
}



.glassIcoANIM{
    --width: 100px;
    height: var(--width);
    color:turquoise;
    font-size: 35px;
    backdrop-filter: blur(2px);
    text-decoration: none;
    margin: 20px;
    opacity: 0.5;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glassIcoANIM, .glassIcoANIM *{
    box-sizing: border-box;
    opacity: 0.5;
    transition: 200ms;
}
.glassIcoANIM:before{
    content: "";
    position: absolute;
    opacity: 0.5;
    display: block;
    width: 200%;
    height: 50%;
    background: rgb(54, 186, 173);
    filter: blur(0px);
    transition: 1000ms;
    transform: skewX(45deg) translateX(calc(var(--width)));
}



.glassIcoANIM:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 - 40%));
    opacity: 1;
}



.glassIcoPH{
    --width: 100px;
    height: var(--width);
    color:turquoise;
    opacity: 0.5;
    font-size: 35px;
    backdrop-filter: blur(2px);
    text-decoration: none;
    margin: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glassIcoPH, .glassIcoPH *{
    box-sizing: border-box;
    opacity: 0.5;
    transition: 200ms;
}
.glassIcoPH:before{
    content: "";
    position: absolute;
    opacity: 0.5;
    display: block;
    width: 200%;
    height: 50%;
    background: rgb(34, 118, 110);
    filter: blur(0px);
    transition: 1000ms;
    transform: skewX(45deg) translateX(calc(var(--width)));
}


.glassIcoPH:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 - 30%));
    opacity: 1;
}

.glassIcoHT{
    --width: 100px;
    height: var(--width);
    opacity: 0.5;
    color:turquoise;
    font-size: 35px;
    backdrop-filter: blur(2px);
    text-decoration: none;
    margin: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glassIcoHT, .glassIcoHT *{
    box-sizing: border-box;
    opacity: 0.5;
    transition: 200ms;
}
.glassIcoHT:before{
    content: "";
    position: absolute;
    opacity: 0.5;
    display: block;
    width: 200%;
    height: 50%;
    background: rgb(21, 72, 67);
    filter: blur(0px);
    transition: 1000ms;
    transform: skewX(45deg) translateX(calc(var(--width)));
}



.glassIcoHT:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 - 60%));
    opacity: 1;
}
/* fin de iconos cristal */

#Navegador{
    opacity: 0.2;
    backdrop-filter: blur(10px);
    transition: 500ms;
}
#Navegador:hover{
    transition: 500ms;
    opacity: 100;
    backdrop-filter: blur(10px);
}
#logodos{
    height: 80px;
}
#colornavuno{
    color: turquoise;
    font-size: x-large;
}

#colornavdos{
    color: #00ffdd;
    font-size: x-large;
}

#font{
    font-size: xx-small;
}

#logo{
    display: none;  

}

#sobremi{
    color: #ffffff;
    text-align: center;
    font-size: 25px;
    padding-top: 50px;
    padding-bottom: 50px;
    border: 10px solid #42c5c5;
    transition: 500ms;
}
#sobremi:hover{
    transition: 500ms;
    border: 10px solid #00ffdd;
    border-radius: 200px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    color: #00ffdd
}

.dropdown-item{
    color: #fff;
}

#modeling{
    background-image: url(img/Xokas.jpg);
    background-repeat: no-repeat;
    background-size: cover ;
    height: 30vh;
}

#animation{
    background-image: url(/img/Escenario.jpg);
    background-repeat: no-repeat;
    background-size: cover ;
    height: 30vh;
}

#Graphic{
    background-image: url(/img/12.jpg);
    background-repeat: no-repeat;
    background-size: cover ;
    height: 30vh;
}

.enlaces{
    text-decoration: none;
    color: #fff;
}

#modeling{
    background-image: url(/img/Portada_mejorada.jpg);
    background-repeat: no-repeat;
    background-size: cover ;
    background-attachment: fixed;
    background-position: center;
    height: 50vh;
}

#model{
    margin-top: 15%;
}

#divmodeling{
    height: 5%;
    border-radius: 20px;
    background-color: red;
    margin-left: 25%;
    margin-right: 25%;
    margin-bottom: 15%;
}

#animation{
    background-image: url(/img/Lanzadera.PNG);
    background-repeat: no-repeat;
    background-size: cover ;
    background-attachment: fixed;
    background-position: right;
    height: 50vh;
}

#anim{
    margin-top: 15%;
}

#divanimation{
    height: 5%;
    border-radius: 20px;
    background-color: aqua;
    margin-left: 25%;
    margin-right: 25%;
    margin-bottom: 15%;
}

#Graphic{
    background-image: url(/img/pose\ 2.jpg);
    background-repeat: no-repeat;
    background-size: cover ;
    background-attachment: fixed;
    background-position: left;
    height: 50vh;
}
#design{
    margin-top: 15%;
}

#divdesign{
    height: 5%;
    border-radius: 20px;
    background-color: yellow;
    margin-left: 25%;
    margin-right: 25%;
    margin-bottom: 15%;
}

#mi{
    margin-left: 25%;
}
#color1{
    background-color: #9EF2E7;
    
}

#color2{
    background-color: #62C1B4;
    
    height: 40px;
}

#color3{
    background-color: #31877B;
    
}

#color4{
    background-color: #15574E;
    
}

#barrauno{
    background-color: #9EF2E7;
}

#barrados{
    background-color: #62C1B4;
}

#barratres{
    background-color: #31877B;
}

#barracuatro{
    background-color: #15574E;
}

#b{
   font-size: medium ;
   color:#00ffff; 
}

#b:hover{
    color:#00ffff; 
    opacity: 1;
 }

#a{
    font-size: medium ;
    color:#19bdbd;    
}

#a:hover{
    content: "";
    color:#19bdbd;   
    opacity: 1; 
}

#p{
    font-size: medium ;
    color:#179e9e;
}

#p:hover{
    color:#179e9e;   
    opacity: 1; 
}

#h{
    font-size: medium ;
    color:#107474;
}

#h:hover{
    color:#107474;   
    opacity: 1; 
}




@media (min-width: 992px){
    body, html{
        background-image: url(/img/fondomejorado.jpg);
        background-size: 100%;
        background-repeat: repeat;
        background-attachment: fixed;
    }
    #yo{
        background-image: url(/img/yo.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: left;
        background-size: 50%;
    }
    #logo{
        display: block;
        margin-top: 30px;
    }

    #logonav{
        display: none;
    }

    #sobremi{
        color: #107474;
        text-align: left;
        padding-top: 20%;
        font-size: 35px;
        left: 50px;
        padding-top: 150px;
        transition: 500ms;
    }

    #sobremi:hover{
        
        transition: 500ms;
        border: 10px solid #00ffdd;
        border-radius: 300px;
        border-top-left-radius: 100px;
        border-bottom-right-radius: 100px;
        border-bottom-left-radius: 0px;
        color: #00ffdd;
    }

    #b{
        font-size: xx-large ;
     }
     #a{
         font-size: xx-large ;    
     }
     #p{
         font-size: xx-large ;
     }
     #h{
         font-size: xx-large ;
     }
     
    /* GLass nav */
.glassIcoCO{
    --width: 100px;
    height: var(--width);
    color:turquoise;
    font-size: 35px;
    border-radius: 10PX;
    backdrop-filter: blur(0px);
    text-decoration: none;
    margin: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glassIcoCO, .glassIcoCO *{
    box-sizing: border-box;
    transition: 200ms;
}
.glassIcoCO:before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    bottom: 20px;
    height: 10%;
    background: rgb(0, 255, 229);
    filter: blur(0px);
    transition: 500ms;
    border-radius: 20px;
    transform: skewX(45deg) translateX(calc(var(--width) + 50%));
}

.glassIcoCO:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 +50%));
}

.glassIcoAB{
    --width: 100px;
    height: var(--width);
    color:turquoise;
    font-size: 35px;
    border-radius: 10PX;
    backdrop-filter: blur(0px);
    text-decoration: none;
    margin: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glassIcoAB, .glassIcoAB *{
    box-sizing: border-box;
    transition: 200ms;
}
.glassIcoAB:before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    bottom: 20px;
    height: 10%;
    background: rgb(0, 255, 229);
    filter: blur(0px);
    transition: 500ms;
    border-radius: 20px;
    transform: skewX(45deg) translateX(calc(var(--width) + 50%));
}

.glassIcoAB:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 +50%));
}

.glassIcoSK{
    --width: 100px;
    height: var(--width);
    color:turquoise;
    font-size: 35px;
    border-radius: 10PX;
    backdrop-filter: blur(0px);
    text-decoration: none;
    margin: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glassIcoSK, .glassIcoSK *{
    box-sizing: border-box;
    transition: 200ms;
}
.glassIcoSK:before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    bottom: 20px;
    height: 10%;
    background: rgb(0, 255, 229);
    filter: blur(0px);
    transition: 500ms;
    border: 1px;
    border-radius: 20px;
    transform: skewX(45deg) translateX(calc(var(--width) + 50%));
}

.glassIcoSK:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 +50%));
}

.glassIcoPR{
    --width: 100px;
    height: var(--width);
    color:turquoise;
    font-size: 35px;
    border: 10px;
    
    border-radius: 10PX;
    backdrop-filter: blur(0px);
    text-decoration: none;
    margin: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glassIcoPR, .glassIcoPR *{
    box-sizing: border-box;
    transition: 200ms;
    
}
.glassIcoPR:before{
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    bottom: 20px;
    height: 10%;
    background: rgb(0, 255, 229);
    filter: blur(0px);
    transition: 500ms;
    border-radius: 20px;
    transform: skewX(45deg) translateX(calc(var(--width) + 50%));
}

.glassIcoPR:hover:before{
    transform: skewX(45deg) translateX(calc(var(--width) * -1 +50%));
}

}