.mali-light {
  font-family: "Mali", cursive;
  font-weight: 300;
  font-style: normal;
}

.mali-medium {
  font-family: "Mali", cursive;
  font-weight: 500;
  font-style: normal;
}

.mali-bold {
  font-family: "Mali", cursive;
  font-weight: 700;
  font-style: normal;
}

.mali-light-italic {
  font-family: "Mali", cursive;
  font-weight: 300;
  font-style: italic;
}

.mali-medium-italic {
  font-family: "Mali", cursive;
  font-weight: 500;
  font-style: italic;
}

.mali-bold-italic {
  font-family: "Mali", cursive;
  font-weight: 700;
  font-style: italic;
}

body {
  background-image: url("grid.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

h1 {
  font-size: 52px;
}


        .fade-element {
      opacity: 0; /* Start invisible */
      animation: fadeIn 2s ease-in-out forwards; /* Apply the animation */
    }

    @keyframes fadeIn {
      from {
        opacity: 0; /* Start opacity */
      }
      to {
        opacity: 1; /* End opacity */
      }
    }
    
     h1 {
  margin-left: 410px;
}

  .typing {
        border-right: 2px solid var(--cursor-color);
        animation:
        blinking 2s steps(1, end) infinite,
        typing 4s steps(40, end);
        overflow: hidden;
       white-space: nowrap;
  }
  
    @keyframes typing {
        0% { width: 0 }
        100% { width: 100% }
      }
.thumbnail { 
top:-10px; 
left: 10px; 
display:block; 
z-index:10; 
cursor: pointer; 
transition-property: all; 
transition-duration: 0.3s; 
transition-timing-function: ease; 
} 

/*change the number below to scale to the appropriate size*/ 
.thumbnail:hover { 
  transform: scale(1.3);

}