@font-face {
    font-family: police1;
    src:url("font/manifont-grotesk_book.ttf");
}




form {
    margin-left:5%;
    margin-top:5%;
}



body {
    background: rgb(255,233,61);
    background: linear-gradient(0deg, rgba(255,233,61,1) 0%, rgba(255,155,106,1) 100%); 
    color: rgb(0, 0, 0);
    margin: 0;
    padding: 0;
    font-family: police1;
    
    width: 100%;
    height: 100%;
  
}

#quoi {
    background: rgb(255,233,61);
    background: linear-gradient(0deg, rgba(255,233,61,1) 0%, rgba(255,155,106,1) 100%); 
    color: rgb(0, 0, 0);
    margin: 0;
    padding: 0;
    font-family: police1;
    height: 100%;
}

#quoi a{
    color: black;
    text-decoration-thickness: 6px;
}

#quoi p{
font-size: 30px;
margin-left: 1%;
}

h1{
    font-size: 6vw;
    margin-bottom: 0;
    margin-top: 0;
}
h2{
    font-size: 2.75vw;
    margin-top: 0;
    position: relative;
    top:-20px;
    margin-bottom: 0px;
}
iframe{
    width: 100%;
}

#footer {
    position: absolute;
    bottom: 10px;
    left:10px;
    font-size: 10px;
}
#footer p{
    font-size: 20px;
    width: 100%;
}

h3 {
   /* border-bottom : solid black 4px; */
    border-top : solid black 4px;
    
    padding: 5px;
    margin-top: 0;
    margin-bottom: 0px;
    cursor: pointer;
    padding-top:8px;
}

h3 img {
float: left;
  width: 25px;
  position: relative;
  top: -2px;
}


#logo {
    width: 20%;
    display: inline-block;
}

#en-tete {
    display: inline-block;
    /*vertical-align: top;*/
    width: 40%;
}

.item {
  opacity: 0.5;
  filter:grayscale(2);
}

#menu {
    display: inline-block;
    /*vertical-align: top;*/
    width: 39%;
    vertical-align: top;

}

#menu a{
    font-size: 2.75vw;
    color: black;
    text-decoration: none;
    margin-right: 4%;
}
span {
    
    background-color: orangered;
    margin-top: 4px;
    padding: 8px;
    padding-top: 10px;
    margin-right: 1%;
    border-radius: 50px;
    display: inline-block;
}

a span {

    background-color:transparent;
    margin-top: 0px;
    padding: 0px;
    padding-top: 0px;
    margin-right: 0%;
    border-radius:none;
    position: relative;

}

b {
    animation: blinker 1s linear infinite;
  }
  
  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }

.soiree a {
   /* text-decoration-style: wavy;*/
    color: black;
   text-decoration: none;
    background-color: #ff4500;
    padding-top:2px;
  
}

#contenu {
    width: 60%;
    border-left: solid 4px black;
    border-right: solid 4px black;
    border-bottom: solid 4px black;
    display: inline-block;
 /*  position: absolute;*/
   
    margin-left:1%;
}

.texte {
    display: none;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 10px;
}

#images {
    width: 36%;
   /* border-top: solid 4px black;*/
    display: inline-block;
    vertical-align: top;
    border: solid 4px black;
    overflow-y: scroll;
    
   position: -webkit-sticky; 
  position: sticky;
  top: 0;
}

#images img{
width: 100%;
margin-bottom: 4px;
}

h4 {

    margin-left: 1%;
    margin-top: 2px;
    margin-bottom: 2px;
}





/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #FF4500 rgba(255,155,106,1);
  }
  
  /* Chrome, Edge and Safari */
  *::-webkit-scrollbar {
    height: 10px;
    width: 10px;
  }
  *::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: rgba(255,155,106,1);
  }
  
  *::-webkit-scrollbar-track:hover {
    background-color: #B8C0C2;
  }
  
  *::-webkit-scrollbar-track:active {
    background-color: #B8C0C2;
  }
  
  *::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #FF4500;
  }
  
  *::-webkit-scrollbar-thumb:hover {
    background-color: #62A34B;
  }
  
  *::-webkit-scrollbar-thumb:active {
    background-color: #62A34B;
  }
  

/******************************** RESPONSIVE ********************************/
@media screen and (max-width : 1024px) and (orientation : portrait) {
    #contenu {
        width: 65%;
        border-left: solid 4px black;
        border-right: solid 4px black;
        border-bottom: solid 4px black;
        display: inline-block;
        margin-left:0.5%;
    }
    
    
    input {
           width: 50%;
    height: 100px;
      
    }
    
      input[type='text'] { font-size: 30px; }
      input[type='submit'] { font-size: 30px; }
    
     

    h3 {
        font-size: 30px;
    }

    #images {
      width: 32%;
    }


    #logo {
width:30%
    }

    h2 {
        font-size: 3vw;
        margin-top: 0;
        position: relative;
        top: -40px;
        margin-bottom: 0px;
      }

      #menu {
        display: inline-block;
        vertical-align: top;
        width: 25%;
     
      }

      .texte {
        font-size:25px;
      }

   

    h3 img {
        float: left;
          width: 30px;
          position: relative;
          top: 0px;
        }

   
      
 
}