@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;700&family=Great+Vibes&family=Monomaniac+One&family=Montserrat:ital,wght@0,100;0,300;0,500;0,600;0,700;1,300;1,500&display=swap');

/*
font-family: 'Cinzel', serif;
font-family: 'Great Vibes', cursive;
font-family: 'Monomaniac One', sans-serif;
font-family: 'Montserrat', sans-serif;
*/

:root{
    --primary-color: #217C74;
    --secondary-color: #e1ede8;
    --secondary-color-darker: #313835;
    --dark-color: #0f0f0f;
    --color1: #1E8FCD;
    --color2: #804A53;
    --color3: #81DED5;
    --color4: #2B217C;
    --color4-darker: #0e0935;
    --color5: #7C5021;
}

*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;

}

p{
    text-align: justify;
    text-justify: inter-word;
}

nav.side-bar{
    width: 5vw;
    height: 100vh;
    background-color: var(--color4-darker);
    padding: 40px 0 40px 1%;
    box-shadow: 4px 0px 5px 1px var(--color2);
    position: fixed;
    top: 0;
    left: 0;
    max-height: 100%;
    min-width: 50px;
    transition: all 300ms ease-in-out;
    overflow: hidden;
    z-index: 10;
}

.icon{
    padding-left: 25%;
}

nav.side-bar:hover{
    width: 20vw;
}

.show-hide-button{
    width: 100%;
    padding-left: 10px;
}

.show-hide-button div{
    color: var(--secondary-color);
    font-size: 24px;
    cursor: pointer;
}

ul{
    height: 100%;
    list-style-type: none;
}

ul li.side-bar-link:hover{
    background-color: var(--color4);
    transform: translateX(-6px);
    transition: all 300ms ease-in-out;
}

ul li.side-bar-link:active{
    transform: translateX(-6px) translateY(10px);
    background-color: rgb(39, 3, 53);
    transition: all 80ms ease-in-out;
}

ul li.side-bar-link a{
    color: var(--secondary-color);
    text-decoration: none;
    font-size: calc(1vh + 1vw);
    padding: 20px 4%;
    font-family: 'Monomaniac One', sans-serif;
    display: flex;
    margin-bottom: 20px;
    line-height: 20px;
}

ul li.side-bar-link a:active{
    color: var(--secondary-color-darker);
}

ul li.side-bar-link a .linkSB{
    margin-left: 40px;
}

/*Sidebar style*/


.full-page{
    width: 100vw;
    height: 100vh;
    max-width: 100%;
}

.background-one, .background-two, .background-tree, .background-four, .background-five, .background-six{
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: row;
}

.background-one{
    background-image: url(../imgs/BackgroundHome5.jpg);
}

.background-one > div{
    width: 55vw;
    height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 25vw;
}

.background-one p{
    margin: 2.5vw 0px;
    color: var(--primary-color);
    font-family: 'Montserrat', sans-serif;
    font-size: calc(1.2vh + 1.2vw);
}

.background-one h1{
    margin: 2.5vw 0px;
    color: var(--primary-color);
    font-family: 'Montserrat', sans-serif;
    font-size: calc(1.2vh + 1.2vw);
}

.background-one h1 span{
    margin: 2.5vw 0px;
    color: var(--color4-darker);
    font-size: calc(2vh + 2vw);
    font-family: 'Great Vibes', cursive;
    padding-left: 3vw;
}



#home-page-photo{
    width: 45vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
    margin: 0;
    padding: 0;
}

#photo-container{
    width: 50%;
    height: 70%;
    max-width: 100%;
    max-height: 70%;
    background-image: url(../imgs/perfil2.png);
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
}

#section-two{
    position: relative;
}

#video-overlay{
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 4vw;
}

