body {
	padding: 0px;
	width: 100%;
	min-width: 300px;
	max-width: 960px;
	display: grid;
    grid-template-columns: 1fr ;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    grid-template-areas:
        "head"
        "main"
        "pied"
        ;
    background: url(fond.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: Rajdhani;

}

h1 {
    text-align: center;
    font-size: 36px;
}
#matériel{
    text-align: center;
}

p {
   text-align: center;
   font-size: 22px;
   }

header{
    grid-area: head;
    background-color: #4b4b4b;
    color: white;
}

nav ul{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	
	
}

nav li{
	display: flex;
	flex-grow: 1;
	text-align: center;
    
    font-size: 30px;
    padding: 20px;
    text-align: center;
}

nav a{
	display: block;
	width: 100%;
    text-decoration: none;
    color: white;
}

main{
    grid-area: main;
}


#aria {
    width: 150%;
    height: 150%;
}
#Simple{
    font-size: 30pt
}

#end{
    text-align: center;
    width: 80%;
    font-size: 20pt;
}

footer {
    
    color: white;
    position: absolute;
    
    right: 0;
    bottom: 0;
    left: 0;
    padding: 30px;
    background-color: #303030;
    font-family: Rajdhani;
    text-align: center;
    grid-area: pied;
}


button {
             font-size: 15pt;
            font-family: Rajdhani;
             padding: 15px 32px;
             border-style: solid;
             border-width: thick;
             background-color: #990000;
             border-color: black;
        }
          


@media screen and (min-width: 500px) {
    
  body {
	margin: 0 auto;
    padding: 0px;
	width: 100%;
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 15px;
    grid-template-areas:
        "head head head"
        "main main main"
        "pied pied pied"
        ;
       background: url(fond.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: Rajdhani;
    cursor: url(image-curseur.png), pointer; 
}
    button {
     background-color: #990000;
   }
h1 {
    text-align: center;
    font-size: 36px;
}

p {
   text-align:left;
   font-size: 22px;
    color: white
   }

    
header{
    grid-area: head;
    padding-right: 50px;
    display: flex;
    flex-direction: column;
    align-content: center;
    background-color: #4b4b4b;
    color: white;
    margin: 0px;
}

nav ul{
	display: flex;
	padding:0;
    margin:0;
	width: 100%
}

nav li{

	flex-grow: 1;
	text-align: center;
    font-family: Rajdhani;

}
    nav ul li a{}

nav a{
	display: block;
	width: 100%;
    text-decoration: none;
    color: white;
}

a:hover{
    color: red;    
}
    
#logo{
    padding: 10%;
    margin-top: 350px;
}

main{
    grid-area: main;
    display: flex;
    align-items: center;
    margin: 0px;
    padding: 0px;
    height: 250px;
}

.présentation{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
    
.icône{
    height: 50%;
    padding: 10px;
}

#aria {
    padding-top: 75px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
    
#PhotoAria{
    height: 75%;
    padding-right: 30px;
    padding-top: 30px;
}
    
#graphink{
    display: flex;
    flex-direction: column;
    padding-top: 0px;
    color: white;
}

#rouge{
    color: firebrick;
}

#noir{
    color: black;
}    
    
#shooting{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 965px;
}    
    
#serie{
    height: 150%;
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
    
img{
    padding-left: 30px;
    padding-bottom: 30px;
}
    
#end{
    align-self: center;
    padding: 0px;
    margin: 0px;
}
    
#hygiene{
    display: flex;
    flex-direction: column;
}

#gants{
    display: flex;
    text-align: center;
}
    
#ligne{
    display: flex;
    flex-direction: row;
}
 
#Photosoins{
    padding: 20px;
}
    
#boutton{
    width: 100%
    background: none;
    color: firebrick;
    text-decoration: none;
    border: none;
    font-size: 22px;
}
    
#boutton:hover{
    background: none;
    color: black;
    text-decoration: none;
    border: none;
    font-size: 22px;
}    
  
#icone{
    height: 25%;
    margin-left: 25px;
    margin-right: -250px;
}
   
form{
    margin-top: -255px;
    display: flex;
    flex-direction: column;
    background-color: gray;
    width: 500px;
    padding: 5px;
}
    
input{
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: lightgray;
    border: none;
    font-family: Rajdhani;
}
    
textarea{
    background-color: lightgray;
    border: none;
    font-family: Rajdhani;
    font-size: 14px;
}
    
footer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: white;
    background-color: #303030;
    font-family: Rajdhani;
    text-align: center;
    grid-area: pied;
}
    
}