@font-face {
    font-family: 'montserratblack';
    src: url('montserrat-black.woff2') format('woff2'),
         url('montserrat-black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratmedium';
    src: url('montserrat-medium.woff2') format('woff2'),
         url('montserrat-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratregular';
    src: url('montserrat-regular.woff2') format('woff2'),
         url('montserrat-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratsemibold';
    src: url('montserrat-semibold.woff2') format('woff2'),
         url('montserrat-semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratbold';
    src: url('montserrat-bold.woff2') format('woff2'),
         url('montserrat-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* { 
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    }

ul {
    list-style-type: none; 
    justify-content: center;
    align-content: center;
    width: 90%;
    text-decoration-line: none;
 }

li {
    justify-content: center;
    align-content: center;
    text-decoration: none;
    list-style-type: none;
    
    border-left: #f0fff3 5px solid;
    border-right: #f0fff3 5px solid;
    background-color: #ff9797;
    margin-bottom: 0.3em;
    padding: 0.5em;
    }

li a{
    text-decoration-line: none;
    color: #f0fff3;
 }

li:hover{
    text-decoration-line: none;
    color: #4834e0;
    background-color: #b72a67;
 }
li a:hover{
    color: #ff9797;
 }
header  {
    background-color: #b72a67;
    padding-bottom: 0.5em;
    
    }

body { background-color: #f0fff3;
    }
article {
    background: #2e0279;
    display: flex;
    padding-bottom: 2em;
    }
#ju { 
    }
#yo {
    padding: 1em;
    background-color: #fde8cb;
    color: #ff9797;
    text-align:left;

    }


#personales {  
    background-color: #fde8cb;
    padding: 1em;
    width: 12.7em;
    height: 19em;
    border-left: solid 0.9em #ff9797; 
    
    }

#personales p{
color: #2e0279;
font-family: 'montserratblack', sans-serif;
   
   }

#academicos {  
    background-color: #ff9797;
    padding: 1em;
    margin-left: 1em;
    }
h2{
color: #2e0279;
font-family: 'montserratblack', sans-serif;
   }

h3{
color: #2e0279;
   }
h4 {
 color: #fde8cb;
   }
p {
 color: #fde8cb;
   }
#porfolio div {padding: 1em;
        }

#porfolio {
    padding: 0.3em;
    color: #ff9797;
    margin-top: 3%;
    border: solid 1em;
    background-color: #fde8cb;
    
    }
.fotos {
    filter: grayscale(100%);
    padding: 0.4em;
    width: 100%;
        }
div .fotos {
    align-content: center;
    justify-content: center;
    align-items: center;
        }
div .fotos:hover {
    filter: none;
    border: 0.6em solid #2e0279;
    }
  
h1 {font-family: 'montserratbold', sans-serif;

    }


section {
    color: #fde8cb;
    text-decoration: none;
    padding: 1em;
    }
section a{
    color: #fde8cb;
    text-decoration: none;
    }

#equipo {  background-color: #b72a67;
	}
#equipo a{ font-size: 1.3em;
	}
#equipo div { border-left: solid 0.4em #fde8cb; 
    font-weight: 700;
    background-color: #ff9797;
    border-right: solid 0.4em #fde8cb;
    padding: 0.2em;
    margin-bottom: 0.4em;
	}
footer p{ color: #b72a67;
    margin: 5%;

	}

#logo { 
    margin-left: 50%;
    }


@media screen and (min-width: 32em){
    ul { display: flex;}
    li { margin-left: 1em; }
    #ju {width: 50%;
    float: right;}
    h1{ justify-content: center;
        display: flex;
    }
    article { justify-content: center;
        width: 90%;
        height: 80%;
        margin-left: 5%; 
        margin-right: 5%;
        padding: 1em;
    }
    #personales{
        width: 40%;

    }
    
     #porfolio{display: flex;
    justify-content: center;}
    #gif{width: 100%; }
    .fotos {width: 90%; }
    #equipo { display: flex;
	}
   }