.right-space, .center-space, .left-space{
    width: 25vw;
    height: 65vh;
    z-index: 1;
    margin-bottom: 10vh;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.title-about-me{
    width: auto;
    height: 10%;
    font-family: 'Cinzel', serif;
    justify-self: center;
    align-self: center;
    font-size: calc(1.5vw + 1.5vh);
    color: rgb(129, 111, 7);
    text-transform: capitalize;
    background-color: var(--secondary-color);
    opacity: 0.5;
    border-radius: 20px;
    padding: 15px;
    box-sizing: content-box;
}

.text-about-me{
    width: auto;
    height: 90%;
    font-family: 'Montserrat', sans-serif;
    justify-self: center;
    align-self: center;
    font-size: calc(0.5vw + 0.5vh);
    color: var(--color4);
    font-weight: bold;
    margin-bottom: 3vh;
    background-color: var(--primary-color);
    opacity: 0.75;
    border-radius: 20px;
    padding: 15px;
    box-sizing: content-box;
}

#video-wrapper{
    object-fit: cover;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    z-index: 0;
    opacity: 0.8;
}



.background-tree, .background-four{
    background-image: url(../imgs/dragon-scales.svg);
    display: flex;
    flex-direction: column;
    background-size: auto;
}

.background-four{
    background-image: url(../imgs/subtle-prism.svg);
}

.single-title{
    width: 100vw;
    height: 20vh;
    max-width: 100%;
    max-height: 100%;
    padding-right: 4vw;
}

.single-content{
    width: 100vw;
    height: 80vh;
    max-width: 100%;
    max-height: 100%;
    padding-right: 4vw;
}

.single-title p{
    margin-left: 15vw;
    font-family: 'Cinzel', serif;
    justify-self: center;
    align-self: center;
    font-size: calc(1.5vw + 1.5vh);
    color: rgb(129, 111, 7);
    text-transform: capitalize;
    padding-top: 30px;
}

.single-content p{
    margin-left: 15vw;
    font-family: 'Montserrat', sans-serif;
    font-size: calc(1vw + 1vh);
    color: var(--color4-darker);
}

.single-content a{
    text-decoration: underline;
    font-family: 'Montserrat', sans-serif;
    font-size: calc(1vw + 1vh);
    color: rgb(129, 111, 7);
}

.single-content a:hover{
    text-decoration: underline;
    font-family: 'Montserrat', sans-serif;
    font-size: calc(1vw + 1vh);
    color: rgb(110, 96, 16);
}

.background-five{
    background-image: url(../imgs/rose-petals.svg);
}

#section-five{
    justify-content: end;
    align-items: end;
    flex-direction: column;
}

.single-content2{
    width: 100vw;
    height: 80vh;
    max-width: 100%;
    max-height: 100%;
}

.abilities{
    height: 100%;
    width: 100%;
    display: flex;
    gap: 10vw;
    justify-content: end;
    padding-left: 80px;
}

.skills{
    width: 25vw;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10%;
}

.img{
    width: 100%;
    max-width: 100%;
    height: 45%;
    max-height: 45%;
    background-size: cover;
    background-position: center center;
    border-radius: 20px;
}

#img1{
    background-image: url(../imgs/skills3.png);
    margin-left: 40px;
}

#img2{
    background-image: url(../imgs/skills1.png);
}

#img3{
    background-image: url(../imgs/skills2.png);
}

.text-img{
    width: 100%;
    max-width: 100%;
    height: 45%;
    max-height: 45%;
}

.text-img p{
    font-family: 'Montserrat', sans-serif;
    font-size: calc(0.8vw + 0.8vh);
}

#text-img1{
    margin-left: 40px;
}

#last-skill{
    margin-right: 20px;
}

