@font-face {
    font-family: 'Maven Pro';
    src: url(files/fonts/Maven_Pro/MavenPro-VariableFont_wght.ttf);
    font-weight: 900;
    font-variation-settings: 'wght' 900;
}

@font-face {
    font-family: 'Red Hat Display';
    src: url(files/fonts/Red_Hat_Display/RedHatDisplay-VariableFont_wght.ttfS);
    font-weight: 300;
    font-variation-settings: 'wght' 300;
}

body::-webkit-scrollbar{
    width: 5px;
}
body::-webkit-scrollbar-track{
    background: #1e1e1e;
}
body::-webkit-scrollbar-thumb{
    background: #438A55;
    border-radius: 5px;
}

body {
    margin: 0;
}

main {
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #d8d8df;
}

#cover {
    width: 100%;
    height: 720px;
    max-height: 100vh;


    display: flex;
    align-items: center;
    flex-direction: columns;
    justify-content: center;
    
    background-image: url(files/cover-background.png);
    background-color: #1e1e1e;
    background-repeat: no-repeat;
    background-size: cover; 
}

#cover-content {
    width: 90%;
    height: 200px;

    font-family: 'Maven Pro', sans-serif;
    font-size: 6em;
    font-weight: bold;
    text-align: center;
    position: absolute;
    color: #ededf5;      
}

p {
    margin: 0;
}

a {
    all: unset;
}

a:hover {
    cursor: pointer;
}

.bx {
    font-size: 0.4em;
    opacity: 0.55;
    cursor: pointer;
}

.bx:hover {
    transition-duration: 30ms;
    opacity: 1;
}

.bx-chevrons-down {
    color: white;
    font-size: 45px;
    opacity: 0.3;   
    animation-duration: 2s;
}

.scroll-link {
    position: absolute;
    align-self: flex-end;
}

#projects {
    width: 90%;
    height: 1000px;
    max-height: 100vh;
    max-width: 100%;

    background-color: #d8d8df;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: space-around;
    padding-bottom: 30px;

    font-family: 'Red Hat Display', sans-serif;
}

figure {
    all: unset;
}

.projects-fig {
    width: 350px;
    height: 250px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.projects-img:hover {
    transition-duration: 1s;
    opacity: 0.7;
    transform: scale(1.1, 1.1);
}

.projects-img {
    width: 8em;
    height: 8em;

    border-radius: 100%;
    box-shadow: 2px 2px 2px black;
}

.project-title {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    color: #1e1e1e;
}

.project-description {
    text-align: justify;
}

#about {
    width: 100%;
    height: 720px;
    height: auto;
    max-height: 100vh;

    background-color: #1e1e1e;
    color: #d8d8df;
    ;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#about-title, #about-sub {
    width: 80%;
    height: 60px;
    font-family: 'Maven Pro', sans-serif;
    font-weight: 900;
    text-align: center;
}

#about-title {
    font-size: 6em;
    color: #d8d8df11;
    overflow: visible;
}

#about-sub {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 1.5em;
    color: #f6f6f6;
}



#projects-title, #projects-sub {
    width: 80%;
    height: 60px;
    font-family: 'Maven Pro', sans-serif;
    font-weight: 900;
    text-align: center;
}

#projects-title {
    font-size: 6em;
    color: #1e1e1e11;
    overflow: visible;
}

#projects-sub {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 1.5em;
    color: #1e1e1e;
}



#about-content {
    width: 90%;
    height: 600px;

    display: flex;
    align-items: center;
    justify-content: space-around;
}

.about-img {
    width: 276px;
    height: 370px;
    border-radius: 1em;
    opacity: 0;
    transition-duration: 1.5s;
}

.about-img:hover {
    opacity: 1;
}

#about-avatar {
    background-image: url(files/avatar.png);
    width: 276px;
    height: 370px;
    border-radius: 1em;
    background-repeat: no-repeat;
    background-size: cover; 
    opacity: 70%;
}

#about-txt {
    width: 60%;
    height: 470px;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 1.5em;
    text-align: justify;

    display: flex;
    flex-direction: column;
    align-content: space-around;
    justify-items: center;
    justify-content: space-evenly;
}

.skills {
    font-family: 'Maven Pro', sans-serif;
    font-size: 1em;
    font-weight: bold;   
}

.skills-bar {
    width: 720px;
    height: 25px;
    border-radius: 5px;
}

#html {
    background-image: linear-gradient(90deg, #438A55aa 95%, #ededf5aa 5%);
}

#css {
    background-image: linear-gradient(90deg, #438A55aa 85%, #ededf5aa 15%);    
}

#javascript {
    background-image: linear-gradient(90deg, #438A55aa 70%, #ededf5aa 30%);
}

#figma {
    background-image: linear-gradient(90deg, #438A55aa 67%, #ededf5aa 33%);  
}

#english {
    background-image: linear-gradient(90deg, #438A55aa 100%, #ededf5aa 0%);      
}