a{text-decoration: none;}
a:link{font-family:"verdana"; font-size:14pt; color: #3476c6;}
a:visited{color: #4499FF;}
a:hover{color:#b70000; text-decoration:none;}

* {margin: 0; padding: 0; box-sizing: border-box;}

body{
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80px 1fr;
    font-size: 16px;
    font-family: verdana;
}

nav{
    height: 80px; 
    width: 100%;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    padding-left: 30px;
    background-color: rgb(151, 185, 247);
}

main{ /* #liste_1-1 */
    padding-top: 20px;
    line-height: 20px;
    background-color: cornflowerblue;
}


/* ------- page HTML 'liste nombres premiers' -------- */

#liste_1-1{ /* correspond à <main>  */
        /* contient 2 div : #inputContainer et #ecranListe  */
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    /* & -- */
    #inputContainer{display: flex; justify-content: center; align-items: center;}
    
    input{ 
        width: 120px; height: 20px;
        font-size: 1.1rem;
        border-radius: 10px;
        padding: 0.9rem;
        background-color: #7cafed;
    }

    button{
        height: 40px; width: 40px;
        font-size: 1rem;
        border-radius: 10px;
        background-color: yellow;
    }

    button:hover{
        background-color: palegreen;
    }

    #ecranListe{
        color: rgb(75, 67, 67);
        font-size: 0.9rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, 430px);
        justify-content: center;
        gap: 10px;
        padding-bottom: 20px;
    }

    .red{color: rgb(160, 22, 22);} /*  .red{color: rgb(152, 25, 25);} */
    .blue{color: rgb(88, 165, 238);}
}


/* --------- */
@media screen and (max-width: 560px) {
    #inputContainer{
        flex-direction: column;
    }
    
    #liste_1-1{
        #ecranListe{
            grid-template-columns: 1fr;
            text-align: center;
        }
    }
}

@media screen and (max-width: 400px) {
        #ecranListe p{font-size: 0.7rem;}
}
