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

main {
    min-height: 100vh;
    background-image: url("./bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    transition: 1s;

    display: grid;
    place-items: center;

    h1 {
        font-size: max(3rem, 8vw);
        color: white;
        text-shadow: 4px 4px 8px rgba(0,0,0,0.5);
    }    
}

nav {
    position: absolute;
    left: 50%;
    bottom: 10%;

    input {
        height: 2em;
        width: 3em;
        cursor: pointer;
    }
}

nav:has(input#slide1:checked) ~ main { background-position-x: 0; }
nav:has(input#slide2:checked) ~ main { background-position-x: 50%; }
nav:has(input#slide3:checked) ~ main { background-position-x: 100%; }