*{box-sizing: border-box;}

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');

html {font-size: 16px; font-family: Roboto;} /*mi rem*/

<meta name="viewport" content="width=device-width, initial-scale=1">
body {background-color: #FFEAEA; text-align: center; }


/*Arriba inicio*/
.inicio {border-radius: 0.5rem; background-color: #FF4F79; margin: 0rem;}
.inicio ul {font-weight: 300; list-style-type: none; text-align: left;padding: 0.5rem;}
ul li a {text-decoration: none; color:#000000; list-style-type: none;}
ul li:hover {font-weight: 700;}
.inicio ul {display:flex; flex-wrap: wrap; justify-content:center; }

ul li {/*border: 1px solid #FFEAEA; border-radius: 0.5rem; background-color: #FFEAEA;*/
    padding: 1rem; margin: 0.5rem;}

/*Gaby*/
h1 {font-size: 2rem; font-weight: 700; line-height: 2rem; text-align: center; 
    color: #1A5E63;
    margin: 1.5rem;}

/*Diseño Gráfico*/
h2 { font-weight: 400; font-size: 1.5rem; text-decoration-style: none; margin: 0rem;
    }
h2 a:hover {color: #1A5E63;}
h2 a {text-decoration: none; color:#000000;}
p {display: flex; flex-direction: column; align-content: center; align-items: center; font-weight: 400; font-size: 1rem; text-align: center; padding: 0rem 5rem 0rem 5rem;
    color: #1A5E63; }

/*titulo: Anuales y cuatr*/
h3 {font-weight: 400; font-size: 1.25rem;
    text-align: left;}

/*titulo: Aprobadas y en curso*/
h4 {font-weight: 400; font-size: 1rem;
    color: #1A5E63;
    text-align: left;}

/*materias listado*/
ul1 {font-weight: 300; font-size: 0.75;
    list-style-type: none; text-align: left;}
ul1 li {list-style: none; padding: 1rem;
        border:none;}
ul1 li {padding: 0rem 1rem 0.75rem 1rem; margin: 0.5rem;}


.materias {display:flex; justify-content:space-around;
            border: 1px solid #1A5E63; border-radius: 1rem; background-color: #CAE7E4;
            padding: 2rem; margin: 2rem;
            justify-content: space-around; }

.yo {margin: 4rem; display: flex; flex-direction: column; align-content: center; align-items: center;}
.fotoperfil {margin: 1rem 0.5rem 0.5rem 0.5rem; max-width: 400px; max-height: 400px; }

.footer p{display: flex; flex-direction: column; align-content: center; align-items: center; font-family: Roboto, Arial, sans-serif; font-weight: 400; font-size: 0.75rem; text-align: center;
    color: #FF4F79;}



@media screen and (max-width: 450px)
{
    
    .materias {display:flex;flex-direction: column; text-align: center;
                padding: 2rem; margin: 2rem; 
        justify-content: space-around; align-items: center;}
    
    li{padding: 1rem;}
    
    /*.inicio ul{display:inline-block; }*/
       
 }