.slider input { 
    display: none; 
}

.slides {
    display: grid; 
}

.slide { 
    grid-area: 1/1; 
    width: 100%; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    display: none;
    pointer-events: none;
}

.nav {
    text-align: center;
}

.nav label {
    text-decoration: underline;
}

.slide label { 
    cursor: pointer; 
    user-select: none;
    color:#f9e2af;
}

#s1:checked ~ .slides .slide:nth-child(1),
#s2:checked ~ .slides .slide:nth-child(2),
#s3:checked ~ .slides .slide:nth-child(3) { 
    opacity: 1; 
    display: block;
    pointer-events: auto;
}