@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('./colors.css');
@import url('./sections.css');
@import url('./responsive.css');

body {
    background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
    color: var(--white) !important;
    font-family: "Montserrat", sans-serif !important;
    cursor: default;
}

/* SNAP SCROLL */
:root {
    /* scroll-snap-type: y mandatory; */
    scroll-snap-type: none;
    scroll-behavior: smooth;
}

body section {
    scroll-snap-align: center;
}

body footer {
    scroll-snap-align: end;
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--gray);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 16px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

/* BUTTONS */
.button {
    all: unset;
    display: block;
    width: fit-content;
    padding: 1.5rem 2rem;
    border-radius: 16px;
    background-color: var(--secondary);
    color: var(--white);
    text-transform: uppercase;
    text-align: center;
    font-weight: 500;
    font-size: 1.2rem;
    cursor: pointer;
    transition-duration: 0.5s;
}

.button:hover {
    background-color: var(--secondary-dark);
}

/* TEXT */
.section-title {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 2rem;
}

.navlink {
    color: var(--white);
    text-decoration: none;
    transition-duration: 0.5s;
    font-size: 1.1rem;
    font-weight: 500;
}

.navlink:hover {
    color: var(--primary-dark);
}


/* SPACING */
.mb-7 {
    margin-bottom: 4rem !important;
}
.mt-7 {
    margin-top: 4rem !important;
}
.my-7 {
    margin-bottom: 4rem !important;
    margin-top: 4rem !important;
}

.mb-10 {
    margin-bottom: 6rem !important;
}
.mt-10 {
    margin-top: 6rem !important;
}
.my-10 {
    margin-bottom: 6rem !important;
    margin-top: 6rem !important;
}

.mb-15 {
    margin-bottom: 9rem !important;
}
.mt-15 {
    margin-top: 9rem !important;
}
.my-15 {
    margin-bottom: 9rem !important;
    margin-top: 9rem !important;
}