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

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

    body{
    background-color: #385efc;
    font-size:100%; 
    font-family:'Nunito', sans-serif;
}

    a{
    text-decoration: none;
    color:#FFF;
}

    li {
    list-style: none;
}

header{ 
    background-color: #fca2d5; 
    width:100%;
    }

header li {
    display: inline-block;
}

h1{ color:#fff;
    font-size:40px;
    margin-top:1rem;
    margin-bottom:1rem;
    text-align: center;
    }   

 
h2{ color:#fff;
}
      
h3{ font-size: 1.7rem;
    color: #fff;
    margin-bottom: 1rem; 
}
      
h4{ color: #fff; 
}
      
header{ 
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgb(0, 4, 255) 0%, rgb(25, 6, 134) 100%); 
    padding:1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position:fixed;
    width:100%;
}
      

nav img {
    width:250px;
}


nav ul {
    margin-top:1rem;
    display:flex;
    align-items: center;
}
      
header a span { 
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size:40px;
}
      
nav ul li a {
    padding:1rem;
    font-size:20px !important;
    color: #fff;
    font-weight: 700;
}
nav ul li a:hover {
    color: #000;
}     


main {
    padding-top: 8.125rem;
}
      

       
hr{
    width: 19.75rem;
    margin-bottom:1rem;
}
      
.alumna{     
    display:flex;
    align-items: center;
    flex-direction: column;
    padding-top:1rem;
    padding-bottom:2rem;
    background-color: #000;
}

          
.alumna p {
    color:#fff; 
    font-size: 20px;
    padding-top:0.5rem;
}

.grupo{ margin-bottom:1rem;
}   

img.fotito {
    border-radius:50rem;
}

 

#cursos h2{
    display:flex;
    align-items: center;
    flex-direction: column;
    margin-top:1rem;
    margin-bottom:2rem;
    color: #fff;
    font-size:2rem;
}
      
#cursos {
    padding: 2rem 0 ;
    background-color: #385efc;
}
      
.materias > li {
    width: 90%;
    padding: 2rem;
    margin: auto;
    color: #fff;
    box-shadow: 0 0.5rem 0.5rem rgb(0,0,0,0.5);
    background: #000000ad; 
    text-align: center;
    margin-bottom:1rem;
    border-radius:5rem;
}

.datos-obligatorios{ 
    background: rgb(0,0,0);
    padding:2rem;
}
      
.datos-obligatorios p , .datos-obligatorios h3, .datos-obligatorios h4 {
    color: #fff;
}


footer{
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgb(0, 4, 255) 0%, rgb(25, 6, 134) 100%); 
    padding:2rem;
    text-align: center;
    color:#fff;
} 
          
/* ------ DESKTOP ------ */


@media (min-width:576px) {
    

    h1{ color:#fff;
    font-size:50px;
    margin-top:1rem;
    margin-bottom:1rem;
    }   

    h2{ color:#fff;
    }

    h3{ font-size: 1.7rem;
    color: #fff;
    margin-bottom: 1rem; 
    }

    h4{ color: #fff; 
    }

    header {
        padding: 1rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        position: fixed;
        width: 100%;
        border-bottom: 0.5rem solid #385efc;
    }

    main {
    padding-top: 8.125rem;
    }

    nav ul {
    display:flex;
    align-items: center;
    }

    header a span { 
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size:40px;
    }

    nav ul li a {
    padding:1rem;
    font-size:20px !important;
    color: #fff;
    }

 
    hr{
    width: 19.75rem;
    margin-bottom:1rem !important;
    } 

    .alumna {
        display: flex;
        align-items: center;
        flex-direction: column;
        background: #000;
    }
    .alumna p {
    color:#fff; 
    font-size: 20px;
    }

    .grupo p{ 
    color:#fff;
    font-size:30px; 
    margin-bottom:2rem; 
    }
    
     
    #cursos {
        padding: 0rem 4rem;
        margin: auto;
        background: #385efc;
    }
    

    #cursos h2{
    display:flex;
    align-items: center;
    flex-direction: column;
    margin-bottom:2rem;
    color: #fff;
    font-size:30px;
    }

    .materias{
    display:flex; 
    }   

    .materias h3 { 
    color: #fff;
    }

    .materias > li {
        padding: 3rem;
        color: #fff;
        box-shadow: 0 0.5rem 0.5rem rgb(0 0 0 / 50%);
        border-radius: 10%;
        min-height: 325px;
    }
    .materias > li:not(:last-child) {
    margin-right:1rem;

    }

    .datos-obligatorios{ 
    padding:5rem;
    display: flex;
     
    }

    .datos-obligatorios p , .datos-obligatorios a {
        color: #fff;
    }

  

    footer{
    padding:1rem;
    font-size:12px;
    } 

 
}