:root {
    /* Blau Pedralbes */
    --fons: #00aedf;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--fons);
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #333;
}

#informacio {
    background-color: white;
    border-radius: 40px 10px;
    box-shadow: 5px 5px 5px #000000;
    padding: 2rem;
    min-width: 60%;
    margin: 20px;
}

#informacio h1 {
    font-variant: small-caps;
    color: var(--fons);
    text-align: center;
}


.item {

    width: 90%;
    margin: 1em auto;
}


#informacio label {
    display: block;
}



#informacio input {
    display: block;
    width: 100%;
    padding: .5em;
    margin-top: .25em;
}

#informacio [type="submit"] {
    display: block;
    background-color: var(--fons);
    font-size: larger;
    color: white;
    border-radius: 20px 5px;
    border: none;
    outline: none;
    padding: 1rem;
    width: 90%;
    cursor: pointer;
    box-shadow: 3px 3px 5px #000000;

}

#informacio [type="submit"]:hover, #informacio [type="submit"]:focus {
    background-color: #0077b6;
    box-shadow: 1px 1px 5px #000000;

}

/* Modifiquem l'aspecte dels checkbox per que tinguin l'aparença de chips
    Cada input té un label
    Ocultem el checkbox
    I fem que el label sigui el que es vegi
    com que estan vinculats, quan es cliqui el label, es clica el checkbox
    Canviem l'aspecte del label en funció de si el checkbox està marcat o no

    ATENCIÓ: Això no serà accessible. 
*/
/* Hem de fer un selector molt concret per sobreescriure el display block dels inputs */
#cicles [type="checkbox"] {
    display: none;
}

fieldset {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;

}

input[type="checkbox"]+label {
    transition: all 500ms ease;
    cursor: pointer;
    border-radius: 15px;
    background-color: #fff;
    border: solid 2px #7d7d7d;
    padding: 0.5rem 2rem;

}

input[type="checkbox"]:checked+label {
    background-color: var(--fons);
    color: white;
    border-color: var(--fons);
}