/* body { propiedad ; valor; } */ 
/* footer p ES QUE AL PARRAFO ESE EASPECÍFICO SE LE APLICA, SINO QUE APLICA A TODOS LOS P */
/* 1 REM _ 16PX */

 
body {background: black ; font-family: Roboto ; text-align: center ; list-style-position: inherit}
head { background: #8cf9f3}
h1 { color: white ; font-size: 2rem } 
header h2 { color: white ; font-family: Roboto Light}
header h3 {color: #5ce5e1 ; font-family: EXO ; font-stretch: expanded}
section article{color: white ; text-align: left ; width: 20% ; text-align: center ; display: flex ; justify-content: space-around}
article h3 {color: #16d3c9 }
section p {color: #5ce5e1 ; font-family: EXO ; font-stretch: expanded ; text-align: left; justify-content: center}
	
footer p {color: white ; font-family: EXO; text-align: center ; font-size: 0.5rem}

.compa { color: #5ce5e1 ; font-family: Roboto Light ; }   
    

@media (min-width:576px) {
            body {
                background: black;
            }
            section article {
                width: 48%;
                background: black;
            }
            section {
                display: flex;
                justify-content: space-around}
  


.fotoheader {border-radius: 50%; width:10%; margin-top: 1rem }
header a {color: #8cf9f3 ; font-family: Roboto Light ; font-size: 1rem}
ol {list-style-type: none; padding: 0% ; font-family: Roboto Light }


.materias-A h3 { color: #8cf9f3 ;font-family: EXO ; font-size: 1.2rem;margin-bottom: 1rem}
.materias-A {color: white ; font-family: Roboto Light ;font-size:1rem; padding: 1.5rem;border-width: 0.1rem; border-style: solid; border-color: seashell;display: flex;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: flex-start;}

.materias-1 h3 { color: #8cf9f3 ;font-family: EXO ; font-size: 1.2rem;margin-bottom: 1rem}
.materias-1 {color: white ; font-family: Roboto Light ;font-size:1rem; padding: 1.5rem;border-width: 0.1rem; border-style: solid; border-color: seashell;display: flex;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: flex-start;}

.materias-2 h3 { color: #8cf9f3 ;font-family: EXO ; font-size: 1.2rem;margin-bottom: 1rem}
.materias-2 {color: white ; font-family: Roboto Light ;font-size:1rem; padding: 1.5rem;border-width: 0.1rem; border-style: solid; border-color: seashell;display: flex;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: flex-start;}

.materias-3 h3 { color: #8cf9f3 ;font-family: EXO ; font-size: 1.2rem;margin-bottom: 1rem}
.materias-3 {color: white ; font-family: Roboto Light ;font-size:1rem; padding: 1.5rem;border-width: 0.1rem; border-style: solid; border-color: seashell;display: flex;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: flex-start;}

.materias-4 h3 { color: #8cf9f3 ;font-family: EXO ; font-size: 1.2rem;margin-bottom: 1rem}
.materias-4 {color: white ; font-family: Roboto Light ;font-size:1rem; padding: 1.5rem;border-width: 0.1rem; border-style: solid; border-color: seashell;display: flex;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: flex-start;}

.materias-5 h3 { color: #8cf9f3 ;font-family: EXO ; font-size: 1.2rem;margin-bottom: 1rem}
.materias-5 {color: white ; font-family: Roboto Light ;font-size:1rem; padding: 1.5rem;border-width: 0.1rem; border-style: solid; border-color: seashell;display: flex;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: stretch;
	align-content: flex-start;}

  
         


    .primero {padding-right: 1.2rem; padding-left: 1.2rem;}
    
    .segundo {padding-right: 0.4rem; padding-left: 0.4rem;}
    
    .tercero {padding-right: 0.3rem; padding-left: 0.3rem;}
    
    .a1 {padding-right: 3rem; padding-left: 3rem;}
    
    .a3 {padding-right: 2rem; padding-left: 2rem;}
         


/* */