.background-six{
    background-image: url(../imgs/quantum-gradient.svg);
    height: 15vh;
    border: 10px solid var(--color4-darker);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contato{
    width: 10vw;
    height: 10vh;
    font-family: 'Cinzel', serif;
    font-size: calc(1.5vw + 1.5vh);
    color: rgb(129, 111, 7);
    text-transform: capitalize;
    margin-left: 10vw;
}

.icons-bar{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7.5vw;
}

.link-icon{
    width: 5vh;
    height: 5vh;
}

.link-icon img{
    max-width: 100%;
    max-height: 100%;
    transition: all 300ms ease-in-out;
    border-radius: 20px;
}

.link-icon img:hover{
    transform: translateY(10px);
    box-shadow: 4px 4px 2px 2px var(--color4-darker);
}

/*Media queries*/

@media (max-height: 750px) {
    .right-space, .center-space, .left-space{
        height: 90vh;
    }
    .title-about-me{
        width: auto;
        height: 15%;
    }
    .text-about-me{
        width: auto;
        height: 85%;
        box-sizing: content-box;
    }
}

@media (max-height: 600px) {
    ul li.side-bar-link a{
        padding: 20px 2%;
        margin-bottom: 10px;
        line-height: 5px;
    }
    ul li.side-bar-link:active{
        transform: translateX(-6px) translateY(2px);
        background-color: rgb(39, 3, 53);
        transition: all 80ms ease-in-out;
    }
    #home-page-photo{
        width: 45vw;
        height: 100vh;
        align-items: end;
        align-self: flex-end;
    }
    
    #photo-container{
        width: 25vw;
        height: 90vh;
    }
}

@media (max-height: 450px) {
    ul li.side-bar-link a{
        padding: 0px 0px;
        margin-bottom: 0px;
        line-height: 15px;
    }
    ul li.side-bar-link:active{
        transform: translateX(-6px) translateY(2px);
        background-color: rgb(39, 3, 53);
        transition: all 80ms ease-in-out;
    }
    #home-page-photo{
        width: 45vw;
        height: 100vh;
        align-items: end;
        align-self: flex-end;
    }
    
    #photo-container{
        width: 25vw;
        height: 100vh;
    }
}

@media screen and (orientation:portrait) {
    *{
        max-width: 100%;
        max-height: 100%;
    }
    nav.side-bar:hover{
        width: 60vw;
        overflow-x: hidden;
    }
    .background-one{
        flex-direction: column;
    }
    .background-one > div{
        width: 100vw;
        height: 40vh;
    }
    #home-page-photo{
        width: 100vw;
        height: 60vh;
    }
    #photo-container{
        width: 100%;
        height: 60%;
        max-width: 100%;
        max-height: 70%;
        background-image: url(../imgs/perfil2.png);
        background-size: contain;
        background-position: center bottom;
        background-repeat: no-repeat;
        padding: 0;
        margin: 0;
    }
    #video-overlay{
        width: 100vw;
        height: 100vh;
        flex-direction: column;
        margin-top: 6vh;
        max-width: 100%;
        max-height: 100%;
    }
    .right-space, .center-space, .left-space{
        width: 85vw;
        height: 25vh;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: end;
        margin-right: 0vw;
        max-width: 100%;
        max-height: 100%;
        gap: 5px;
    }
    .title-about-me{
        width: auto;
        height: 20%;
    }
    .text-about-me{
        width: auto;
        height: 80%;
        box-sizing: content-box;
    }
    .abilities{
        flex-direction: column;
        padding-left: 0px;
    }
    #img1{
        margin-left: 0px;
    }
    #text-img1{
        margin-left: 0px;
    }
    .background-five{
        flex-direction: column;
    }
    .single-content2{
        height: 90vh;
    }
    .skills{
        width: 60vw;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin-left: 30vw;
    }
    .img{
        width: 100%;
        max-width: 100%;
        height: 45%;
        max-height: 45%;
        border-radius: 10px;
    }
    .text-img{
        width: 100%;
        max-width: 100%;
        height: 45%;
        max-height: 45%;
    }
    .link-icon{
        width: 3vh;
        height: 3vh;
    }
    #last-skill{
        margin-bottom: 5vh;
    }
    .contato{
        padding-left: 4vw;
    }
}