styles.css

/* ---------------------------- G E N E R A L -----------------------------*/
:root {
    --purple-light: rgb(190, 160, 242);
    --purple-medium: rgb(130, 85, 210);
    --purple-dark: rgb(52, 0, 120);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background-color: black;
    max-width: 100vw !important;
    overflow-x: hidden;

}
::-webkit-scrollbar {
    display: none;
}

h1 {
    font-family: 'Raleway', sans-serif;
    color: #FFFFFF;

    letter-spacing: 4pt;
    font-size: 50pt;
    font-weight: 900;

}

p {
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    color: #FFFFFF;
    font-size: 14pt;
}

h2 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    color: #FFFFFF;
    font-size: 16pt;
}

#stars-container {
    z-index: 0;
    position: fixed;
}

h3 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 22pt;
    text-align: center;
}

.lilac {
    color: var(--purple-light);
}

.purple {
    color: var(--purple-medium);
}

.white {
    color: #FFFFFF;

    transition: 0.3s;
}

::selection {
    background: var(--purple-medium); /* WebKit/Blink Browsers */
}

::-moz-selection {
    background: var(--purple-medium); /* Gecko Browsers */
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                     supported by Chrome and Opera */
}

/* ---------------------------- M E N U -----------------------------*/
#menu-button {
    z-index: 99 !important;
    position: fixed;
    width: 3vw;
    margin: 2vw;
    transition: 0.5s;

}

#menu-button:hover {
    filter: brightness(400%);
}

.menu {
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    z-index: 95;
    background-color: rgba(0, 0, 0, 0.9);
    transition: 0.8s;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
    opacity: 0;
}

a {
    text-decoration: none;
}

.item-menu:hover {

    color: var(--purple-medium);
}

/* ----------------------------- I N T R O --------------------------*/
#intro {
    z-index: 10;
    width: 100vw;
    height: 100vh;
    display: flex;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;

}

#logo {
    width: 30vw;
    margin-bottom: 5vh;
}

#welcome {
    font-weight: 700;
}

.text-intro {
    width: 90vw;
}

.text-go-to{
    position: absolute;
    display: flex;
    width: 100vw;
    font-size: 18pt;
    justify-content: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    bottom: 10vh;
    transition: 0.5s;
    text-align: center;
    -webkit-animation: fadeinout 1.5s infinite; /* Safari 4+ */
    -moz-animation:    fadeinout 1.5s infinite; /* Fx 5+ */
    -o-animation:      fadeinout 1.5s infinite; /* Opera 12+ */
    animation:         fadeinout 1.5s infinite; /* IE 10+, Fx 29+ */
}
.size-18{
    font-size: 18pt;
}
.text-go-to:hover{
    color: white;
}
/* Animation */
@-webkit-keyframes fadeinout {
    0%   { opacity: 0; }
    50% { opacity: 1; }
    100%   { opacity: 0; }
}
@-moz-keyframes fadeinout {
    0%   { opacity: 0; }
    50% { opacity: 1; }
    100%   { opacity: 0; }
}
@-o-keyframes fadeinout {
    0%   { opacity: 0; }
    50% { opacity: 1; }
    100%   { opacity: 0; }
}
@keyframes fadeinout {
    0%   { opacity: 0; }
    50% { opacity: 1; }
    100%   { opacity: 0; }
}

/* ---------------------------------------- A B O U T - M E ------------------------------------------*/
#about-me {
    z-index: 10;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;

}

h1.aboutme {
    font-family: 'Raleway', sans-serif;
    color: #FFFFFF;
    text-align: left;
    letter-spacing: 4pt;
    font-size: 50pt;
    font-weight: 900;

}

#profile-pic {
    width: 80%;
    clip-path: circle();
    /*filter: grayscale(100%);*/
    text-align: center;
    margin: 2vh 0 2vh 0;
}

.desc {
    width: 31vw;
    margin-right: 3vw;
}

.skills {
    width: 31vw;
    margin-left: 3vw;
}

h4.skills-text {
    font-family: 'Raleway', sans-serif;
    color: #FFFFFF;

    letter-spacing: 1pt;
    font-size: 16pt;
    font-weight: 900;
    margin: 1vw;
    width: 100%;
    text-align: center;

}

.skills-container {
    border-radius: 50px 50px 50px 50px;
    border: 2px solid var(--purple-medium);
    margin: 1vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

h1.skills-title {
    font-family: 'Raleway', sans-serif;
    color: #FFFFFF;
    letter-spacing: 4pt;
    font-size: 50pt;
    font-weight: 900;
    text-align: right;
}

h4.skills-plus {
    font-family: 'raleway', sans-serif;
    color: var(--purple-medium);

    letter-spacing: 1pt;
    font-size: 22pt;
    font-weight: 500;
    margin: 0;
    margin-right: 1vw;
    /*position: absolute;*/

}

.skills-container:hover {
    cursor: pointer;
}

.titles-picture {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20vw;
}

.icons-skills {
    width: 0vw;
    margin: 1vh;
    transition: 0.4s;
}

.icons-skills:hover {
    filter: sepia(90%) brightness(70%) contrast(200%) hue-rotate(200deg);
    transition: 0.4s;
}

.upper-text {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.bottom-icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 0;
    transition: 0.4s;

}
.feel-free{
   transition: 0.5s;
    font-weight: 700;
}

.feel-free:hover{
    color: var(--purple-medium);
 }

/* ----------------------------- M Y - P R O J E C T S -----------------------------------*/
#projects {
    z-index: 10;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: column;

}

