* {
  font-family: Lucida Console;
  text-align: center;



}

.hbox {
  display: flex;                /* Activates flexbox */
  flex-direction: row;          /* Arranges items horizontally */
  gap: 10px;                    /* Adds spacing between items */
  justify-content: flex-start;  /* Alignment: start, center, end, space-between */
  align-items: center;          /* Vertical alignment */
}

@keyframes appear_anim {
  from {opacity: 0.0; transform: translateY(-120%) rotate(15deg) ;}
  to {opacity: 1.0; transform: translateY(0) rotate(0deg);}
}

@keyframes simple_appear_anim {
  from {opacity: 0.0; transform: rotate(15deg);}
  to {opacity: 1.0; transform: rotate(0deg);}
}

.navbar_btn {
  color: #67d60c;
  background-color: #30362d;
  margin-left: 8px;
  margin-right: 8px;
  font-size: 20px;
  animation-name: appear_anim;
  animation-duration: 0.5s;
  //animation-fill-mode: forwards;
  //animation-name: appear_anim;
  //transition: 1s transform .2s;


}

@keyframes typing {
  from { width: 0%;}
  to { width: 100%;}
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

.blog_img {
  width: 310;
}

.my-box {
  border: 2px;
  padding: 20px;
  background-color: #30362d;
  width: 320px;
  margin: 10px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  animation-name: simple_appear_anim;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.grid-container {
  display: grid;
  /* Columns will be at least 200px, but grow to fill 1fr of space
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 10px;
}

a:link { color: #d6e80d; }      /* Unvisited */
a:visited { color: #d89d08; }   /* Visited */
a:hover { color: #ebff10; text-decoration: underline; } /* Hover */

.text_p {
  text-align: justify;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  animation-name: text_appear;
  animation-duration: 1s;
}

@keyframes text_appear {
  from{
    letter-spacing: 0.5em;
  }

  to{
    letter-spacing: 0.1em;
  }
}