@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/Inter_18pt-SemiBold.ttf");
}

a {
    text-decoration: none;
}
nav a:hover, .about a:hover {
    text-decoration: underline;
}

* {
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    margin: 0;
    padding: 0;
}

.video-background {
    position: fixed;
    /* Fixes the video to the viewport */
    top: 0;
    left: 0;
    width: 100vw;
    /* 100% of viewport width */
    height: 100vh;
    /* 100% of viewport height */
    z-index: -1;
    /* Puts the video BEHIND other content */
    overflow: hidden;
}

/* 3. The Video Element Itself */
#bg-video {
    /* This is the magic sauce for aspect ratio */
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform:scaleY(-100%);
    /* Ensures the video covers the screen without stretching */
}

header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    height:8rem;
    font-size: 1.4rem;
    padding: 0 5rem;
}

header nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.8rem;
}

:root {
    background-color: #693822;
    width: 100%;
    display: flex;
    flex-direction: column;
}
body {
width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header nav a:link, header nav a:visited {
    color: #ffffffa1;
    text-decoration: none;
}
header nav a.active {
    color: #ffe9dfff;
}

.logo {
    height: 7rem;
    max-width: 90vw;
}

@media screen and (max-width: 1472px) {
    header {
        padding: 0;
        max-width: 90vw;
    }
}

main {
    margin-top: min(8rem, 5vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
}

.row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(190deg, #ffc6afff -80%, #dc784344 100%);
    padding: 1rem 2rem;
    border: none;
    outline: none;
    border-radius: 0.5rem;
    overflow: hidden;
    position:relative;
    color: #401401ff;
    font-size: 1.4rem;
    transition: filter 0.2s, transform 0.2s;
}
button::before {
    content: '';
    display: block;
    position:absolute;
    box-sizing: border-box;
    height: 100%;
    width:100%;
    top:0;
    left:0;

    border: 2px solid transparent;
    border-image: linear-gradient(185deg, #ffc6af00 0%, #ff9d64ff 100%);
    border-image-slice: 1;
}
button.secondary {
    background: linear-gradient(185deg, #ffe9df31, #ffe9df68);
    color: #ffe9dfff;
}
button.secondary::before {content: '';
    display: block;
    position: absolute;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;

    border: 2px solid transparent;
    border-image: linear-gradient(5deg, #ffe9dfa0 0%, #ffe9df00 100%);
    border-image-slice: 1;
}

.frutiger {
    margin: 2rem 0;
    width: 80rem;
    border-radius: 1rem;
    filter: saturate(2) sepia(0.7);
    max-width: 90vw;
}

button:hover {
    cursor: pointer;
    filter: brightness(1.1) contrast(1.2);
    transform: translateY(-2px);
    text-decoration: none;;
}


button:active {
    transform: translateY(0px);
    filter: brightness(0.8) contrast(1.5);
}

h2 {
    color: #ffe9dfff;
    font-size: 3.2rem;
    text-align: center;
    max-width: 60rem;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 3rem;
}
.about {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.about p {
    color: #ffffffa1;
    font-size: 1.4rem;
    text-align: center;
    max-width: 60rem;
    line-height: 1.5;
    margin-top: 1rem;
}
.about a:link, .about a:visited {
    color: #ffe9dfff;
    text-decoration: none;
    font-weight: 600;
}

body {
    margin-bottom: 5rem;
}

footer {
    color: #ffffffa1;
}@media screen and (max-width: 572px) {
    .row {
        flex-direction: column;
        width: min(20rem, 90vw);
    }

    .row a,
    .row button {
        width: 100%;
    }
}

@media screen and (max-width: 412px) {
    main {
        margin-top: 0rem;
        gap: 3rem;
    }

    h2 {
        font-size: 2.3rem;
        max-width: 90vw;
    }
}

@media screen and (max-width: 532px) {
    nav {
        justify-content: center;
    }
}