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

header {
    width: 100vw;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    background-color: rgb(230, 225, 217);
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1px;
    padding-bottom: 2px;
    color: rgb(60, 60, 60);
    position: fixed;
    z-index: 100;
}

nav {
    margin-left: 50px;
    margin-right: 50px;
    position: relative;
    right: 70px;
}

.head {
    height: 40px;
    border-radius: 35px;
    border: none;
    box-shadow: none;
    justify-content: center;
    align-items: center;
    display: flex;
}

.ul1 {
    display: flex;
    flex-direction: row;
    list-style: none;
    color: (90, 90, 90)
}

.ml-50 {
    margin-left: 50px;
}

a {
    text-decoration: none;
}

.nav-link {
    color: rgb(50, 50, 50)
}

a .nav-link:link {
    color: rgb(70, 70, 70);
}

a .nav-link:visited {
    color: rgb(248, 115, 114);
}

.nav-link:hover {
    color: rgb(248, 115, 114);
}

.contacto:hover {
    opacity: 60%
}

.loquehago:hover {
    opacity: 60%;
}

.nav-link:active {
    height: 40px;
    border-radius: 35px;
    border: 1px solid grey;
    box-shadow: 5px 5px 5x 1px rgba(254, 185, 183, 0.75);
    justify-content: center;
    align-items: center;
    display: flex;
    background-color: rgb(248, 115, 114);
    color: rgb(60, 60, 60)
}

.hola {
    width: 120px
}

.hola:active {
    width: 120px;
}

.conoc {
    width: 210px;
}

.proyecto {
    width: 180px
}

.contacto {
    display: flex;
    width: 160px;
    border-radius: 35px;
    background-color: rgb(248, 115, 114);
    justify-content: center;
    align-items: center;
    height: 40px;
}

.nav-cont {
    color: white
}

main {
    display: flex;
    padding-left: 100px;
    width: 100vw;
    height: 800px;
    background-color: rgb(242, 232, 222);
    align-items: center;
    color: rgb(70, 70, 70);
    justify-content: center;
}

h1 {
    font-size: 60px;
    font-weight: 900;
    color: rgb(254, 121, 89)
}

h2 {
    font-size: 30px;
}

.presentacion {
    color: rgb(50, 50, 50)
}

h3 {
    font-size: 20px;
    font-weight: 500;
    margin: 2%;
}

.sectionizq {
    display: flex;
    justify-content: center;
    align-self: center;
    flex-direction: column;
    width: 50%;
}

.loquehago {
    display: flex;
    width: 180px;
    border-radius: 35px;
    background-color: rgb(248, 115, 114);
    margin-top: 5%;
    height: 40px;
    justify-content: center;
    align-items: center;
    color: white;
}

.sectionder {
    width: 50%;
    padding-top: 240px;
}

.tamano {
    width: 400px;
    padding-right: 50px;
    padding-bottom: 50px;
}

.main2 {
    display: flex;
    padding-left: 250px;
    padding-right: 250px;
    width: 100%;
    height: 100%;
    background-color: rgb(245, 220, 195);
    align-items: center;
    color: rgb(242, 232, 222);
    justify-content: center;
    padding-top: 10%;
    flex-wrap: wrap;
}

p {
    margin: 2%;
    color: rgb(90, 90, 90);
    text-align: center;
}

.cajas {
    margin-top: 3%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-left: 30px;
    padding-right: 40px;
    padding-bottom: 100px;
}

.cajita {
    display: flex;
    width: 258px;
    height: 231px;
    border-radius: 20%;
    background-color: white;
    margin: 10px;
    font-size: 150px;
    padding-left: 3px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: black
}

.html {
    color: rgb(229, 77, 40)
}

.css {
    color: rgb(60, 143, 198)
}

.sss {
    color: rgb(204, 102, 153)
}

.js {
    color: rgb(240, 219, 80)
}

.react {
    color: rgb(98, 217, 251)
}

.git {
    color: rgb(243, 79, 41)
}

.cajita:hover {
    border: 1px solid rgb(248, 115, 114);
    ;
    color: rgb(248, 115, 114);
}

.main3 {
    padding-left: 200px;
    padding-right: 200px;
    padding-top: 200px;
    padding-bottom: 200px;
    background-color: rgb(242, 232, 222);
    color: rgb(50, 50, 50);
    display: flex;
    width: 100%;
    height: 100%;
    text-align: center;
    flex-direction: column;
}

