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

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

  }
  
  a {color: black;
    text-decoration: none;
margin: 0 auto}
  
#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 {
   
  
    width: 90%;
    margin: 0 auto;
    margin-left:4%;
    margin-top:4%; 
    overflow: auto;
    
  }
  
  
 
  
 
  
  #content {
   
  margin-left:1%;
  overflow: auto;

  }

  #content a {

    font-family: 'Baskerville';
    font-size:12px;
  }
  

 

  .gifcollec {
    width: 90%;
    padding: 20px;

  }
  
  .gifcollec ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style-type: none;
    padding: 0;
    gap:20px;
    margin:0;

  }
  
  .gifcollec li {
    width: 100px; /* Fixed width */
    height: 100px; /* Fixed height */
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    overflow: hidden;
    position: relative;

    border: 5px ridge black;
 
  }
  
  .gifcollec li img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the image fills the container while preserving aspect ratio */
    position: absolute;
    top: 0;
    left: 0;
  }

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

    .gifcollec li {
      width: 130px; /* Fixed width */
      height: 130px; /* Fixed height */
     
   
    }

  }