@font-face {
      font-family:"archersemibold" ;
      src: url(../font/ArcherSemiboldPro.otf);
}

html{scroll-behavior: smooth;
}

body {
      background-color:#E6E6E6 ;
      margin: auto;
      
}

header{
      background-image: url(../images/salleledoux\ 1.png);
      background-size: cover;
      background-size: 100%;
      height: 1000px;
      background-attachment: fixed;
      background-repeat: no-repeat;

}

#log{
     padding: 20px;
     margin: 20px;
     padding-right: 690px;
}


nav{
    display: flex;
    justify-content: right;
    padding-right: 20px;
    margin-top: -80px;

}

nav a{
      text-decoration: none;
      margin: 20px;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-size: 20px;
      color: white ;
}

nav :hover{
             color: #DE6E0C;
             opacity: -50%;
             transform: scale(1.05);
             transition: 0.6s ease-in-out;
}

h1{ font-family: "archersemibold";
   color: #DE6E0C;
   font-size: 64px;
   font-weight: bold;
   text-align: center;
   padding: 60px;
   border: #DE6E0C;
   border-style: solid;
   border-radius: 30px;
   margin: 50px;
   margin-top: 50px;
}

h2{
   font-family: Arial, Helvetica, sans-serif;
   font-size: 26px;
   color: #DE6E0C;
   font-weight: bold;
   padding: 20px;
   padding-top: 118px;
}

p{
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
  padding: 60px;
  color:black;
  text-align: left;
  gap: 20px;

}

main{
     margin-bottom: 240px;

}

div{
     display: flex;
     justify-content: center;
     padding: 20px;
     margin-left: auto;
     margin-right: auto;
}

footer{
       background-color: #DE6E0C;
       display: flex;
       flex-direction: column;
       align-items: center;
       border-radius: 30px;
       margin: 50px;
       margin-bottom: auto;

}

footer p{
         font-size: 16px;
         align-items: center;
         font-family: Arial, Helvetica, sans-serif;
         font-weight: bolder;
         display: flex;
         flex-direction: column;
         margin: 0;
         padding: 10px;
         
}

#media{
       display: flex;
       flex-wrap: wrap;
       gap: 18px;
}