:root {
    --green: rgba(181, 233, 59, 1);
    --dark: rgba(74, 74, 74, 1);
    --black: #111111;
    --white: #ffffff;
    --sidebar-width: 120px;
}

main {
    width: calc(100vw - var(--sidebar-width));
    height: 100vh;
    overflow: hidden;
    display: flex;
}

main > section {
    flex: 0 0 100%;
    width: 100%;
    height: 100vh;
    display: block;
    transform: translateX(calc(var(--active-section, 0) * -100%));
    transition: transform 0.55s ease;
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Quantico", sans-serif;
    color: var(--white);
    background: var(--black);
}

.page {
    width: min(100% - 32px, 960px);
    margin: 0 auto;
    padding: 64px 0;
}

h1 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 6vw, 4rem);
}

p {
    margin: 0;
    font-size: 1.125rem;
}