header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;

    nav {
        background: transparent;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);

    }

    .navbar-brand {
        color: var(--primary-color);
    }

    a {
        transition: .1s linear !important;
    }

    a:hover {
        color: var(--primary-color) !important;
        font-weight: 900;
        scale: 1.1;
    }

    .btn-outline-warning {
        color: var(--primary-color);
        border-color: var(--primary-color);
        transition: .1s ease-in-out !important;

        &:hover {
            color: white;
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            transform: scaleX(1.1);
        }
    }
}


@media (max-width: 520px) {
    #portal-btn {
        #portal-btn-text {
            display: none;
        }

        i {
            margin: 0 !important;
        }
    }
}

@media (max-width: 992px) {
    #large-screen-buttons {
        display: none !important;
    }

    #small-screen-buttons {
        >div {
            display: flex !important;
            flex-direction: column;
            align-items: center;
            gap: 10px;


        }
    }
}

@media (min-width: 992px) {
    #small-screen-buttons {
        display: none !important;
    }
}