* {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    font-family: 'Jura', sans-serif;
    font-family: 'Krona One', sans-serif;
    font-family: 'Play', sans-serif;
    
  }

/* Titles, subtitles and paragraph styles*/
h1{
    font-family: 'Jura', sans-serif;
    color: #5b0747;
    font-weight: 700;
    display: inline;
    position: relative;
    /* font: 200px Helvetica, Sans-Serif; */
    letter-spacing: -5px;
    /* color: rgba(0,0,255,0.5);  */
}


p{
    font-family: 'Play', sans-serif;
    color: #50514F;
    font-weight: regular;
}

/*Principal container*/
.containerppal{
    max-width: 100vw;
    margin: 0 0 0 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: hidden;
}

/*Side Menu */
nav {
    color: white;
}
.nav_trigger-finger {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    width: 15px;
    height: 10px;
    margin: 40px;
    color:#5b0747;
}
.nav_trigger-finger::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    bottom: -5px;
    right: -5px;
    background:#5b0747;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s cubic-bezier(0.75, 0, 0.25, 1);
}
.nav_trigger-finger span {
    display: block;
    width: 100%;
    height: 2px;
    transition: transform 1s cubic-bezier(0.75, 0, 0.25, 1);
    background: currentColor;
}
.nav_trigger-finger span::before, .nav_trigger-finger span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform 0.4s cubic-bezier(0.75, 0, 0.25, 1), top 0.4s 0.4s cubic-bezier(0.75, 0, 0.25, 1), background 0.2s cubic-bezier(0.75, 0, 0.25, 1);
}
.nav_trigger-finger span::before {
    top: 0;
}
.nav_trigger-finger span::after {
    top: calc(100% - 2px);
}
.nav_trigger-input {
    opacity: 0;
    width: 0;
    height: 0;
    appearance: none;
    position: fixed;
}
.nav_trigger-input:focus + label {
    color: white;
}
.nav_trigger-input:focus + label::before {
    opacity: 1;
}
.nav_trigger-input:checked + label {
    height: 10px;
    color: white;
}
.nav_trigger-input:checked + label span {
    transform: rotate(45deg);
}
.nav_trigger-input:checked + label span::before, .nav_trigger-input:checked + label span::after {
    top: calc(50% - 1px);
    transition: transform 0.4s 0.4s cubic-bezier(0.75, 0, 0.25, 1), top 0.4s cubic-bezier(0.75, 0, 0.25, 1), background 0.2s cubic-bezier(0.75, 0, 0.25, 1);
}
.nav_trigger-input:checked + label span::after {
    transform: rotate(90deg);
}
.nav_trigger-input:checked ~ ul {
    z-index: 9;
    transform: none;
    transition: 0.5s cubic-bezier(0.75, 0, 0.25, 1);
}
.nav_list {
    position: fixed;
    overflow-y: none;
    top: 0;
    left: 0;
    bottom: 30%;
    /* right: 0; */
    z-index: 0;
    background:#5b0747;
    font-size: 2rem;
    padding: 40px;
    transform: translate(100vw) rotate(45deg);
    transition: 0.2s cubic-bezier(0.75, 0, 0.25, 1);
}
.nav_item {
    list-style: none;
    margin-bottom:4vh;
}
.nav_item + .nav_item {
    margin-top: 20px;
}

.nav_link {
    text-decoration: none;
    color: inherit;
}

.nav_link:hover{
    color: thistle;
}

.nav_link:active{
    top: calc(50% - 1px);
    transition: transform 0.4s 0.4s cubic-bezier(0.75, 0, 0.25, 1), top 0.4s cubic-bezier(0.75, 0, 0.25, 1), background 0.2s cubic-bezier(0.75, 0, 0.25, 1);
    transform: rotate(90deg);
}

.nav_list-child {
    display: none;
    font-size: 2rem;
    margin-top: 10px;
    padding-left: 2rem;
}




/*Welcome Section*/

.welcome{
    background-image: url('./assets/images/hiclipart.com.png');
    background-repeat: no-repeat;
    background-position:top;
    background-size: cover;
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: #f5e6f3;
}

.welcome .name{
    height: 40vh;
    margin-top: 23%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 3;
}

.welcome .name h1{
    text-align: center;
    font-size: 15vh;
    color: #5b0747;
    font-weight: bolder;
}


/*About Me Section*/

.aboutMe{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px;
    background-color: #bcbfde;
}

.aboutMe .title{
    height: 2vh;
    text-align: center;
    font-size: 2vw;
    font-weight: 600;
    color: #8E097B;
    margin-top: 5vh;
    margin-bottom: 10vh;
}

.aboutMe .containerabout{
    width: 90vw;
    height: inherit;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-left: 10vh;
    /* border: 1px solid blue; */
}

.containerabout .photo{
    width: 85vh;
}

.photo .myphoto{
    width: 70%;
    margin: 15vh;
    object-fit: contain;
    border: 4px solid #5D0B4B;
}

.textaboutme{
    width: 40vw;
    margin: 15vh;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    line-height: 1.6;
    font-weight: regular;
}

.descriptionMe, .softskills, .hardskills{
    margin-bottom: 2vh;
}

.crosstext{
    font-family: 'Play', sans-serif;
    text-decoration: line-through;
}

.underlined{
    text-decoration: underline;
}

