/* Reset and base styles */
:root {
	--red: #FF5733;
	--green: #03bf24;
	--blue: #3357FF;
	--purple: #FF33F3;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
	font-family: serif;
}


/* Scroll container */
#container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

/* Main content */
#main {
    list-style: none;
}

/* List items - full screen sections */
#main ol {
    height: 100%;
}

#main li {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    font-size: 3rem;
    color: white;
}

/* Different background colors for each section */
#main li:nth-child(1) {
    background-color: var(--red);
}

#main li:nth-child(2) {
    background-color: var(--green);
}

#main li:nth-child(3) {
    background-color: var(--blue);
}

#main li:nth-child(4) {
    background-color: var(--purple);
}

#main li:nth-child(5) {
    background-color: var(--red);
}

#main li:nth-child(6) {
    background-color: var(--green);
}

#main li:nth-child(7) {
    background-color: var(--purple);
}

/* Audio player styling */
audio {
    width: 80%;
    max-width: 500px;
    height: 60px;
}

ol li {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

h1 {
	font-size: 30px;
	color: #fff;
}