@font-face {
  font-family: "Normal";
  src: url("font/SFPRODISPLAYMEDIUM.OTF");
}

@font-face {
  font-family: "Gras";
  src: url("font/SourceCodePro-Bold.ttf");
}

body
{
  margin-left: 15%;
  margin-right:15%;
  display:flex;
  align-items: center;
  justify-content: center;
  row-gap: 20px;
  flex-direction:column;
  background-size: 1920px 1080px;
  padding-top: 40px;
  
    overflow: auto;
    background: linear-gradient(90deg,rgba(51, 23, 69, 1) 0%, rgba(92, 13, 13, 1) 50%, rgba(92, 64, 26, 1) 100%);
    animation: gradient 20s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

header{
  width:100%;
  }

main{
  width:100%;
  display:flex;
  justify-content: space-between;
}

.main{
  width:69.5%;
  display:flex;
  flex-direction: column;
  row-gap: 20px;
  
}

.sidebar{
  width:29.5%;
  display:flex;
  flex-direction: column;
  row-gap: 20px;
}



.titre{
  margin:3px 3px 7px 3px;
  
}

.entete, .corps{
  padding: 5px 4px;
  }
  
.entete{
  background: #F1E9D6;
    font-family: Gras;
    border: solid 2px;
    border-color: #E6D8B9;
    -webkit-box-shadow: 1px 1px 0px 1px #242424; 
box-shadow: 1px 1px 0px 1px #242424;
-webkit-box-shadow: inset -1px -1px 0px 1px #A3A3A3; 
box-shadow: inset -1px -1px 0px 1px #A3A3A3;

    }
  
.corps{
  font-family: Normal;
    background-color: white;
    border-radius: 0px;
    -webkit-box-shadow: inset 1px 1px 0px 1px #242424; 
box-shadow: inset 1px 1px 0px 1px #242424;
  }
    
img{
  margin:0px;
}

iframe{
  width: 20%;
}