@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

body {
  font-family: 'IBM Plex Mono', monospace;
  background-image: url('https://media.istockphoto.com/id/956381960/vector/graph-paper-seamless-pattern-architect-backgound-millimeter-grid-vector.jpg?s=612x612&w=0&k=20&c=RnXv3YO8z6RmZMDCsrtwkGlpNb9HMsMZO7OGfz6v-0E=');
}

.title {
  font-size: 100px;
  width: fit-content;
  display: flex;
  color: rgb(112, 112, 112);
  overflow: hidden;
  border-right: .05em solid rgb(112, 112, 112);
  white-space: nowrap;
  letter-spacing: .05em;
  animation: 
  typing 2s steps(100, end),
  blink-caret .75s step-end infinite;
  cursor: pointer;
}

.link {
  background-color: transparent;
  border: none;
}

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

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: rgb(112, 112, 112); }
}

.g {
  color: rgb(168, 0, 0);
}



.description {
  font-size: 27px;
  color:rgb(112, 112, 112);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}