/* Section Proyect */
.proyects{
    /* height: 100vh; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;  
    padding: 50px;
    background-color: #f5e6f3;
    
}

.proyects .title{
    height: 2vh;
    text-align: center;
    font-size: 2vw;
    font-weight: 600;
    margin-top: 5vh;
    margin-bottom: 10vh;
}

/* .proyects .title h1{
    color:white;
} */


.row{
    padding: 60px;
    max-width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    margin-left: 7vw;
}
/*Cards for display of proyects */
 
.card{
    max-width: 305px;
    max-height: 480px;
}

.card-img-top{
    width: 40%;
    height: 15vh;
    margin-left: 6vw;
    /* margin-right: 10vw; */
    margin-top: 1vh;
}

.card-link{
    font-size: small;
    color: #5D0B4B !important;
}
/*
.card-text{
    font-size: 2vh;
} */


/* Section Contact*/
.contact{
    height: 100vh;
    /* width: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;  
    padding: 50px;
    background-color: #bcbfde;
}

.contact .title{
    height: 2vh;
    text-align: center;
    font-size: 2vw;
    font-weight: 600;
    color: #8E097B;
    margin-top: 5vh;
    margin-bottom: 10vh;
    font-family: 'Black Ops One', cursive;
}
.contact .contactcontainer{
    width: 90vw;
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    margin-left: 1vh;
    /* border: 1px solid blue; */
}

.contactcontainer a{
    width: 100px;
    height: 100px;
    line-height: 90px !important;
    position: relative;
    margin: 0 5px;
    text-align: center;
    display: inline-block;
    color: #5b0747;
    -webkit-transition: all 0.27s cubic-bezier(0.300,0.100,0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); 
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); 
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);

}

.contactcontainer a i, .contactcontainer a span{
    position: relative;
    top: 2px;
    left: 1px;
}

.contactcontainer a:before{
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 3px solid #5b0747;
    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    
    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);  
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); 
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000); 
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.contactcontainer a:hover{
    color: #FFF6F2;
}

.contactcontainer a:hover::before{
    background: #5D0B4B;
}




/*Media Queries*/

/* For Phones */
@media(max-width:450px){
    .nav_list{
        height: 45vh;
        width: 400px;
    }
    .nav_item{
        font-size: 4vh;
    }
    .welcome{
        height: 100vh;
        width: 100%;
        object-fit: fill;
        display: flex;
        justify-content: center;
    }

    .welcome .name{
        height: 50vh;
        margin-top:40%;
        font-size: 2rem;
    }

    .welcome .name h1{
        font-size: 6vh;
    }

    .aboutMe, .proyects, .contact{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .aboutMe .title, 
    .proyects .title, 
    .contact .title{
    height: 2vh;
    text-align: center;
    font-size: 3vw;
    font-weight: 600;
    color: #8E097B;
    margin-top: 2vh;
    /* margin-bottom: 2vh; */
    }

    .aboutMe .containerabout, 
    .proyects .containerproyects, 
    .contact .contactcontainer{
        width: 90%;
        height: 100vh;
        margin-left: 3vh;
        display: flex;
        flex-direction: column;
    }

    .containerabout .photo{
        width: 30vh;
    }
    
    .photo .myphoto{
        margin: 1vh;
        margin-left: 5vh;
        margin-bottom: 0vh;
    }
    
    .textaboutme, .text{
        width: 78vw;
        margin: 1vh;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        line-height: 1.6;
        font-weight: 500;
        font-size: 4vw;
        text-align: center;
        margin-left: 0vh;
    }

    .containerproyects {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: center;
        width: 90vw;
        height: 50%;
    }

    .row{
        padding: 1px;
        max-width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        margin-top: 8vh;
        margin-left: 1vw;
    }
    .card-text{
        font-size: 4vw;
    }

    .card-img-top{
        width: 50%;
        margin-left: 10vw;
    }
    .contactcontainer .icons{
        margin-left: 8vw;
        margin-right: 8vw;
        display: flex;
        flex-direction: column;
    }
    .contactcontainer a{
        width: 60px;
        height: 60px;
        line-height: 60px !important;
        margin-left: 15w;
    }
    
}

/* For Tablets */
 @media (min-width:451px) and (max-width:900px){

    .nav_list{
        height: 27%;
        z-index: 0;
        font-size: 2vh;
        left: 0;
        margin-bottom:2px;
    }

    .nav_item{
        margin-bottom: 2vh;
    }
    .welcome{
        height: 100vh;
        width: 100%;
        object-fit: fill;
        display: flex;
        justify-content: center;
    }

    .welcome .name{
        margin-top: 45%;
    }
    .aboutMe{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .aboutMe .title{
    height: 2vh;
    text-align: center;
    font-size: 3vw;
    font-weight: 600;
    color: #8E097B;
    margin-top: 5vh;
    margin-bottom: 5vh;
    }
    .aboutMe .containerabout{
        width: 90%;
        margin-left: 3vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .containerabout .photo{
        width: 30vh;
    }
    
    .photo .myphoto{
        margin: 1vh;
        margin-left: 5vh;
    }
    
    .textaboutme{
        width: 78vw;
        margin: 1vh;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        line-height: 1.6;
        font-weight: 500;
        font-size: 15px;
        text-align: center;
        margin-left: 0vh;
    }

    .card-img-top{
        width: 50%;
        margin-left: 5vh;
    }
    .card-text{
        font-size: 15px;
    }
    .contact{
        padding: 50px;
    }
    .contactcontainer{
        /* max-width: 100vw; */
        width: 90%;
        margin-left: 3vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin-left:1vh;
    }

    .contactcontainer .text{
        width: 78vw;
        margin: 1vh;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        line-height: 1.6;
        font-weight: 500;
        font-size: 15px;
        text-align: center;
        margin-left: 0vh;
    }
    .contactcontainer .icons{
        margin-left: 8vw;
        margin-right: 8vw;
        display: flex;
        flex-direction: row;
        padding: 20px;
    }
    
}