@import url('https://fonts.googleapis.com/css?family=Fuggles:700|Fuggles:400');

header > h1 {
    margin : 5% 0%; 
    /*Le 5% correspond à l'espace au dessus et endessous du titre
    Le 0% correspond à l'espace sur les côtés.*/
    text-align: center;
    /*Le text-align permet de centrer le titre horizontalement*/
}

body {
  font-family: 'Fuggles';
  font-weight: 400;
  background-color:#f8f9f3;
}

h1, h2, h3, h4, h5 {
  font-family: 'Fuggles';
  font-weight: 700;
}

html {font-size: 100%;} /* 16px */

h1 {font-size: 6rem; /* 67.36px */}

h2 {font-size: 3.158rem; /* 50.56px */}

h3 {font-size: 2.369rem; /* 37.92px */}

h4 {font-size: 1.777rem; /* 28.48px */}

h5 {font-size: 1.333rem; /* 21.28px */}

small {font-size: 0.750rem; /* 12px */}

#mesPizzas article {
    background-color: #eef0e6;
}

#mesPizzas h2{
    text-align: center;
    margin:0;
}

#mesPizzas img{
    max-height: 200px;
    display: block;
    margin: 2% auto;
}




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

.link {
    font-size:250%;
    font-weight: bold;
    text-decoration: none;
    color:black;
}

.link:hover {
    color:brown;
    text-decoration :underline;
}

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

#mesPizzas article:hover{
    box-shadow:  5px 5px 5px 5px #dae4b2;
    cursor: pointer;
}

.grid-contact section{
    background-color: #eef0e6;
}

label{
    font-size: xx-large;
    font-family: 'Courier New', Courier, monospace;
}

form {
    background-color: #f8f9f3;
}

.grid-contact form textarea{
    resize: none;
    width:80%;
    min-height: 100px;
}

.grid-contact form button[type=submit]{
    background-color: #04AA6D;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
  }

  .grid-contact form select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
  }