extension/ui/styles/global.scss

@import "mixins";
@import "vars";

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Light.woff2") format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Bold.woff2") format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/JetBrainsMono-Regular.woff2") format('woff2');
}

@font-face {
    font-family: 'Jaldi';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Jaldi-Regular.woff2") format('woff2');
}

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    background: #080808;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: $font-family-jaldi;
    @include fluid-font-size(0.625rem);
}

header {
    padding: 2.5em;
    color: #fff;
    background: #080808;
    border-bottom: 0.1em solid #363636;

    img {
        @include fluid-width-height(7.875rem, 2.625rem);
    }
}

main {
    flex-grow: 1;
    overflow: hidden;
}

.btn-wrapper {
    display: flex;
    gap: 2em;

    button, > a {
        flex: 1;
    }

    > a {
        flex: 1
    }

}

.btn-wrapper > .btn-main, .btn-wrapper > a  {
    text-align: center;
    display: inline-block;
    padding: 1em;
    @include fluid-font-size(1.25rem);
    line-height: 1;
    color: #fff;
    background: #252525;
    border: 0.05em solid #252525;
    border-radius: 0.25em;
    transition: color $transition-duration, background $transition-duration, border-color $transition-duration;
    white-space: nowrap;

    &:hover {
        background: #2e2e2e;
    }

    &.btn-green {
        color: #080808;
        background: #62c554;
        border-color: #62c554;

        &:hover {
            background: #6ee65d;
        }
    }

    &.btn-black {
        background: #080808;
        border-color: #777;

        &:hover {
            border-color: #a1a1a1;
        }

        &.gray-text {
            color: #777;

            &:hover {
                color: #a1a1a1;
            }
        }
    }
}