@font-face {
    font-family: "FoundersGroteskCond";
    src: url("fonts/FoundersGroteskCond/FoundersGroteskCond-Med.otf") format("opentype");
}

@font-face {
    font-family: "FoundersGrotesk";
    src: url("fonts/FoundersGrotesk/FoundersGrotesk-Bold.otf") format("opentype");
    font-weight: bold;
}

@font-face {
    font-family: "FoundersGrotesk";
    src: url("fonts/FoundersGrotesk/FoundersGrotesk-BoldItalic.otf") format("opentype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "FoundersGrotesk";
    src: url("fonts/FoundersGrotesk/FoundersGrotesk-Light.otf") format("opentype");
    font-weight: 300;
}

@font-face {
    font-family: "FoundersGrotesk";
    src: url("fonts/FoundersGrotesk/FoundersGrotesk-LightItalic.otf") format("opentype");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "FoundersGrotesk";
    src: url("fonts/FoundersGrotesk/FoundersGrotesk-Medium.otf") format("opentype");
    font-weight: 500;
}

@font-face {
    font-family: "FoundersGrotesk";
    src: url("fonts/FoundersGrotesk/FoundersGrotesk-MediumItalic.otf") format("opentype");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "FoundersGrotesk";
    src: url("fonts/FoundersGrotesk/FoundersGrotesk-Regular.otf") format("opentype");
    font-weight: 400;
}

@font-face {
    font-family: "FoundersGrotesk";
    src: url("fonts/FoundersGrotesk/FoundersGrotesk-RegularItalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "FoundersGrotesk";
    src: url("fonts/FoundersGrotesk/FoundersGrotesk-Semibold.otf") format("opentype");
    font-weight: 600;
}

@font-face {
    font-family: "FoundersGrotesk";
    src: url("fonts/FoundersGrotesk/FoundersGrotesk-SemiboldItalic.otf") format("opentype");
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: "FoundersGroteskXCond";
    src: url("fonts/FoundersGroteskXCond/FoundersGroteskXCond-Med.otf") format("opentype");
}

@font-face {
    font-family: "FoundersGroteskText";
    src: url("fonts/FoundersGroteskText/FoundersGroteskText-Bold.otf") format("opentype");
    font-weight: bold;
}

@font-face {
    font-family: "FoundersGroteskText";
    src: url("fonts/FoundersGroteskText/FoundersGroteskText-Light.otf") format("opentype");
    font-weight: 300;
}

@font-face {
    font-family: "FoundersGroteskText";
    src: url("fonts/FoundersGroteskText/FoundersGroteskText-Medium.otf") format("opentype");
    font-weight: 500;
}

@font-face {
    font-family: "FoundersGroteskText";
    src: url("fonts/FoundersGroteskText/FoundersGroteskText-Regular.otf") format("opentype");
    font-weight: 400;
}

@font-face {
    font-family: "FoundersGroteskText";
    src: url("fonts/FoundersGroteskText/FoundersGroteskText-Semibold.otf") format("opentype");
    font-weight: 600;
}

nav {
    font-family: FoundersGroteskText, sans-serif;
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 4px solid #990101;
    margin-bottom: 0.5rem;

    a {
        text-decoration: none;
        color: #fff;
        border-radius: 5px;
        border: 1px #990101 solid;
        background-color: #990101;
        padding: 0.25rem 0.5rem;
        transition: 0.2s ease-in-out;

        &:hover {
            background-color: #fff;
            color: #990101;
        }

        &.active {
            background-color: #fff;
            color: #990101;
        }
    }
}

#best-main {
    display: flex;
    gap: 2rem;
    padding: 2rem;
}

#best-input {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

#best-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}