@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: 'Xanh';
    font-style: italic;
    font-weight: 400;
    src: url(fonts/XanhMono-Italic.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: white;
    background-image: url('img/backgroundblurry.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 100%;
    overflow: hidden;
    cursor: url('img/handwriting.cur'), auto;
  }
  
  a {color: black;
  text-decoration: none;}

  #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;
  }
  
  .container {
   
    display: flex;
    width: 90%;
    margin: 0 auto;
    margin-left:4%;
    margin-top:4%; 
  }
  
  
  #header {
  
  
   font-family: 'Xanh', sans-serif;
    color: rgba(0,0,0,0.8);
    flex:1;
  }
  
  #header2 a, #header3 a {
    display: block;
  }
  
  #header2 a:hover, #header3 a:hover{
    color: #9AD8C2;
  }
  
  #header1 {
    margin-bottom: 15px;
  }
  
  #header2, #header3 {
    margin-bottom: 15px;
  }
  
  #content {
    display: flex;
  margin-left:1%;
  
    flex:3;
  }
  
  #blanc {
  height:50px;
  }
  
  
  .headtext {
    font-family: 'Xanh', serif;
    font-size: 13px;
    font-style: normal;
    padding-right:10px;
  
  }

  .headlinks {
    font-family: 'Xanh', serif;
    font-size: 13px;
    margin:0;
    text-decoration: underline;
  }

  .column {flex:1;
padding-right:10px;
margin:5px;
}

#content {margin:0;
    padding:0;
    font-family: 'Manifont', sans-serif;
    }

  .titreabout  {
    font-family: 'Xanh', serif;
    color: #9AD8C2;
    font-size: 25px;
    margin-bottom:20px;
    padding:0;
  }

  .dates{
    margin-top:8px;
    margin-bottom: 0px;
    padding:0;
    font-style: italic;
    font-size:12px;
    color: rgba(0,0,0,0.8);;
  }

.normaltext {
    margin:0;
    padding:0;
    font-style: normal;
    font-size:13px;
    line-height: 1.2;
    color: rgba(0,0,0,0.8);
}


@media only screen and (max-width: 768px) {
body {
  overflow: auto;
  background-position: bottom; /* Keep it at the bottom */
    background-size: cover; /* Ensures the image covers the entire width */
    background-repeat: no-repeat; /* Prevents repeating */
    background-attachment: fixed;
}
  .container {
   
    display: block;
    width: 90%;
    margin: 0 auto;
    margin-left:4%;
    margin-top:4%; 
    overflow: auto;
  }

  #headerfix a {
    font-size:25px;
    display: block;
    font-family: 'Baskerville', serif;
    color: rgba(0,0,0,0.8);
    text-decoration: underline;
    text-decoration-style: dashed;
    
  
  }

  .headtext {
    font-family: 'Xanh', serif;
    font-size: 20px;

    padding-right:10px;
  
  }

  #header1 {
    font-size: 25px;
  }
  
  .headlinks {
    font-family: 'Xanh', serif;
    font-size: 20px;
    margin:0;
    text-decoration: underline;
  }

  #content {
    display: block;
  margin-left:1%;
  
    
  }

  .dates{
    margin-top:8px;
    margin-bottom: 0px;
    padding:0;
    font-style: italic;
    font-size:20px;
    color: rgba(0,0,0,0.8);;
  }

.normaltext {
    margin:0;
    padding:0;
    font-style: normal;
    font-size:20px;
    line-height: 1.2;
    color: rgba(0,0,0,0.8);
}

}