@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');
}

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



.container {
 
  display: flex;
  width: 90%;
  margin: 0 auto;
  margin-left:4%;
  margin-top:4%; 
}


#header {


 font-family: 'Baskerville', serif;
  color: black;
  flex:1;
}



#content {
  
margin-left:1%;

  flex:3;
}

#blanc {
height:50px;
}

#content a {
  font-size:18px;
  font-family: 'Baskerville', serif;
  color: #9AD8C2;
}

#content a:hover{
  color: rgba(0,0,0,0.8);
}

#headtext {
  color: white;
  font-family: 'Xanh', serif;
  font-size: 30px;
  margin-right:30%;
  margin-bottom: 50px;
  margin-top: 50px;
  letter-spacing: 2px;
  text-shadow: #FFF0DC 1px 0 10px;
}


#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;
}

@media only screen and (max-width: 768px) {
  .container {
    display: block;
      width: 98%;
      margin:0;
      padding:0;
      overflow: auto;
  }

  #content {
    margin:0;
    padding:0;
    
  }


  #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;
    
  
  }

  #blanc {
    height:0px;
    }

  #headtext {
    margin-left:0;
    width:95%;
    padding-left:5%;
    font-size:30px;
    
   
  }


}