/*Mell css*/

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,600;1,400&display=swap');

* { box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
font-family: "Zilla Slab", sans-serif;
font-weight: 300;
font-size: 18px;
text-decoration: none;
list-style: none;
}

html { height: -webkit-fill-available; 
    }

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

body { display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: -webkit-fill-available;
	background-color: #580267;
       }

header { background-color: #ECD4FF;
		background-image: url(../imagenes/lineasa.svg);
		background-repeat: repeat-x;
		background-size: 30vh;
        color: #580267;
		display: flex;
		justify-content: space-between;
		align-content: center;
		width: 100%;
		padding-top: 1.7em;
		padding-bottom: 1em;
		padding-left: 1.7em;
		padding-right: 1.7em;
       }

#gmenu {display: none;}

header img {display: block;
			width: 30px;
			height: 30px;}

header label:hover {cursor: pointer;}

.menu { background-color: #ECD4FF;
		color: #580267;
		position: absolute;
		width: 100%;
		margin-left: -110%;
        border-bottom: 10px solid linear-gradient(#580267, rgba(255,0,0,0)) ;
}

.menu > ol {margin-bottom: 0.5em;}

.menu li {display: block;
		  padding: 8px;
		  border-top: 1px solid #580267;
		  margin-top: 0.25em; 
		  margin-left: 1.5em;
		 }

.integrantes {margin-left: 1em;}

#gmenu:checked ~ .menu {margin: 0;
						margin-top: 42px;
						margin-left: -1.7em;
						transition: 0.3s;}

header a:link {  color: #580267; }
header a:visited {  color: #0c9fdb;  }
header a:hover {  color: aliceblue; cursor: pointer;}

.titulopagina {  font-family: "Zilla Slab thin";
				font-size: 1.3em;}


main { 
    color: #ECD4FF;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
    }

main section { padding-left: 1.7em;
				padding-right: 1.7em; }

#sub { padding-left: 1.7em;
            padding-right: 1.7em; }

main a:link {  color: #ECD4FF; }
main a:visited {  color: cyan;  }
main a:hover {  color: aliceblue; }

main h2 {margin-top: 1em; margin-bottom: 0.5em; font-size: 40px; font-weight: 500; line-height: 1em; padding-right: 5em;}
main h3 {margin-top: 1em;}
main h5 {margin-top: 0.25em;}

#tarea h3 {font-size: 1.3em;}

#tarea h2 {margin-bottom: .5em;}

#tarea {margin-bottom: 3em;}

main img {margin-top: 1em; margin-bottom: 1em; width: 100vw;}

main li {margin-bottom: 0.25em; margin-left: 1em;}

main .subtitulonombre {margin-top: 0.2em; font-size: 25px; font-weight: 300; padding-bottom: 0.7em;}
main .nombre { font-size: 60px; font-weight: 300; padding-top: 0.1em; }
main .volanta { margin-top: 0.5em; font-size: 14px; padding-top: 2em;}

main #infopersonal ul li {list-style: url(../imagenes/listaestrella.svg);}

main #infopersonal a { padding-bottom: 2em;}

#sub li {margin-left: 0; margin-bottom: 1em;}
#sub li strong {font-weight:600; }

#trabajo {margin-bottom: 3em;}


.separador {margin-bottom: 0;
            margin-top: 0;
            background-image: url(../imagenes/lineasb.svg);
            background-repeat: repeat-x;
            background-position: bottom center;
            background-size: contain;
            padding-bottom: .2em;}

#trabajo {padding-bottom: 2em;
            padding-top: 1em;
        }


#trabajo strong {font-weight: 550;}

#trabajo li {margin-left: 0; }


footer { 
    padding: 2em;
    padding-bottom: 1em;
    background-color: #ECD4FF;
    color: #580267;
    text-align: center;
}

footer p {font-style: italic;}
footer img {margin-top: 1em; width: 15%; margin-bottom: 1em;}

@media screen and (min-width:56em) {
       .menu {width: 70vw;}
       .menu {width: 70vw;}
    
        
    
}
    
@media screen and (min-width:100em) {
        .menu {width: 50vw;}
    #sub ul {display: flex;
        flex-wrap: wrap;
        align-items: flex-start}
    
    #sub li {margin-right: 4em;
            width: 15vw;
            margin-bottom: 6em;}
}