@font-face {
    font-family: 'Baskerville';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/LibreBaskerville-Regular.ttf) format('truetype');
  }
  
  @font-face {
    font-family: 'Xanh';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/XanhMono-Regular.ttf) format('truetype');
  }
  
  @font-face {
    font-family: 'Manifont';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/manifont-grotesk_book.ttf) format('truetype');
  }

  @font-face {
    font-family: 'Steps';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/Steps-Mono.otf) format('opentype');
  }

  body {
    margin: 0;
    padding: 0;
    background-color: #A1A4C2;
  
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 100%;
    cursor: url('img/handwriting.cur'), auto;

  }
  
  a {color: black;
  text-decoration: none;}
  
#headerfix {
    position: fixed;
}
  #headerfix a {
    font-size:15px;
    font-family: 'Baskerville', serif;
    color: rgba(0,0,0,0.8);
    text-decoration: underline;
    text-decoration-style: dashed;
    
  
  }
  
  #headerfix a:hover {
    color: #9AD8C2;
  }
  
  #header {
  
  position: fixed;
   font-family: 'Baskerville', serif;
    color: black;
    font-size: 15px;
    margin-top:20px;
    flex:1;
 
  }
  
 
  
  #content {
    
  margin-left:25%;
  overflow: auto;
  
  }
  
 
  
  #headtext {
    font-family: 'Xanh', serif;
    font-size: 30px;
    margin-right:30%;
    margin-bottom: 50px;
    margin-top: 50px;
  }

  .untexte {
    background-color: white;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
    width:53%;
    padding-left:3%;
    padding-right:3%;
    padding-top:5%;
    padding-bottom:5%;
    margin-bottom: 25px;
    margin-top:25px;
    border-radius: 5px;
    overflow: auto;
  }

  .titretexte  {
    display: inline;
    font-family: 'Manifont', sans-serif;
  font-size: 18px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
    padding-left:10px;
    padding-right:10px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: 4px;
   line-height: 2;
    border-radius: 20px;
   
    
  }


  .letitre {
    font-family: 'Xanh', serif;
    font-size: 25px;
    margin:0;
    padding-top:10px;
    
  }

  .ladate {
    font-family: 'Manifont', sans-serif;
    font-size: 12px;
    color: rgba(0,0,0,0.25);
    margin:0;
    padding-top:5px;
  }

  .corpstexte {
    font-family: 'Baskerville', serif;
    font-size: 14px;
    letter-spacing: 0.03em;
   line-height: 1.5;
   padding-right:4%;

  }

  @media only screen and (max-width: 768px) {
  
    #headerfix a {
      position: static;
      font-size:25px;
      display: block;
      font-family: 'Baskerville', serif;
      color: rgba(0,0,0,0.8);
      text-decoration: underline;
      text-decoration-style: dashed;
     
    
    }
  
    #headerfix {
      position: static;
    }

    #header {
  
      position: fixed;
      display: block;
   bottom:0;
   left:0;
     
     
        
        flex:1;
     
      }

      .titretexte  {
        display: inline;
        font-family: 'Manifont', sans-serif;
      font-size: 18px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
        padding-left:10px;
        padding-right:10px;
        padding-top: 5px;
        padding-bottom: 5px;
        margin-right: 4px;
       line-height: 2;
        border-radius: 20px;
       
        
      }

      #content {
    
        margin-left:5%;
        overflow: auto;
        width:90%;

      }

      .untexte {
        
        width:92%;
        padding-left:5%;
      
        margin-bottom: 25px;
        margin-top:25px;
        border-radius: 5px;
        overflow: auto;
      }


  }