a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{margin:0;padding:0;box-sizing:border-box}a,button{border:none;outline:0;text-decoration:none;background-color:none}


body{
    font-family: 'Gotham';
    background-color: black;
}

header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 3vw;
}
header .logo img{
    height: 50px;
}
header .links{
    display: flex;
    align-items: center;
    gap: 40px;
}
header .links a{
    font-size: 20px;
    color: white;
    font-weight: bold;
}
.offcanvas ul{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
}
.offcanvas ul a{
    color: black;
    font-size: 20px;
    font-weight: 500;
}

@media (max-width: 1700px){
    header .logo img {
    height: 45px;
}
header .links a {
    font-size: 18px;
}
}


@media (max-width: 1500px){
    header .logo img {
        height: 40px;
    }
        header .links a {
        font-size: 16px;
    }
}



@media (max-width: 1300px){
        header .logo img {
        height: 38px;
    }
        header .links a {
        font-size: 14px;
    }
    header .links{
    gap: 30px;
 }
}



@media (max-width: 1100px){
    header {
        padding: 18px 3vw;
    }
        header .links a {
        font-size: 13px;
    }
        header .links {
        gap: 20px;
    }
}


@media (max-width: 600px){
    header .links{
        display: none;
    }
    header .bar{
        display: block !important;
        color: white;
        font-size: 28px;
    }
}
@media (max-width: 530px) {
    header{
        padding: 18px 16px;
    }
}