.separacion {
    margin-top: 10%;
    margin-bottom: 10%;
    font-size: 2em;
    color: rgb(90, 90, 90)
}

h1 i {
    color: rgb(248, 115, 114)
}

.main4 {
    display: flex;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    background-color: rgb(245, 220, 195);
    align-items: center;
    color: rgb(248, 115, 114);
    justify-content: flex-start;
    flex-direction: column;
    padding-bottom: 5%;
}

.cubos {
    margin-top: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.proyectos {
    display: flex;
    width: 350px;
    height: 350px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin: 5px;
    font-size: 50px;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    color: rgb(90, 90, 90);
    padding-top: 1%;
}

.not-done {
    background-color: white;
    opacity: 60%;
}

.done {
    background-color: white;
}

.proyectos:hover {
    border: 1px solid rgb(248, 115, 114);
    color: rgb(248, 115, 114);
}

.c1 {
    position: relative;
    right: 350px;
}

.enorme {
    margin-top: 12%;
    border-radius: 25px solid rgb(90, 90, 90);
    width: 85vw;
    height: 85vh;
    background-color: rgb(242, 232, 222);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    bottom: 50px;
}

.contactame {
    width: 50%;
    height: 100%;
    padding-left: 10%;
    padding-right: 3%;
    margin-top: 50px;
}

.circulo {
    padding: 10px;
    color: rgb(248, 115, 114);
    margin: right 20px;
    border-radius: 50px;
    border: none;
    font-size: 30px;
    background-color: transparent;
    margin: 2%;
}

.circulo:hover {
    height: 50px;
    width: 50px;
    border-radius: 50px;
    border: 1px solid transparent;
    background-color: rgb(248, 115, 114);
    color: white;
    font-size: 30px;
    align-self: center;
}

.redSocial {
    color: rgb(90, 90, 90);
}

.redSocial:hover {
    color: rgb(248, 115, 114);
}

.redSocial:hover .circulo {
    border-radius: 50px;
    border: 1px solid grey;
    font-size: 30px;
    border: 1px solid grey;
    background-color: rgb(248, 115, 114);
    color: white;
}

ul {
    padding-top: 7%;
}

.escribime {
    flex-grow: 1;
    height: 100%;
    padding-left: 10%;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}

.datos {
    padding-top: 5%;
    flex-direction: row;
    display: flex;
}

.renglon1 {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.renglon2 {
    margin-right: 15%;
    display: flex;
    flex-direction: column;
    width: 49%;
}

label {
    margin-right: 25px;
}

input {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    width: 200px;
    height: 30px;
    margin-top: 5%;
    margin-left: 2%;
    margin-bottom: 5%;
    background-color: rgb(230, 225, 217);
}

.marg {
    margin-top: 3%;
    margin-bottom: 3%;
}

.renglon {
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    width: 430px;
    height: 30px;
    margin-top: 2%;
    margin-left: 1%;
    flex-direction: row;
}

.ancho {
    width: 436px;
    border-radius: 8%;
    border: 1px solid #e0e0e0;
    background-color: rgb(230, 225, 217);
}

.main5 {
    display: flex;
    padding-left: 50px;
    width: 100vw;
    height: 800px;
    background-color: rgb(242, 232, 222);
    align-items: center;
    color: rgb(221, 25, 36);
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

footer {
    background-color: rgb(248, 115, 114);
    color: rgb(234, 235, 242);
    display: flex;
    width: 100vw;
    height: 30%;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
}

.padd {
    padding: 10px
}

.colorcito {
    color: rgb(242, 232, 222);
}

.todoslosiconos {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.iconos {
    display: flex;
    width: 50px;
    height: 50px;
    background-color: white;
    color: rgb(221, 25, 35);
    border-radius: 50%;
    margin: 10px;
    font-size: 30px;
    padding-left: 1px;
    align-items: center;
    justify-content: center;
}

.iconos:hover {
    background-color: rgb(254, 185, 183);
}

.ul2 {
    display: flex;
    flex-direction: row;
    list-style: none;
    align-items: center;
    justify-content: center;
}

.corazon {
    color: red
}

.p1 {
    color: white;
    padding-top: 3%;
    padding-bottom: 10%;
}

ul {
    list-style: none;
    font-size: 20px;
}

li {
    margin-bottom: 5%
}

@media screen and (max-width: 400px) {
    header {
        display: none;
    }
    main {
        flex-direction: column;
        display: flex;
        padding-left: 5px;
        justify-content: center;
        align-items: center;
    }
    h1 {
        font-size: 3em;
        text-align: center;
    }
    h2 {
        font-size: 1.5em;
    }
    .sectionizq {
        display: flex;
        justify-content: center;
        align-self: center;
        flex-direction: column;
        width: 100%;
        height: 50%;
        text-align: center;
    }
    .loquehago {
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        position: relative;
        left: 100px;
    }
    .sectionder {
        width: 100%;
        padding-right: 3px;
        padding-left: 3px;
        padding-top: 100px;
    }
    .tamano {
        width: 300px;
    }
    .main2 {
        display: flex;
        height: 100%;
        width: 100%;
        background-color: rgb(245, 220, 195);
        align-items: flex-start;
        color: rgb(248, 115, 114);
        justify-content: flex-start;
        padding-top: 5%;
        flex-wrap: wrap;
        padding-bottom: 60px;
        padding-left: 20px;
        padding-right: 20px;
    }
    p {
        font-size: 0.9em;
        align-self: center;
    }
    .cajas {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 1px;
        padding-right: 2px;
        padding-bottom: 10px;
    }
    .cajita {
        display: flex;
        width: 100px;
        height: 100px;
        border-radius: 10%;
        background-color: white;
        margin: 5px;
        font-size: 40px;
        padding-left: 1px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: rgb(50, 50, 50)
    }
    .etra {
        font-size: 15px;
    }
    .c1 {
        position: relative;
        left: 0px;
        bottom: 0px;
    }
    .main3 {
        padding-top: 100px;
        padding-bottom: 100px;
        padding-left: 20px;
        padding-right: 20px;
        ;
        background-color: rgb(242, 232, 222);
        color: rgb(248, 115, 114);
        display: flex;
        width: 100%;
        height: 100%;
        text-align: center;
        flex-direction: column;
    }
.separacion {
    margin-top: 10%;
    margin-bottom: 10%;
    font-size: 1em;
    color: rgb(90, 90, 90)
}



    .main4 {
        height: 100%;
        flex-direction: column;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .proyectos {
        display: flex;
        width: 300px;
        height: 300px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        margin: 5px;
        font-size: 50px;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        color: rgb(90, 90, 90);
        padding-top: 1%
    }
    .letra {
        font-size: 2.2em;
    }
    .cubos {
        flex-direction: column;
    }
/* .last {padding-bottom: 5px;
} */

    .main5 {
        display: flex;
        padding-left: 0px;
        width: 100%;
        height: 100%;
        /* background-color: white; */
        align-items: center;
        flex-direction: column;
    }
    .enorme {
        flex-direction: column;
        display: flex;
        margin-top: 5%;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        position: relative;
        bottom: 50px;
        margin-top: 2%;
    }
    .contactame {
        width: 100%;
        height: 40%;
        padding-left: 6%;
        padding-right: 2%;
        margin-top: 75px;
        padding-bottom: -500px;
    }
    .escribime {
        width: 100%;
        height: 50%;
        padding-left: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-grow: 0;
    }
    .datos {
        display: flex;
        flex-direction: column;
        padding-left: 1%;
        position: relative;
    }
    .renglon1,
    .renglon2 {
        width: 100%;
    }
    .renglon1 {
        position: relative;
        left: -1px;
    }
    .renglon2 {
        position: relative;
        right: 2px;
    }
    input {
        justify-content: center;
        align-content: center;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        margin: 1px;
        width: 300px;
        height: 30px;
        margin-top: 1%;
        flex-direction: column;
        background-color: rgb(230, 225, 217);
    }
    .marg {
        margin-top: 3%;
        margin-bottom: 3%;
    }
    .renglon {
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        width: 300px;
        height: 30px;
        margin-top: 0%;
        position: relative;
        left: -5px
    }
    .ancho {
        width: 300px;
    }
    .redSocial,
    .circulo {
        font-size: 15px;
    }
    .boton {
        position: relative;
        left: 90px;
    }
    footer {
        display: flex;
        width: 100%;
        height: 40vh;
        align-items: center;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 30px;
    }
    .tamano {
        width: 300px;
        height: 300px;
        position: relative;
        bottom: 100px;
    }
    .ul2 {
        display: none;
    }
    .final {
        position: relative;
        left: 60px;
    }
}