@import "tailwindcss";

@layer theme {
    :root {
        --spacing: 1px;
    }
}

html {
    scroll-behavior: smooth;
}

.layout-container {
    width: 90%;
    margin: 0 5%;
}

.layout-container-2 {
    width: 75%;
    margin: 0 12.5%;
}

.layout-container-overflow {
    /* Hide scrollbar for IE, Edge and Firefox */
    overflow-x: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.layout-container-overflow::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar indicator */
@layer utilities {
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
}

/* NAVIGATION */
.navigation,
.navigation-mobile {
    position: fixed;
    top: 0;
    width: 100%;
}

.navigation-white {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 15%, #FFF 99%);
}

.navigation-mobile {
    right: -100%;
    transition: right 0.5s;
}

.navigation-item {
    padding: 8px 0px;
    letter-spacing: var(--tracking-widest);
    font-size: var(--text-base);
}

.navigation-item.active {
    color: var(--color-primary);
}


/* HEADING */

h1 {
    font-size: var(--text-2xl);
    font-family: var(--font-medium);
}

/* BACKGROUND */
.full-background {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* SMARTPHONE */
@media (max-width: 600px) {
    /* DISPLAY */
    .layout-container {
        width: calc(100vw - 32px);
        margin: 0 16px;
    }

    h1 {
        font-size: var(--text-lg);
    }
}