@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=PT+Sans&display=swap');

/* selector{propiedad:valor;} */

/* links */

nav {background:#e02658; padding: 1rem;}

.inicio-1
    {font-weight:bolder;
    background-color: rgb(75, 82, 100);
    border-radius: 07%; 
    padding: 0.5rem;
    color:whitesmoke;
    font-family:'Open Sans', sans-serif;
    text-decoration: none;
    font-weight: 400;}

.mapa-1
    {font-weight:bolder;
    background-color: rgb(75, 82, 100);
    border-radius: 07%;
    padding: 0.5rem;
    color: whitesmoke;
    font-family:'Open Sans', sans-serif;
    text-decoration: none;
    font-weight: 400;}

.plan-1
    {font-weight:bolder;
    background-color: rgb(75, 82, 100);
    border-radius: 07%;
    padding: 0.5rem;
    color: whitesmoke;
    font-family:'Open Sans', sans-serif;
    text-decoration: none;
    font-weight: 400;}

.app-1
    {font-weight:bolder;
    background-color: rgb(75, 82, 100);
    border-radius: 07%;
    padding: 0.5rem;
    color: whitesmoke;
    font-family:'Open Sans', sans-serif;
    text-decoration: none;
    font-weight: 400;}

.landing-1
    {font-weight:bolder;
    background-color: rgb(75, 82, 100);
    border-radius: 07%;
    padding: 0.5rem;
    color: whitesmoke;
    font-family:'Open Sans', sans-serif;
    text-decoration: none;
    font-weight: 400;}

.inicio-1:hover {background-color: rgb(244, 177, 162);}
.mapa-1:hover{background-color: rgb(244, 177, 162);}
.plan-1:hover{background-color: rgb(244, 177, 162);}
.app-1:hover{background-color: rgb(244, 177, 162);}
.landing-1:hover{background-color: rgb(244, 177, 162);}



/* header */
header {
	background: rgb(244, 177, 162);
	font-family: 'Abril Fatface', cursive;}

h1 {color: rgb(0, 0, 0);}

/* body */

.foto {border-radius: 100%}
    
 section{display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;}

.materiascursadas {
	display: flex;
	border-style: solid;
    border-radius: 15%;
	padding: 1rem; 
	width: 6rem;  
	color: rgb(75, 82, 100);}

.columna-central {
	display: flex;
	flex-direction: row;
    flex-wrap:nowrap;
    justify-content: center;
    width: 100%}

.primer-anio {
	background: rgb(248, 207, 195);
	border-radius: 10%;
    margin: 1%;
    min-height: 10rem;
    padding: 1rem;
    width: 10%}

.segundo-anio {
	background: rgb(248, 207, 195);
	border-radius: 10%;
    margin: 1%;
    min-height: 10rem;
    padding: 1rem;
    width: 10%}

.tercer-anio {
	background: rgb(248, 207, 195);
	border-radius: 10%;
    margin: 1%;
    min-height: 10rem;
    padding: 1rem;
    width: 10%}

.cuarto-anio {
	background: rgb(248, 207, 195);
	border-radius: 10%;
    margin: 1%;
    min-height: 10rem;
    padding: 1rem;
    width: 10%}

body {
	background: rgb(215,227,238);
    background: linear-gradient(0deg, rgba(215,227,238,1) 19%, rgba(226,135,108,1) 57%, rgba(226,135,108,1) 76%, rgba(228,101,101,1) 100%); 
	font-family: 'PT Sans', sans-serif; 
	font-size: 0.9rem;
	text-align: center}

h2 {color:#b9e1f7;}

h4 {color: rgb(75, 82, 100); display: inline-block}

.compas {
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
	text-decoration: none;
    display: inline-block}

.compas a {
	padding: 1rem;
	width: 8rem;	
	color: rgb(134, 70, 51);
	font-weight: 400;
	text-decoration: none;
   }

.vn {
    border-style: solid;
    border-radius: 15%;
    border-color: rgb(244, 177, 162); 
    padding-top: 0.5rem}

.vn:hover{background: rgb(224,38,88); color:azure}
    .lucas:hover{background: rgb(224,38,88); color:azure}
    .martin:hover{background: rgb(224,38,88); color:azure}
    .bianca:hover{background: rgb(224,38,88); color:azure}
	
.footer-uba {
    background: rgb(215, 227, 238);
	padding: 1rem;
	text-align: left;
	padding-left: 1rem;
	color: black; 
	font-family: 'PT Sans', sans-serif; 
	font-size:0.8rem}


/*RESPONSIVE*/
	
@media (max-width: 600px){
   body {
   background: rgb(215,227,238);
   background: linear-gradient(0deg, rgba(215,227,238,1) 13%, rgba(226,135,108,1) 58%, rgba(226,135,108,1) 91%, rgba(224,38,88,1) 97%);}
    
   header {background: black}
   h1 {color: rgb(215,227,238)}
    
	.links-principio 
       {flex-direction: column; 
        font-size: 0.7rem;}
    
	.columna-central 
       {flex-direction: column;
       font-size: 0.9rem;
       display: flex;
	   flex-direction: column;
	   flex-wrap: nowrap;
	   justify-content: space-around;
	   align-items:center;
	   align-content:center;}
        
    .primer-anio
       {display: flex;
	   flex-direction: column;
	   flex-wrap: wrap-reverse;
	   justify-content: center;
	   align-items: center;
	   align-content:center;
       width: 65%;
       border-radius: 5%;}
    .segundo-anio
       {display: flex;
	   flex-direction: column;
	   flex-wrap: wrap-reverse;
	   justify-content: center;
	   align-items: center;
	   align-content:center;
       width: 65%;
       border-radius: 5%;}
    .tercer-anio
       {display: flex;
	   flex-direction: column;
	   flex-wrap: wrap-reverse;
	   justify-content: center;
	   align-items: center;
	   align-content:center;
       width: 65%;
       border-radius: 5%;}
    .cuarto-anio
       {display: flex;
	   flex-direction: column;
	   flex-wrap: wrap-reverse;
	   justify-content: center;
	   align-items: center;
	   align-content:center;
       width: 65%;
       border-radius: 5%;}
    
    .compas 
       {display: flex;
	   flex-direction: column;
       text-align: center;
       padding: 0.1rem;
	   flex-wrap: nowrap;
	   justify-content: space-around;
	   align-content: center;}
    
    .vn:hover{background: rgb(224,38,88); color:azure}
    .lucas:hover{background: rgb(224,38,88); color:azure}
    .martin:hover{background: rgb(224,38,88); color:azure}
    .bianca:hover{background: rgb(224,38,88); color:azure}