*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
    
   
}
.titulo{
    background-color: #003785;
    height: 100%;
    width: 100%;
    margin-top:-30px ;
    text-align: center;
    padding: 10%;
    width: 100%;
    height: 100%;
    
    font-weight: bold;
    color: rgb(190, 186, 186);
    text-shadow: #0c0c0c 6px 5px 12px;
    
}
.titulo h1{
    font-size: 4rem;
}
.titulo h2{
    font-size: 3rem; 
}
.titulo h3{
    padding: 10%;
    font-size: 2.5rem;
}
/*Burbujas*/
.burbuja{
    width: 80px;
    height: 80px;
    background-color: rgb(192, 183, 183);
    border-radius: 50%;
    opacity: .3;
    position: absolute;
    bottom: -150;
    left: 5%;
    animation: burbujas 3s linear infinite;  
}
.burbuja:nth-child(1){
    animation-delay: 2s;
    width: 40px;
    height: 40px;
    left: 15%;
    animation-duration: 7s;
}
.burbuja:nth-child(2){
    animation-delay: .5s;
    width: 70px;
    height: 70px;
    left: 35%;
    animation-duration: 8s;
}
.burbuja:nth-child(3){
    animation-delay: 1s;
    width: 50px;
    height: 50px;
    left: 25%;
    animation-duration: 5s;
}
.burbuja:nth-child(4){
    animation-delay: 1.5s;
    width: 60px;
    height: 60px;
    left: 65%;
    animation-duration: 9s;
}
.burbuja:nth-child(5){
    animation-delay: 2s;
    width: 30px;
    height: 30px;
    left: 55%;
    animation-duration: 7s;
}
.burbuja:nth-child(6){
    animation-delay: 2s;
    width: 80px;
    height: 80px;
    left: 85%;
    animation-duration: 7s;
}
.burbuja:nth-child(7){
    animation-delay: 3s;
    width: 50px;
    height: 50px;
    left: 45%;
    animation-duration: 6s;
}
.burbuja:nth-child(7){
    animation-delay: 2s;
    width: 40px;
    height: 40px;
    left: 45%;
    animation-duration: 6s;
}
@keyframes burbujas {
    0% {
        bottom: 0;
        opacity: 0;
    }
    30% {
        transform: translateX(30px);
        -webkit-transform: translateX(30px);
        -moz-transform: translateX(30px);
        -ms-transform: translateX(30px);
        -o-transform: translateX(30px);
}
    50% {
        opacity: 0.4;
    }
    100% {
        bottom: 100vh;
        opacity: 0;
    }
    
}

/* Estilo del menu*/

.fa-2x{
    font-size:40px;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 40px;
text-align: center;
vertical-align: middle;
font-size:30px;
}
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:#0353c2;
border-right:1px solid #0352c0;
position: fixed;
top:0;
bottom:0;
height:50%;
left:0;
width:50px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
z-index:1000;
margin-top: 60px;
padding-top: 60px;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 20px;
text-decoration:none;
-webkit-transition:all .1s linear;
transition:all .1s linear; 
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:40px;
text-align:center;
vertical-align:middle;
font-size:25px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
a:hover,a:focus {
text-decoration:none;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:rgb(65, 63, 63);
background-color:#fff;
font-weight: bold;
}
.area {
float: left;
background: rgb(65, 63, 63);
width: 100%;
height: 100%;
}
/*Sobre mi*/
.Intro{
    background-color: #81c9fa;
    width: 100%;
    height: 100vh;
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    padding-top: 80px;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 20px;
    border: #003785 solid 2px;
    overflow: hidden;
    margin-top: -30px;
    
}
.descarga{
    list-style: none;
   text-decoration: none;
    color: rgb(3, 3, 3);
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    border: #003785 solid 3px;
    padding: 10px;
    border-radius: 10px;    
}
/*Trabajos*/
#trabajos{
    background-color: #81c9fa;
    height: 95vh;
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 20px;
    margin-top: -30px;
    padding-top: 30px;
}
.Porfolio{
    background-color: #81c9fa;
    width: 100%;
    height:20vh;
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    padding-bottom: 20px;
}
.slide{
    margin-top: 10px;

}
.slide img{
    height:90vh;
}
.tituloT{
    background-color: #e6eff8;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    padding-top: 30px;
    font-size: 40px;
    font-weight: bold;
    padding-bottom: 20px;
    color: rgb(3, 3, 3);
}
.parrafoT{
    font-size: 20px;
    font-weight: bold;
    color: rgb(3, 3, 3);
    margin-top: 30px;
    text-align: center;
    background-color: #e6eff8;
    opacity: 0.8;
}

