* {
    box-sizing: border-box;
}

#poussezvous{
   margin-right: 40%;
   font-size: large;
}
html,body {
    margin:0;
    padding:0;
    height: 100%;
}

.grid-container{
    display: grid;
    grid-template-areas:
        "header"
        "nav"
        "section"
        "footer";
        /*grid-template-rows: 4FR 1FR 6FR 1FR;
        height : 100vh;*/
}

.grid-container div {
     padding: 10px ;
}

.detail-cpu{
    display: grid;
    grid-template-areas: "img-cpu desc-cpu"
                        "gpu desc-cpu";
    min-height: 100vh;
}

.img-cpu{
    grid-area: img-cpu;
    display: flex ;
    justify-content: center;
    align-items: center;
    background-color: #6779aa;
}

.img-cpu img{
    height: 50vh;
}

.desc-cpu{
    grid-area: desc-cpu;
    background-color: #7c91cb;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.gpu-recommande{
    grid-area: gpu;
    background-color: #7185bc;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

@media screen and (max-width: 500px)
{ 
    .grid-container{
        display: grid;
        grid-template-areas:
            "header"
            "nav"
            "aside"
            "section"
            "footer";
            grid-template-columns: auto;
            grid-template-rows: 2FR 1FR 6FR 1FR 1FR;
            min-height : 100vh
        }

        header {
            height: 10vh;
        }
}
    

    .header {
        grid-area: header;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url("../images/core-i7-5775c-banniere.jpg") ;
        background-size: 100%;
        background-position: center;
        text-align: center;
        font-size: 8vh;
        font-family: 'Times New Roman', Times, serif;
        color: #f2f2fa;
        height: 30vh;
    }

    .main-cpu {

        display: flex;
        max-width: 500px;
    }

    .nav {
        grid-area: nav;
        background-color: #6779aa;
        display: flex;
        text-align: left;
        justify-content: left;
        align-items: center;
        overflow: hidden;
        font-size: large;
        font-family: 'Times New Roman', Times, serif;
        gap:20px;
    }

    .nav a {
        text-decoration: none;
        color: black;
        padding: 20px 120px;
        font-size: x-large;
    }

    .nav a:hover {
        color: aliceblue;
    }
    .aside {
        grid-area: aside;
    }

    .section {
        grid-area: section;
        background-color: #7c91cb;
        display: flex;
    }

    .cpus {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin: 2% auto;
        column-gap: 100px;
        row-gap: 10px;
    }

    .cpu{
        max-width: 250px;  
    }

    .cpu img {
        height: 250px;
        display: block;
        margin: 2% auto;
    }

    .footer {
        grid-area: footer;
        background-color: #6779aa;
        text-align: left;
    }

    .footer a{
        text-decoration: none;
        color: black;
        font-size: large;
        font-family: 'Times New Roman', Times, serif;
    }

    .footer a:hover {
        color: aliceblue;
    }

    .Formulaire{
        background-color: #6779aa;
    }

    @media screen and (max-width: 480px) {
        .nav {
            display: felx;
            grid-template-columns: auto;
            column-gap: 10px;
            row-gap:  10px;
        }
        .header{
            display: flex;
            background-image: url("../images/core-i7-5775c-banniere.jpg") ;
            background-size: 25%;
        }
        .cpus {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            margin: auto;
            column-gap: auto;
            row-gap: auto;
        }

        
    }
    @media screen and (min-width: 1000px) {
        .nav {
            display: flex;
            grid-template-columns: auto auto;
            column-gap: 10px;
            row-gap:  10px;
        }
    }