:root{
    --aquaclaro: #05F2DB;
    --aquaoscuro: #0A7368;
    --negro: #131311;
    --blanco: #F2F2F2;
    --naranja: #FF7C1A;
    --titulo: 'Jost', sans-serif;
    --texto: 'Montserrat', sans-serif;
    --italica: 'Edu NSW ACT Foundation', cursive;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
}

body, 
.card{
    background-color: #131311;
}

/* Navbar */
    .logo-nav img{
        width: 80px; 
        height: auto; 
        margin-left: 3.5rem;
    }

    .offcanvas-title{
        color: var(--aquaclaro);
    }

    .navbar-bar{
        margin-right: 60px;
    }

    .nav h5{
        font-family: var(--titulo);
    }

    .nav-link{
        font-family: var(--texto);
        color: var(--aquaclaro);
        font-size: .9rem;
    }

    .nav-link:hover,
    .navbar-social svg:hover{
        color: var(--naranja);
        fill: var(--naranja);
    }


/* Bienvenida */
    #bienvenida img{
        margin-top: 2rem; 
        max-height: 380px;
    }

    #bienvenida .card-title{
        font-family: var(--titulo);
        font-size: 3rem;
    }

    .card-body{
        color: var(--blanco);
        padding-top: 3rem;
    }

    .card-body .card-text{
        font-family: var(--texto);
        font-size: 1.2rem;
        padding-top: 30px;
    }

    .card-body .hashtag{
        font-size: 1.7rem;
        padding-top: 45px;
    }

    .btn-seccion{
        border-color: var(--aquaoscuro);
        margin-top: 30px;
        padding: 5px 15px;
    }

    .btn-seccion a,
    .subtitulo,
    .texto_vertical{
        color: var(--aquaclaro);
        font-family: var(--titulo);
    }

    .btn-seccion:hover{
        border-color: #FF7C1A;
    }

    .btn-seccion a:hover{
        color: #FF7C1A;
    }

/* Sobre mí */
    #aye{
        padding-top: 3rem;
    }
    #sobre_mi .card,
    #voluntariado .card{
        width: 90%;  
        margin: 60px auto; 
        border-style: none;
    }

    #complemento .card{
        width: 90%;  
        margin: 10px 60px auto; 
        border-style: none;
    }

    .logo-sobremi{
        padding-left: 6rem;
    }

    .logo-sobremi img{
        max-height: 250px;
    }

    #sobre_mi .card-text,
    .hab1 p,
    .hab2 p,
    .alumni p,
    .alumni h4,
    .expertise p,
    .expertise h4{
        font-family: var(--texto);
        color: var(--blanco);
    }

    #sobre_mi .card-text{
        padding-top: 1rem;
    }

    .alumni h4,
    .expertise h4{
        color: var(--naranja);
        font-size: 1rem;
    }

    .alumni h4,
    .alumni p,
    .expertise h4,
    .expertise p{
        font-size: 1rem;
    }

    .frase_weebly{
        color: var(--naranja);
        text-align: center;
        margin-top: 40px;
        font-family: var(--italica);
        font-size: 1.4rem;
    }

/* Habilidades */
    .texto_vertical{
        -webkit-transform: rotate(-90deg);
        margin: 50px -120px;
    }

    .grid_hab{
        display: grid;
        grid-template-columns: 12% 40% 40%;
        grid-template-rows: 300px;
        grid-template-areas: "tv hab1 hab2";
        gap: 20px;
        padding: 20px 40px;
        margin-top: 40px;
    }

    .tv{
        grid-area: tv;
    }

    .hab1 ul,
    .hab2 ul{
        list-style-type: none;
        padding-left: 10px;
    }

    .hab1 li p,
    .hab2 li p{
        padding-top: 2rem;
    }

/* Alumni & Expertise */
    .grid_aye{
        display: grid;
        grid-template-areas: "alumni expertise";
        gap: 50px;
        margin:20px 50px;
        padding: 0 30px;
    }

    .logos{
        display: flex;
        justify-content: space-evenly;
        margin-top: 60px;
    }

    .logos img{
        border-radius: 50%;
        width: 5.5rem;
        height: auto;
    }

/* Footer */
    #footer .card-header{
        border-color: var(--aquaclaro);
    }
    
    #footer .card-body{
        padding-top: 0;
    }

    #footer .navbar-brand img{
        width: 8rem;
        height: auto;
    }

    .btn-primary{
        border-color: var(--aquaclaro);
        background-color: var(--aquaclaro) ;
        color: var(--negro);
        font-family: var(--titulo);
        font-size: 1rem;
        margin-right: 20px;
    }

    .btn-primary:hover{
        border-color: #FF7C1A;
        background-color: var(--naranja);
    }

    .btn-primary a:hover{
        color: #FF7C1A;
    }

    .p-2 svg:hover{
        fill: var(--naranja);
    }
    


/* Media Quaries */
    @media screen and (max-width: 1023px) {
        #bienvenida .card-title{
            font-size: 2.2rem;
        }
        .card-body{
            padding-top: 40px;
        }
        .card-body .hashtag{
            font-size: 1.3rem;
            padding-top: 20px;
        }
        #sobre_mi .card{
            margin-top: 10px;
        }
    }
    @media screen and (max-width: 767px) {
        .grid_aye{
            grid-template-areas: "alumni"
                                "expertise";
            padding: 0;
        }

        .grid_hab{
            display: grid;
            grid-template-columns: 25% 75%;
            grid-template-rows: 350px;
            grid-template-areas: "tv hab1" 
                                "tv hab2";
            padding: 0;
            gap: 0;
        }

        .hab1,
        .hab2{
            padding-right: 40px;
        }

        .texto_vertical{
            margin: 10px -120px;
        }
    
        .logos img{
            border-radius: 50%;
            width: 2.5rem;
            height: auto;
        }
        
        
    }