@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;
}

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

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

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

.navigation-item:hover{
    color : var(--color-black);
}

.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);
    }
}