@font-face{
        font-family: sf-pro;
        src: url("fonts/SF-Pro-Display-Semibold.otf");
        font-weight: 500;
    }
    @font-face{
        font-family: sf-pro;
        src: url("fonts/SF-Pro-Display-Regular.otf");
        font-weight: 400;
    }
    @font-face{
        font-family: sf-pro;
        src: url("fonts/SF-Pro-Display-Thin.otf");
        font-weight: 300;
    }
    .logoandname{
        display: flex;
        align-items: center;
        margin: 10px;
        color: white;
    }
    .logoandname img{
        width: 3vw;
    }
    .logoandname h1{
        font-size: 2vw;
        margin: 0px 0px 0px 1vw;
        letter-spacing: 0.35vw;
    }
    .links{
            margin-right: 1.5vw;
    }
    .links ul li{
        margin: 0.5vw;
        font-size: 1vw;
        text-decoration: none;
        list-style-type: none;
        display: inline-block;
        position: relative;
        color: white;
        font-weight: bold;
        cursor: pointer;
        border-radius: 0.5vw;
        padding: 0.5vw;
        transition: background-color 0.25s linear;
    }
    .links a{
        color: white;
        text-decoration: none;
        letter-spacing: 0.05vw;
        text-align: center;
    }
    .links ul li:hover{
        background-color: rgba(17,130,210,0.75);
    }
    .join-navbar-button{
        background-color: white;
        color: rgb(48,48,48);
        border: 0.25vw solid white;
        padding: 0.5vw;
        width: 7.5vw;
        margin-left: 1vw;
        font-family: sf-pro;
        font-weight: normal;
        font-size: 1.25vw;
        border-radius: 0.5vw !important;
    }
    .join-navbar-button:hover{
        cursor: pointer;
        opacity: 0.75;
        transition: opacity 0.25s linear;
    }
    .contact-navbar-button:hover{
        cursor: pointer;
        opacity:0.75;
        transition: opacity 0.25s linear;
    }
    .contact-navbar-button{
        background: none;
        border: 0.25vw solid white;
        color: white;
        padding: 0.5vw;
        width: 7.5vw;
        margin-left: 1vw;
        font-family: sf-pro;
        font-weight: normal;
        font-size: 1.25vw;
        border-radius: 0.5vw !important;
    }
    .navigation{
        position: fixed;
        width: 100%;
        z-index: 900;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-image: url("images/navbar-background-pc.jpg");
        background-size: 100% 100%;
        transition: transform 1s ease;
        height: 6vw;
    }
    .navigation.hidden{
        transform: translateY(-6vw);
    }
    .hamburger{
            display: none;
    }
    .close{
        display: none;
    }
    @media(max-width: 770px){
        body.no-scroll{
        overflow:hidden;
        }
        .hamburger{
            background: none;
            border: none;
            color: white;
            font-size: 10vw;
            display: flex;
        }
        .close{
            display: flex;
            font-size: 5vw;
            background: none;
            color: white;
            justify-self: flex-end;
        }
       .join-navbar-button{
            background-color: white;
            color: rgb(48,48,48);
            border: 0.5vw solid white;
            padding: 1vw;
            width: 30vw;
            margin-right: 0;
            font-family: sf-pro;
            font-weight: normal;
            font-size: 5vw;
            border-radius: 1vw !important;
            align-self: center;
        }
        .join-navbar-button:hover{
            cursor: pointer;
            opacity: 0.75;
            transition: opacity 0.25s linear;
        }
        .contact-navbar-button:hover{
            cursor: pointer;
            opacity:0.75;
            transition: opacity 0.25s linear;
        }
        .contact-navbar-button{
            background: none;
            border: 0.5vw solid white;
            color: white;
            padding: 1vw;
            width: 30vw;
            margin-right: 0;
            font-family: sf-pro;
            font-weight: normal;
            font-size: 5vw;
            border-radius: 1vw !important;
            align-self: center;
        }
        .navigation{
            height: 12vw;
            background-image: url("images/navbar-background-mobile.jpg");
            background-size: 100% 100%;
        }
        .navigation.hidden{
            transform: translateY(-12vw) !important;
        }
        .logoandname img{
            width: 7.5vw;
        }
        .logoandname h1{
            font-size: 4vw;
            margin: 0px 0px 0px 2vw;
            letter-spacing: 0.7vw;
        }
        .links ul{
            display: flex;
            flex-direction: column;
            gap: 5vw;
            padding-left: 0;
        }
        .links ul li{
            display: flex;
            align-self: center;
            font-size: 4vw;
        }
        .links{
            flex-direction: column;
            background-color: rgb(60,60,60);
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            width: 40%;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            padding: 2rem 1rem;
            gap: 1.5rem;
            text-align: right;
            z-index: 998;
            margin: 0;
        }
        .links.show{
            transform: translateX(0);
        }
    }