@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap');

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

body {
    background: rgb(27,37,41);
    background: linear-gradient(0deg, rgba(27,37,41,1) 0%, rgba(37,45,60,1) 100%);
    color: hsl(0, 0%, 100%);
    font-family: 'Poppins', sans-serif;

    min-height: 100dvh;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: white;
    font-weight: 900;
}

ul,
ol {
    list-style: none;
}

p,h1,h2,h3 {
    margin-bottom: 0,5em;
}

header, footer {
    background-color: rgba(15,20,23,0.87);
    padding: 1em;
    flex-grow: 0;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, 0.164);
}

section{
    padding-block-end: 2rem;
}

.contenedor{
    max-width: 65rem;
    margin-inline:auto;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav ul {
    margin-block: 0;
    display: flex;
    gap: .25em;
}

.vm31, header nav a {
    color: hsl(0 0% 95%);
    display: block;
    width: 5em;
    padding-block: .25em;
    text-align: center;
    transition: .3s;
}
    
.vm31:hover, .vm31:focus-visible, header nav a:hover, header nav a:focus-visible {
    color: rgb(1, 170, 114);
}

main{
    padding: 2em;
}

.info {
    margin: auto;
    display: flex;
    flex-direction: column;
    max-width: 20em;
    align-items: center;
    text-align: center;
}

.info p {
    font-weight: 100;
}

.info img {
    border-radius: 50%;
    width: 50vw;
    height: 50vw;
    max-width: 15em;
    max-height: 15em;
    box-shadow: 0 .35em .5em rgba(0, 0, 0, .35);
    margin-bottom: 1em;
}

.botones {
    margin: auto;
    margin-bottom: 2em;
    display: flex;
    justify-content: center;
    color: hsl(0 0% 95%);
    padding-block: .25rem;
    border-radius: 0.25em;
    text-align: center;
    transition: .3s;
}

.botones a {
    margin-inline: 0.5em;
    background-color: rgb(1, 170, 114);
    padding: 0.5em;
    border-radius: 0.5em;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.botones a:hover,
.botones a:focus-visible {
    color: rgb(1, 170, 114);
    background-color: white;
}

.materias h2 {
    text-align: center;
    margin: 2em;
    border-block-end: 2px solid rgb(1, 170, 114);
    padding-block-end: 1rem;
}

.contenedora {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
   text-align: center;
}

.anio {
    padding: 2em;
    margin: 1em;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

}

.anio h3 {
    padding-bottom: 1rem;
}

.anio > ul {
    font-size: 90%;
    color: rgb(0, 255, 170);
}

.analisis {
    margin: auto;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    align-items: center;
    text-align: center; 
}

.analisis h1 {
    text-align: center;
    margin: 2em;
    border-block-end: 2px solid rgb(1, 170, 114);
    padding-block-end: 1rem;
}

.portfolio {
    margin: auto;
    display: flex;
    flex-direction: column;
    max-width: 30em;
    align-items: center;
    text-align: center; 
    padding: 2em;
    margin: 1em;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.portfolio h4, p {
    margin-top: 1em;
}

.portfolio p {
    font-weight: 200;
}

.equipo h2 {
    text-align: center;
    margin-top: 2em;
    padding-top: 1em;
    border-block-start: 2px solid rgb(1, 170, 114);
}

.rotulos{
    margin-top: 2em;
    padding-top: 1em;
    border-block-start: 2px solid rgb(1, 170, 114);
}

.rotulos li {
    padding: 1em;
    margin: 1em;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    display: flex;
    justify-content: center;
    align-items: center;
}

.rotulos li img {
    margin: 1rem;
}

.contenedora_2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
     text-align: center;
}

.academico {
    padding: 2em;
    margin: 1em;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

}

.academico img {
    width: 5em;
    padding: 0.5em;
    margin-block-end: 1em;
}

footer {
    font-weight: 10;
    font-size: small;
}