@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

*{margin: 0; padding: 0; box-sizing: border-box;}


body
{
    font-family: 'Archivo', sans-serif;
    background: #FFFFFF;
    background: -webkit-linear-gradient(to left, #FFFFFF, #d8bad4);
    background: linear-gradient(to right, #FFFFFF, #d8bad4);
    margin:auto;
}

a:link, a:visited, a:active {
    text-decoration:none;
    color:black;
}

a:hover, a:focus {
    border-bottom: 0.188rem solid black;
}

h1 {
    font-size: 6rem;
    font-weight: 700;
    padding: 5rem 0 4rem 0;
}

h2{
    font-size:3.5rem;
    font-weight: 500;
}

h3{
    font-size:2rem;
    font-weight: 500;
    padding: 1.5rem 2rem;
}

p{
    font-size:1.75rem;
    font-weight: 400;
}


.menu{
    padding: 4rem 0 0 7rem;
}

.menu a{
    margin-right: 3rem;
    font-size:1.15rem;
}


.iconos{
    width: 2rem;
    height: auto;
}

.flex-horizontal{
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
}

.profile{
 padding: 7rem 7rem;
 height: 100vh;
 position: relative;
}

.wrapper-datos{
    position: absolute;
    bottom:11rem;
    }

.estilos-marquee{
    background-color: black;
    color:white;
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-right: -0.1rem;
}

.wrapper-marquee{
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}

.wrapper-materias{
    background-color: rgb(252, 248, 248);
    margin-top:  -0.1rem;
    padding: 7rem 7rem;

}

   .materia {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:2.25rem 0;
    border-bottom:1px solid #212121
   }

   .materia .titulo{
    font-size:1.75rem;
    line-height:1.5
   }

   .materia .nivel {
    font-size:1.15rem;
    line-height:1.5
   }

    footer{
       background-color: black;
       color:white;
       padding: 7rem 7rem 4rem 7rem;
   }

   footer p, footer a{
    font-size:1.15rem;
    font-weight: 400;
    line-height:1.75rem;
   }

   footer a{
       margin-left:2rem;
   }

   footer .link-menu{
       color:white;
   }

   footer a:hover, footer a:focus {
    border-bottom: 0.188rem solid #d8bad4;
    color:#d8bad4;
}


.wrapper-redes{
    justify-content: space-between;
    position: relative;
    margin-top:12rem;
}

.redes{
    display:flex;
    justify-content: space-between;
}

@media (max-width: 768px) {

    h1{
        font-size:2.75rem;
    }

    h2 {
        font-size: 3rem;
        font-weight: 500;
        line-height: 3.25rem;
    }

    h3{
        font-size:1.75rem;
        padding: 1.5rem 0 1rem 1.5rem;
    }

    .menu{
        padding: 3rem 0 0 3rem;
    }

    .menu a{
        margin-right: 1rem;
    }

    .profile{
        padding: 3rem 3rem;
       }

    .wrapper-materias{
    padding: 3rem 3rem;
    }

    .wrapper-materias .titulo{
        line-height: 2rem;
        font-size: 1.65rem;
    }

    footer{
        padding: 3rem;
        height: 100vh;
        position: relative;
    }

    .wrapper-redes{
        display:flex;
        flex-direction: column;
        align-content: flex-end;
        position: absolute;
        bottom:3rem;
    }

    .wrapper-datos h1{
    padding-bottom: 10rem;
    }

    .wrapper-redes p{
        display:none;
    }

    .redes{
        display:flex;
        justify-content: space-between;
    }

    footer a{
        margin-left:0;
        padding-right: 2rem;
    }

    .wrapper-datos {
        position: relative;
        bottom:5rem;
        }

    .iconos{
        height: 2rem;
        margin-top: 1.5rem;
    }

    .flex-iconos{
        display:flex;
        flex-direction: row;
        align-items: flex-start;
    }

}


@media (max-width: 375px) {

    .wrapper-datos h1{
        padding-bottom: 3rem;
        }

    h1{
        font-size:2.5rem;
    }


}