@font-face {
    font-family: "ABCDiatype";
    src: url("files/ABCDiatypeRounded-Bold-Trial.woff") format('woff');
  }


  body {
    font-family: "ABCDiatype";

    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

  main {
    margin: 2rem;
    transition: all 0.5s ease-in-out;
    max-width: 55rem;
    line-height: 2.6rem;
  }

  h1, h2, h3, a {
    font-family: "ABCDiatype";
    font-size: 2.5rem;
    padding-bottom: 1.6rem;
    margin: 0;
    color: #b1b1b1;
    text-decoration: none;
    transition: all 0.25s ease-in-out;    

  }



a:hover {
  color: var(--random-color);
  transition: all 0.25s ease-in-out;

}

  h1 {
    color: rgb(15, 15, 15);
  }



  .content-container {
    height: 2.5rem; /* Adjust based on your content size */
    overflow: show;
    display: flexbox;
    vertical-align: middle;
    

}
.content {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.content.hidden {
  transform: translateY(-30%);
  opacity: 0;
}
.content.showing {
  transform: translateY(0);
  opacity: 1;
}
.content.new {
  transform: translateY(30%);
  opacity: 0;
}




@media only screen and (max-width: 600px) {

  .content-container {
    height: 2.1rem; /* Adjust based on your content size */
    
}
  main {
    margin: 1.75rem;
    transition: all 0.5s ease-in-out;
    line-height: 2.2rem;


  }

  h1, h2, h3, a  {
    font-size: 2.1rem;
    transition: all 0.25s;
  }
}


@media only screen and (max-width: 400px) {

  .content-container {
    height: 1.7rem; /* Adjust based on your content size */
    
}
  main {
    margin: 1.5rem 1.1rem 1.1rem 1.1rem;
    transition: all 0.5s ease-in-out;
    max-width: 100%;
    line-height: 1.8rem;

  }

  h1, h2, h3, a  {
    font-size: 1.7rem;
    transition: all 0.25s;
  }
}