@font-face {
    font-family: "Opaline";
    src: url(../assets/fonts/Opaline/Opaline.ttf);
}
@font-face {
    font-family: "Raleway-Light";
    src: url(../assets/fonts/Raleway/Raleway-Light.ttf);
}

@font-face {
    font-family: "Raleway-Blod";
    src: url(../assets/fonts/Raleway/Raleway-Bold.ttf);
}
:root{
    --primary: #586470;
    --primaryOpec: #586470d0;
    --secondary: #C3C2D0;
}
h1,h2,h3,h4,button {
    font-family: "Opaline";
}
h1 {
    font-size: 68px;
}

h2 {
    font-size: 50px;
}

h3 {
    font-size: 32px;
    line-height: 36px;
}
@media screen and (max-width:650px) {
    h1 {
        font-size: 50px;
    }

h2 {
    font-size: 36px;
}

h3 {
    font-size: 32px;
    line-height: 36px;
}
}

p, ul, li {
    font-family: "Raleway-Light";
    line-height: 24px;
    text-align: left;
}


button {
    border: 1px solid #fff;
    background-color: #ffffff00;
    font-size: 30px;
    color: #fff;
    padding: 12px 60px;
}


#projectNav > a {
    display: block;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    background-color: var(--primary);
    position: fixed;    
    bottom: 12vw;
    
    z-index: 3000;
    opacity: 0.8;
    transition: all 0.4s ease;
}

#projectNav > a:nth-child(1){
    left: 6vw; 
} 

#projectNav > a:nth-child(2){
    right: 6vw;
} 

#projectNav > a:nth-child(2) > img{
    rotate: 180deg;
}

@media screen and (min-width:650px) {
    #projectNav > a {
        top: 50%;
        transform: translateY(-50%);
    }
}