@charset "utf-8";


/**GENERAL**/

body {
    background-color:whitesmoke;
}

main {
    background-color: rgba(220, 220, 220, 0.58);
    padding: 2rem;
}

h1 {

    font-family: 'Varela Round', sans-serif;
    font-size: 1.3rem;
    color: #AA92A8;  

}

h2 { color: black;
    font-family: 'Varela Round', sans-serif;
    font-size: 1.3rem;

}

h3 {color: white;
    font-size: 1rem;
    text-align: center;
    font-family: 'Varela Round', sans-serif;
}

p {color: darkslategrey;  
    font-family: 'Domine', serif;

}


/**NAV**/

nav {
    background-color: whitesmoke;
    border-bottom-style: groove;
    border-bottom-color: rgba(220, 220, 220, 0.3);
    width: 100%;
}

nav ul {
    list-style: none;
    padding: .1rem;
    display: flex;
    justify-content: space-around;
    
    
}

nav ul li a {
    text-decoration: none;
    font-weight: 600;
    color: #AA92A8;    
}

nav ul li a:hover {
    text-decoration: none;
    font-weight: 800;
    color: white;
    background-color: #AA92A8;
    padding: .2rem;
}


/**PERFIL**/

.perfil {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    margin-bottom: 2rem;
}

.about {
    text-align: center;
    list-style: circle;    
}


/**TABLA**/

.tabla {
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}

.cuadro {
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: #AA92A8;
    border-radius: 2rem;    
    padding: .7rem;
    margin: .5rem;    
}

.tabla p {
    font-size: 1.5rem;
    font-family: 'Domine', serif;
    color:white;
    margin: 0;
}

.tabla h5 {
    color: #2a2c67;
    margin: 0;
    padding: 0;
}


/**LISTADO MATERIAS**/

.dropdown-container h2{
    border-radius: 4rem;
    border-color: #AA92A8;
    border-style: solid;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.3rem;
    padding-top: 0.3rem;
}


/**GRUPO JT35**/

.grupo {
    background-color: rgba(170, 146, 168, 0.44);
    border-radius: 2rem;
    padding: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
}


.grupo .rotulos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-around;
    align-items: center; 
    
}

.grupo img {
    padding: .5rem;
}

/**FOOTER**/


footer { 
    background-color: #AA92A8;
    padding: 1rem;
    text-align: center;
}

footer p {
    color:black;
    font-family: 'Domine', serif;
    font-size: .6rem;
    
} 




@media all and (min-width:600px){

.principal {
    display: flex;
    flex-direction: row;
    }
    
/**PERFIL**/

.perfil {
    width: 50%;
    display: flex;
    margin-right: 1.5rem;
}

    .about {
        margin-top: 2rem;
    }    
    
 /**TABLA**/

.tabla {
    display: flex;
    width: 50%;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 1.5rem;
    align-content: center;
    justify-content: center;

}

    
.cuadro {
    height: 5rem;
    width: 15rem;
    margin: 1rem;
    display: flex;
    justify-content: center;
        
    }    
    
/** LISTADO MATERIAS**/
    
.listado-materias {
    display: flex;
    }

.dropdown-container {
    width: 50%;
    padding: 1rem;
    }

}