h1.projects-title {
    font-family: 'Raleway', sans-serif;
    color: #FFFFFF;
    text-align: right;
    letter-spacing: 4pt;
    font-size: 50pt;
    font-weight: 900;
    width: 80vw;
}

.contenedor-projects {
    z-index: 10;
    width: auto;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;

}

.each-project {
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 35vw;
    height: 70vh;
    text-align: center;
}

.project-desc {
    text-align: center;
    width: 70vw;
    margin: 1vh;
    z-index: 10;
}

.pic-project {
    width: 100%;
    object-fit: cover;
}

.info-project {
    display: flex;

    width: 70vw;
    justify-content: center;
    align-content: center;

    flex-direction: column;
    transition: 0.5s;
}

.cont-texto {
    width: 70vw;
    z-index: 10;
}

.links-container {
    margin: 3vh 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;

}

.container-two {
    display: flex;
    flex-direction: row;

    width: 100%;
    justify-content: center;
    align-content: center;
    padding: 0;
}

.info-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.anchor-link {
}

.link-img {
    width: 3vw;
    margin: 0 2vw 0 2vw;
    transition: 0.3s;
}

.link-img:hover {
    filter: grayscale(100%) brightness(500%);
    transform: rotate(-15deg) scale(1.1, 1.1);

}

.link-figure {

}

#title-project {
    margin: 2vh;
}

.flechas {
    width: 100vw;
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

}

.alinear-texto {
    width: 70vw;
}

/* ----------------------------- C O N T A C T -----------------------------------*/

#contact {
    z-index: 10;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.contact-title {
}

.contact-text {
    z-index: 10;
    width: 40vw;
    margin: 2vh;
}

/* ------------------------------ C A R R O S E L -------------------------------- */

#carrousel {
    z-index: 10;
    width: 100vw;

}
#projects-cont{
    width: 100vw;
    height: 40vh;

}
.project {
    z-index: 10;
    /* background: var(--purple-dark); */
    width: 33.3%;
    height: 40vh;
    display: none;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.2s;
   position: relative;
    box-sizing: border-box;
}



.project:nth-child(2){
    display: inline-block;
}


.project:nth-child(3) {
    display: inline-block;

}

.project:nth-child(4){
    display: inline-block;

}




.project > h5 {
    color: white;
}

.projects-flechas > img {
    margin: 2vw;
    width: 3vw;
    z-index: 10;
}

.projects-flechas > img:nth-child(2) {
    margin: 2vw;
    width: 3vw;
    z-index: 10;
}

#project-description {
    z-index: 10;
    width: 70vw;
    max-width: 70vw !important;

}

p#project-description {

    height: auto;
    z-index: 10;
    text-align: center;
    width: 70vw;

}

.projects-flechas {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.7) 100%);
    height: 40vh;
    position: absolute;
    z-index: 30;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 0 2vw 0 2vw;
    width: 100vw;

}

@media only screen and (max-width: 769px) {

    /* -----------------INTRO------------------- */
    #logo {
        width: 80vw;
        margin-bottom: 5vh;
    }

    .text-intro {
        margin: 5vw;
        text-align: center;
    }
    .size-18{
        font-size: 13pt;
    }
    /* -------------------ABOUT ME------------------ */
    #about-me {
        flex-direction: column;
    }

    .desc {
        width: 90vw;
    }

    .titles-picture {
        height: 0;
        width: 0;
        font-size: 0;
        display: none;
    }

    h1.aboutme {
        font-size: 30pt;
    }

    .skills {
        width: 90vw;

    }

    h1.skills-title {
        font-size: 30pt;
        margin-top: 2vh;
        margin-bottom: 2vh;
        text-align: right;
    }

    .link-img {
        width: 12vw;
        margin: 0 2vw 0 2vw;
        transition: 0.3s;
    }


    /* ------------------------ PROJECTS ---------------------- */
    #title-project {
        margin-top: 3vh;
        margin-bottom: 0;
        text-align: center;
    }

    #project-description {
        margin: 0;
        padding: 1vw;
        box-sizing: border-box;
        width: 80vw;
    }

    #links-each-project {

        margin: 1vh;

    }

    #projects-cont{
        width: 100vw;
        height: 30vh;

    }
    .project {

        height: 30vh;
        display: none;
        background-color: var(--purple-dark);
        width: 100%;
    }




    .project:nth-child(2){
        display: none;
    }
    .project:nth-child(3){
        display: inline-block;
    }
    .project:nth-child(4){
        display: none;
    }


    h1.projects-title {
        text-align: center;
        font-size: 30pt;
        width: 100vw;
        margin-bottom: 3vh;
    }


    /* ------------------- CONTACT ------------------ */
    .contact-title {
        text-align: center;
    }

    .contact-text {
        width: 90vw;

    }

    /* ----------------------- MENU --------------------*/
    #menu-button {
        width: 8vw;
    }
}