body {
    background: var(--primary-color-);
}

header {
    background: var(--primary-color-);
    padding: 1rem;
    border-bottom: 10px solid red;
    height: 2rem;
    position: sticky;
        margin: 10px;
    top: -20px;
}
li {
    display: inline;
}
li a{
    font-size: large;
    color: var(--third-color-);
    padding-right: 1rem;
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

li a:hover{
    color: #f76c6c;
    font-size: x-large;
    transition: 0.6s;
}

li a:active{
    color: orange;
}

:root{
    --primary-color-: #25274d;
    --secondary-color-: #1f2833;
    --third-color-: white;
}

.light-theme{
    --primary-color-: #fffffff3;
    --secondary-color-: #d7d7d7;
    --third-color-: #f76c6c;
}

#icon {
    width: 30px;
    cursor: pointer;
}

#about {
    
    display: grid;
    width: 100%;
    height: auto;
    /*border: 5px solid black;*/

    grid-template-areas: 
        "about__description"
        "about__ilustration";

    ;
    grid-template-columns: repeat(2, 50%);
  
}
#about > .about__description{
    /*border: 5px solid rgb(221, 125, 229); */
    border-radius: 20px;
    text-align: center;
    background: var(--secondary-color-);
    color: var(--third-color-);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 1rem;
}


#about > .about__ilustration {
    background-image: linear-gradient(289deg, #f76c6c 20%, var(--primary-color-) 80%);
   /* border: 5px solid rgb(179, 55, 55);*/
    text-align: center;
    align-self:center;

}

  
#skills {
    color: white;
    display: grid;
    grid-gap: 20px 50px;
    text-align: center;
    width: 100%;
    height: auto;
    /*border: 5px solid rgb(28, 255, 36);*/
    grid-template-areas:
        "h1"
        "HTML"
        "CSS"
        "Js"
        "Python"
        "Django"
        "Flask"
        "MySql";
        grid-template-columns: repeat(3, 3,30%) ;
    
}

#skills > .h1, .html, .css, .js, .python, .django, .flask, .mysql {

    border: 5px solid rgb(215, 55, 55);
}

.h1 {
    grid-column: 1/4;
    background-color: #f76c6c;
}

.html, .css, .js, .python, .django, .flask, .mysql{
    background-color: var(--secondary-color-);
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 5%;
    color: var(--third-color-);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/*skills glass efects*/
.html, .css, .js, .python, .django, .flask, .mysql{
    background: linear-gradient(135deg, rgba(255,255,255, 0.1), rgba(255, 255, 255, 0));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 32px;
    box-shadow: 30px 10px 15px 5px  #1e2834;
}

.html:hover, .css:hover, .js:hover, .python:hover, .django:hover, .flask:hover, .mysql:hover{
    border-color: yellow;
    width: 101%;
    transition: 1.9s;
    border-radius: 300px;
}


.imgs{
    width: 45%;
    height: 65%;
}

#education__conteiner{
    display: grid;
    grid-gap: 20px 50px; 
    text-align: center;
    width: 100%;
    height: auto;
    /*border: 5px solid rgb(100, 28, 255);*/
    grid-template-areas:
        "education"
        "uned"
        "academia"
        "alura"
        "ucr";
        grid-template-columns: repeat(2, 47.5%) ;

}

#education__conteiner > .education, .uned, .academia, .alura, .ucr{
    border: 5px solid #f76c6c;
}

.education {
    grid-column: 1/3;
    background-color: #f76c6c;
    color: var(--third-color-);
    width: 100%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

h1{
    width: 100%;
}
.uned, .academia, .alura, .ucr{
    background-color: var(--secondary-color-);
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
    color: var(--third-color-);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


#contact__conteiner{
    display: grid;
    text-align: center;
    width: 100%;
    height: auto;
    /*border: 5px solid rgb(2, 3, 2);*/
    grid-template-areas:
        "contact"
        "linkedin"
        "email"
        "phone"
        "github";
        grid-template-columns: repeat(4, 25%) ;
}

#contact__conteiner > .contact, .linkedin, .email, .phone, .github {
    background-color: var(--secondary-color-);
    /*border: 5px solid rgb(8, 4, 252);*/
    color: var(--third-color-);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

}

.contact {
    grid-column: 1/5;
}

.linkedin:hover, .email:hover, .phone:hover, .github:hover{
    width: 105%;
    background-color: darkblue;
    position: relative;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    animation: cssAnimation_0 4705ms infinite ease-out;
}

.logos{
    width: 30%;
    height: 50%;
    padding: 1%;
}

#contact__conteiner a{ 
    color: var(--third-color-);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
}

.linkedin, .email, .phone, .github{
    color: var(--third-color-);
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    border-radius: 100px;
    box-shadow: inset 20px 20px 39px #070a10, inset -20px -20px 39px#1b263e;

  }
  
  @keyframes cssAnimation_0 {
    to {
      border: 0px dashed rgba(100, 100, 100, 1);
      border-radius: 1px;
    }
  }

footer{
    background: var(--secondary-color-);
    text-align: center;
    width: 100%;
    height: auto;
    /*border: 5px solid rgb(40, 215, 40); */
}
.footer{
    /*border: 5px solid rgb(92, 92, 92);*/
    color: var(--third-color-);
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: small;
}

.footer__img{
    position: relative;
    text-align: left;
    color: var(--third-color-);
}

.fondo{
    max-height: 170px;
    width: 30%;
}

.credits_text{
    margin-left: 26%;
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translate(-50%, -50%);
}


/*cellphone*/
@media all and (max-width: 600px) {

    li a{
        padding-right: 0.3rem;
        font-size: smaller;
    }

    li a:hover{
        font-size: large;
    }

    .header{
        padding-left: 0%;
        padding-left: 0%;
        margin: 1px;
    }
    /*.cuerpo {
        background: #f76c6c;
    }*/

    .about__description{
        grid-column: 1/3;
    }
    #about{
        height: auto;
        grid-template-columns: repeat(2, 50%);
    }

    .about__ilustration{
        grid-column: 1/4;
    }

    #skills{
        grid-template-columns: 46% 46%;
        grid-gap: 20px 35px; 
        margin: 0%;
    }

    .h1{
        grid-column: 1/3;
    }

    .html, .css, .js, .python, .django, .flask, .mysql{
        margin-right: 5%;
        margin-left: 5%;
    }




    #education__conteiner{
        grid-template-columns: repeat(2, 42.5%) ;
    }

    #contact__conteiner p{
        position:absolute;
        left:0px;
        top:-500px;
        width:1px;
        height:1px;
        overflow:hidden;

        
    }

    #contact__conteiner{
        grid-template-areas:
        "contact"
        "linkedin"
        "email"
        "phone"
        "github";
        grid-template-columns: repeat(2, 50%) ;
    }

    .contact{
        grid-column: 1/3
    }

    .linkedin, .email, .phone, .github{
        clip-path: inset(0 10% 0 10%);
    }


    .education{
        grid-column: 1/3;
        border: none;


    }
    #education__conteiner > .uned, .academia, .alura, .ucr{
        grid-column: 1/3;
    }

    .fondo{
        max-height: 250px;
        width: 60%;
    }
    
    .credits_text{
        position: absolute;
        margin-left: 2%;
        top: 50%;
        left: 55%;
        transform: translate(-50%, -50%);
    }
    

}