/* All font styles */
.shantell-sans {
    font-family: "Shantell Sans", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "BNCE" 0,
    "INFM" 0,
    "SPAC" 0;
}

.bonbon-regular {
    font-family: "Bonbon", cursive;
    font-weight: 400;
    font-style: normal;
}

.courier-prime-regular {
    font-family: "Courier Prime", monospace;
    font-weight: 400;
    font-style: normal;
}

.courier-prime-bold {
    font-family: "Courier Prime", monospace;
    font-weight: 700;
    font-style: normal;
}

.courier-prime-regular-italic {
    font-family: "Courier Prime", monospace;
    font-weight: 400;
    font-style: italic;
}

.courier-prime-bold-italic {
    font-family: "Courier Prime", monospace;
    font-weight: 700;
    font-style: italic;
}

.kablammo-regular {
    font-family: "Kablammo", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "MORF" 0;
}

.kranky-regular {
    font-family: "Kranky", serif;
    font-weight: 400;
    font-style: normal;
}

.lovers-quarrel-regular {
    font-family: "Lovers Quarrel", cursive;
    font-weight: 400;
    font-style: normal;
}

/* Whole page styles */
html {
    scroll-behavior: smooth;
    position: relative;
    min-height: 100vh;
}

/* Top background image covering full width */
html::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background-image: url('../img/background_top.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: 1;
    pointer-events: none;
}

/* Bottom background image covering full width */
html::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background-image: url('../img/background_bottom.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom center;
    z-index: 1;
    pointer-events: none;
}

body {
    font-family: 'Shantell Sans', sans-serif;
    background-color: rgb(248,247,250);
    position: relative;
    z-index: 2;
}

.hero-background {
    position: relative;
    min-height: 100vh;
    z-index: 3;
}

/* Scroll snap functionality */
html {
    scroll-snap-type: y mandatory;
}

.snap-section {
    scroll-snap-align: start;
    min-height: 100vh;
}

/* Section styling */

#hero {
    background-color: transparent !important;
}

#about {
    background-color: #d3d7d2;
}

#projects {
    background-color: #ffffff;
}

#notes {
    background-color: #d3d7d2;
}

#now {
    background-color: #ffffff;
}

#contact {
    background-color: #d3d7d2;
}