* 
{font-family: "helvetica neue, arial, sans-serif";
margin: 0em;
padding: 0em;
box-sizing: border-box;}

header 
{background-color: #740067;
padding: .5em;
display: flex;
width: 100%;
box-sizing: border-box;
align-items: center;
justify-content: space-between;}

.profile 
{object-fit: contain;}

h1 
{color: whitesmoke;
height: 1em;
font-size: 1.5em;
font-family: "helvetica neue";
font-weight: 500;
text-align: center;}

.menu1 
{width: 100%;
background: #ff8052;}

#btn-menu 
{display: none;}

label img 
{display: none;
width: 3em;
height: 3em;
}

label img:hover 
{cursor: pointer;
background: rgba(0,0,0,0.8);}

.menu1 ul 
{margin: 0;
list-style: none;
padding: 0;
display: flex;}

.menu1 li 
{text-align: center;
flex-grow: 1;}

.menu1 li:hover 
{background: rgba(0,0,0,0.1)}

.menu1 li a 
{display: block;
padding: 10px 20px;
color: floralwhite;
text-decoration: none;
font-family: "helvetica neue";
font-weight: 600;}

main 
{display: flex;
flex-wrap: wrap;
width: 100%;}

main h3 {font-family: "helvetica";
text-align: left;
color: #000000;
height: 3em;
width: 100%;
padding: .5em;
background: #8b7cc9;}

.bio
{width: 65%;
height: auto;
border-bottom: 5px solid;
border-bottom-color:#6abccb;
}

.bio h3
{font-family: "helvetica";
text-align: left;
height: 3em;
padding: .5em;
background: #6abccb;
}

.bio p
{padding: 1.4em;
font-family: arial;
letter-spacing: 1px;}

.materias 
{width: 35%;
height: auto;
display: flex;
flex-direction: column;
border-bottom-color: #47a27b;
border-bottom: 5px solid;
}

.materias h3 
{font-family: "helvetica";
text-align: left;
color: azure;
height: 3em;
padding: .5em;
background: #47a27b;
}

.materias ul 
{list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between; 
}

.materias li 
{padding: 2.3em;
text-align: center;
margin: .5em;
background-color: rgb(247, 237, 184)}

.materias li:hover 
{padding: 2.3em; 
background: rgba(0,0,0,0.1)}

.materias a 
{font-family: helvetica;
font-size: 1.1em;
color: #000000;
text-decoration: none;
font-weight: 600;
}

.truth 
{flex-grow: 1;
background-color: #a05f93;
display: flex;
flex-direction: column;
box-sizing: border-box;
align-items: center;
}

.truth h3
{padding:.4em;
width: 100%;
background-color: #620062;
color: azure;
font-family: verdana;
font-size: 1em;
text-align: center;
}

.ciclo 
{flex-grow: 1;
background-color: #6384aa;
display: flex;
flex-direction: column;
box-sizing: border-box;
align-items: center;
}

.ciclo h3
{padding:.4em;
width: 100%;
background-color: #003c62;
color: azure;
font-family: verdana;
font-size: 1em;
text-align: center;
}

iframe {margin: .3em;}

.truth p 
{font-family: verdana;
margin: .5em;
color: #ffffff;
text-align: center;
}




footer {background-color: darkgrey;
padding: .2em;
border: 4px solid;
border-color: #e6e6e6;}

footer p {text-align: center;
font-style: italic;
color: #747474}


@media (max-width:640px){

    header
    {display: flex;
    align-items: center;}
    
    h1
    {font-size: 1em;
    font-weight: 400;
    transition: 1s}
    
    label img
    {display: block;}
    
    .menu1 ul {position: absolute;
    background: coral;
    width: 50%;
    margin-left: -50%;
    transition: 1s}
    
    .menu1 ul {flex-direction: column;}
    .menu1 li {border-top: 1px solid white}

    #btn-menu:checked ~ ul {margin: 0}
    main {flex-direction: column;
width: 100%;}

.bio {width: 100%}
.materias {width: 100%;
    transition: .5s;}

.materias ul {flex-direction: row;
    justify-content: space-between}
    .materias li {flex-grow: 1;
    padding: .4em;}
    footer {font-size: .5em}
    
}