@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,300;0,400;0,600;1,600;0,800;1,500;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');


/*   selector {propiedad:valor;}   
font family es para la tipografia
text align es para centrar o descentrar*/

/*   el atajo para el color es ctrl e */



/* Versión Mobile*/


*{padding: 0%; margin: 0%; box-sizing: border-box; transition: all 1s;}

header {
    text-decoration: none;
    text-align: center;
    }
    header p {
    padding-bottom: 2rem; padding-top: 1rem;
    }
    header p a {
    text-decoration:underline;
    font-family: 'Urbanist', sans-serif; font-weight: 800; font-style: italic;
    color: rgb(0, 0, 0);
    text-shadow:3px 1px 2px #e0c8b4;
    width: 100%
    }
    header img {
    margin-top: 1rem;
    }
    .link-activo:hover {  /*revisar*/
    padding:0.5rem;
    display:inline-block;
    border-radius: 45%;
    background: #e0c8b4;
    width: 30%;
    }
    .mifoto {
    border-radius: 17%;
    width: 55%;
    padding: 0.2rem;
    border: 0.1rem solid #000000; 
    }
    h1 {
    margin-top: 1rem;
    margin-left: 0; margin-right:0;
    padding: 1rem; padding-bottom: 0.3rem;
    font-family:'Urbanist', sans-serif; font-weight: 800; font-style: normal;
    font-size: 1.5rem;
    color: rgb(0, 0, 0);
    text-shadow:3px 1px 2px #e0c8b4;
    background:#e9dcd2;
    border-top-left-radius: 10px; border-top-right-radius: 10px;
    }
    h2 {
    padding: 1rem; padding-top: 0.5rem;
    background: #e0c8b4;
    font-family:'Urbanist', sans-serif; font-weight: 600; font-style:normal;
    font-size: 1rem;
    color: rgb(0, 0, 0);
    border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
    }


body{
    background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%); 
    text-align: center;
    font-family:'Urbanist', sans-serif; font-weight: 400;
    padding: 2rem;
    }
    ul li {
    list-style-type: none;
    padding-left: 0.5rem;
    }
    h3 {
    padding: 2rem; padding-bottom: 1rem;
    font-family:'Urbanist', sans-serif; font-weight: 800; font-style: normal;
    color: rgb(0, 0, 0);
    font-size: 1.2rem;
    }
    .flex-box {
    display: flex;
    flex-flow:column;
    text-align: left;
    }
    body section article {
    padding:1rem;
    }
    .italica{
    font-weight: 300; font-style: italic;
    }
    h4 {
    padding-bottom: 0.5rem;
    font-weight: 900;
    }
    .article-1{
    background: #f8f3ed ;
    border-radius: 20px;
    margin-bottom: 0.5rem;
    }
    .article-2{
    background: #e9e0da ;
    border-radius: 20px;
    margin-bottom: 0.5rem;
    }
    .article-3{
    background: #e2d4c9 ;
    border-radius: 20px;
    margin-bottom: 0.5rem;
    }
    .article-4{
    background: #e2d1c3 ;
    border-radius: 20px;
    margin-bottom: 0.5rem;
    }
    .datos-academicos{
    text-align:left;
    }
    .dgpc {
    padding-top: 1rem;
    font-weight: 800; font-style: italic;
    }
    .nav-alumnes {
    display: flex; justify-content: space-around;
    }
    body section nav div a {
    text-decoration:underline;
    color: rgb(0, 0, 0);
    text-shadow:3px 1px 2px #e0c8b4;
    font-weight: 600; font-style: italic;
    }
    body section nav{
    padding-top: 4rem; padding-bottom: 3rem;
    }


footer p {
    padding: 2rem;
    color: rgb(0, 0, 0);
    font-size: 0.5rem;
    font-family: 'Libre Baskerville', serif; 
    }
    .logo-ocampo{
    width: 70%;
    }









/* Versión Web*/
@media (min-width:576px) {
    .mifoto {
    width: 20%;
    }
    h1{
    font-size: 2rem;
    }
    h2{
    font-size: 1rem;
    }
    .flex-box {
    display: flex;
    flex-flow:wrap;
    justify-content: space-between;
    }
    .article-1{
    width: 24.5%;
    }
    .article-2{
    width: 24.5%;
    }
    .article-3{
    width: 24.5%
    }
    .article-4{
    width: 24.5%;
    }
    h3 {
    font-size: 1.2rem;}
    .logo-ocampo{
    width: 20%;}
}