/*Skills*/
.skill{
    background-color: #1465bb;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-left: 10%;
    font-size: 20px;
    margin-top: -30px;
    padding-top: 30px;
    margin-bottom: -30px;
}
.icono{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: rgb(247, 236, 220,.5);
    border-radius: 10px;
    font-size: 2.5rem;
    font-weight: bold;
    color: rgb(3, 3, 3);
    margin: 20px;
    padding: 20px;
    width: 80%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.django{
    margin-left: 100px;
}
.django:hover{
    background-color: rgb(247, 236, 220);
    color: rgb(3, 3, 3);
}
.icono i:hover{
    background-color: rgb(247, 236, 220);
    color: rgb(3, 3, 3);
}
.tituloSkill{
    font-size: 2rem;
    font-weight: bold;
    color: rgb(3, 3, 3);
    width: 80%;
}
.habilidades{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin: 30px 0 30px 9%;
    width: 80%;
    height: 100%;
    padding-bottom: 10px;
}
.habilidades li{
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: rgb(247, 236, 220,.5);
    font-size: 1.4rem;
    font-weight: bold;
    color: rgb(3, 3, 3);
    width: 70%;
    height: 100%;
    text-align: center;
}
.habilidades li:hover{
    background-color: rgb(247, 236, 220);
    color: rgb(3, 3, 3);
}
  
/*Contacto*/
.contacto{
    background-color:#045bd6;
    width: 100%;
    height: 100vh;
    text-align: center;
    padding-top: 10px;
    margin-top: -30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: -30px;
    flex-direction: row;
    padding-left: 10px;
}
.formulario{
    width: 100%;
    height: 100%;
    padding-top: 10px;
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    
}
.input{
    width: 80%;
    height: 40px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border: 1px solid #003785;
    padding-left: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: rgb(3, 3, 3);
}
.inputText{
    width: 80%;
    height: 100px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border: 1px solid #003785;
    padding-left: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: rgb(3, 3, 3);
}
.datos{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    
}
.contacto-icon{
    background-color: rgb(247, 236, 220,.5);
    border-radius: 10px;
    font-size: 2rem;
    font-weight: bold;
    color: rgb(3, 3, 3);
    margin-bottom: 10px;
    width: 80%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.active>h3{
    font-size: 50px;
    text-decoration: underline;
    font-weight: bold;
    color: rgb(3, 3, 3);
    text-align: center;
    margin-top: -30px;
    padding-top: 30px;
    background-color:#045bd6;
    
}
.boton{
    background-color: #83aee9;
    width: 80%;
    height: 40px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border: 1px solid #0f54b4;
    color: rgb(3, 3, 3);
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 20px;
}
.boton:hover{
    background-color: #01204b;
    color: #fff;
}


 #contacto a{
    color: rgb(3, 3, 3);
    text-decoration: none;
}
/*Footer*/
footer{
    background-color: rgb(188, 236, 248);
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
   
}
@media (max-width: 800px) { 
    .titulo h1{
        font-size: 50px;
    }
    .titulo h2{
        font-size: 40px;
    }
    .titulo h3{
        font-size: 30px;
    }
    .fa{
        font-size:15px
    }
    .fa-2x{
        font-size:20px;
    }
    .tituloT{
        font-size:20px;
        margin: 0;
        width:50%;
        height:100%;
    }
    .contacto{
        display:flex;
        flex-direction:column;

    }
    .slide img{
        height:50vh;
    }
    .main-menu:hover,nav.main-menu.expanded {
        width:60px;
        overflow:hidden;
        text-align: none;
    }
    .nav-text{
        display:none;
        
    }
    .Intro{
        padding-left: 20%;
    padding-right: 10%;
    }
}


/*Large devices (desktops, 992px and up)*/
@media (min-width: 600px) { 
    .titulo h1{
        font-size:1px;
    
    }
    .slide img{
        height:50vh;
    }
}