@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;600;800&display=swap');

*{padding: 0; margin: 0; box-sizing: border-box; }
body {background:rgba(185, 202, 255, 0.63); font-family: 'Raleway', sans-serif;}
header{display: flex; flex-direction: column; align-items: center; justify-content: space-around;}
header article a {margin: 1rem 0 0 2rem;}
h1{ margin: 5rem 0 0 2rem; font-size: 2.5rem; font-family: 'Red Hat Display', sans-serif;color: rgb(247, 184, 1);font-weight: 800;}
nav a { text-decoration: none; font-weight: 600; color: rgb(70, 83, 98); }
    .linkvn02:hover{  font-size: 1.1rem; }
    

.datos-dgpc {display: flex;  flex-direction: column; font-size: 1.2rem; text-align: center;}
.menu a {margin: 0 0 0 0.5rem;}
    .plan:hover{ font-size: 1rem;  }
    .mapa:hover{ font-size: 1rem; }
    .app:hover{ font-size: 1rem; }
    .catedra:hover{ font-size: 1rem; }
    .grupo:hover{ font-size: 1rem;}
.compañeres{display: flex; justify-content: space-around; margin: 2rem 0 0 0;}
.compañeres a {font-size: 0.8rem; margin: 0 0.3rem 0 0; }


.materias {display: flex; justify-content: space-around; color: rgb( 154, 140, 152); }
.materias article { margin: 3rem 0 0 0;}
    ul li{list-style-type:none; text-align: left; margin: 0 0 0 2.5rem;}
    h2{margin: 12rem 0 0 0;color:rgb(247, 184, 1); font-size: 2rem;}
    .materiascursadas{font-size: 1.3rem; margin-left: 0;}
    .primeraño{font-weight: 600;}
    .segundoaño{font-weight: 600;}
    .terceraño{font-weight: 600;}


footer p {font-size: 0.7rem; color: rgb(95, 95, 95); text-align:center; margin: 2rem 2rem 2rem 2rem;}
.datos-academicos{margin: 5rem 0 0 0;}

*{margin: 1rem;}

/*imágenes*/
.avatar{ max-width: 50vw; height: auto;  border-radius: 70%; }
.logo-ocampo{ width: 30%;}

/*versión mediana */
@media (min-width: 576px) { 
    body{background: rgba(185, 202, 255, 0.63);} 
    .avatar{height: auto;max-width: 100%;}
}

/*versión grande*/
@media (min-width: 768px) { 
    body{background:rgb(235, 235, 235);} 
    .avatar{height: auto;max-width: 100%;}

    header{display: flex; flex-direction: row; align-items: center; justify-content: space-around;}
    header article a {margin: 8rem 0 0 2rem;}

    .datos-academicos{margin: 5rem 15rem 0 15rem;}

    nav a{  text-decoration: none; font-weight: 600; font-size: 1.5rem; color: rgb(70, 83, 98); }

.datos-dgpc{display: flex; justify-content: space-around; flex-direction: row;}
    .plan:hover{ font-size: 1.6rem;  }
    .mapa:hover{ font-size: 1.6rem; }
    .app:hover{ font-size: 1.6rem; }
    .catedra:hover{ font-size: 1.6rem; }
    .grupo:hover{  font-size: 1.6rem; }
.menu {padding: 3%;}
.menu a{margin: 0 0 0 1rem;}
.compañeres{display: flex; justify-content: space-around; margin: 2rem 0.5rem 0 0;text-align: left;}
.compañeres a {font-size: 1rem; margin: 0 1rem 0 0; }
}