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

@font-face {
    font-family: 'Gotham-Black';
    src: url("../fonts/Gotham-Black.otf");
}
@font-face {
    font-family: 'Gotham-Black-Italic';
    src: url("../fonts/Gotham-BlackItalic.otf");
}
@font-face {
    font-family: 'Gotham-Bold';
    src: url("../fonts/Gotham-Bold.otf");
}
@font-face {
    font-family: 'Gotham-Bold-Italic';
    src: url("../fonts/Gotham-BlackItalic.otf");
}
@font-face {
    font-family: 'Gotham-Book';
    src: url("../fonts/Gotham-Book.otf");
}
@font-face {
    font-family: 'Gotham-Book-Italic';
    src: url("../fonts/Gotham-BookItalic.otf");
}
@font-face {
    font-family: 'Gotham-Light';
    src: url("../fonts/Gotham-Light.otf");
}
@font-face {
    font-family: 'Gotham-Medium';
    src: url("../fonts/Gotham-Medium.otf");
}
@font-face {
    font-family: 'Gotham-Thin';
    src: url("../fonts/Gotham-Thin.otf");
}

header{
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 10;
    width: 60vw;
    margin: 0 auto;
}
header .wrapper{
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-shadow: 0 2px 4px #000;
    padding: 5px 30px;
    border-radius: 40px;
}
header .wrapper .left, header .wrapper .right{
    display: flex;
    align-items: center;
}
header .wrapper .left img, header .wrapper .right img{
    height: 25px;
    padding: 0 5px;
}
header .wrapper .left .clickable, header .wrapper .right .clickable{
    cursor: pointer;
    transition: all 200ms ease;
}
header .wrapper .left .clickable:hover, header .wrapper .right .clickable:hover{
    transform: scale(1.1);
}
header .wrapper .right .logo{
    height: 40px;
}

.background-layer{
    background:linear-gradient(#fed65d, #b76b31);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background-attachment: fixed;
    width: 100vw;
    z-index: -2;
}
.background-layer img{
    width: 100vw;
}


@media (max-width: 1200px){
    header {
        width: 80vw;
    }
}
@media (max-width: 800px){
    header {
        width: 98vw;
    }
    header .wrapper {
        padding: 5px 5px;
    }
}
@media (max-width: 400px){
    header .wrapper .left img, header .wrapper .right img {
        height: 20px;
    }
    header .wrapper .right .logo {
        height: 30px;
    }
}