body { 
    margin: 0 auto; 
    background-color: #171717; 
}

h1{ 
    text-shadow: 2px 2px #3c3c3c; 
}


/* mobile-menu{ */
    /* position:absolute; */
    /* z-index:1;    */
    /* width:100%;  */
    /* height:100vh;  */
    /* background-color:rgba(68, 66, 66, 1 ) */
    /* } */


.navbar {
    display:flex; 
    flex-direction:row;   
    align-items: center;
    justify-content: center; 
    margin:0 auto;
    
  }
  
    .navbar a {
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-family: monospace; 
  }

  .navbar ul,li{ 
    padding: 0; 
    display:inline-block;       
    list-style-type:none; 
    overflow:hidden;
    margin:0px;  
    
  }

main{ 
    font-family: monospace; 
    color: white; 
    font-size: 15px;
    text-align: center; 
        
}

main h1{ 
    font-size: 20px; 
    font-family: monospace; 
    font-weight: normal;
    text-align:center;
}

.container-1{ 
  display: flex;
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
}

.container-1 div{
    margin: 10px; 
    align-items: center;
    align-content: space-between;  
    column-gap: 5px; 
    max-width: 500px; 
    text-align: left;
}

.img { 
    width: 30px; 
    height: 30px; 
}

a{ 
    text-decoration: none;
    color: cadetblue; 
}   

a:hover{ 
    color:aqua; 
}

ul,li{ 
    text-decoration:none;
    margin:0; 
    margin-bottom:20px; 
    padding:0; 
}

#hamburger-icon {
  margin: auto 0;
  display: none;
}

#hamburger-icon div {
  width: 35px;
  height: 3px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}

.open .bar2 {
  opacity: 0;
}

.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -8px);
  transform: rotate(45deg) translate(-6px, -8px);
}

.open .mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #171717;
  margin-top: 0; 
}

.open a{ 
  color: white; 
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 50px;
  height: calc(100vh - 50px);
  width: 100%;
}

.mobile-menu li {
  margin-bottom: 50px;
  align-items: center;

}

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

    .navbar {
    display:none; 
    }

    #hamburger-icon { 
      display: block; 
    } 

} 

.typing {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
.typing-effect {
    width: 15ch;
    animation: typing 2s steps(22), effect .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 1px solid;
    font-family: monospace;
    font-size: 2em;
  }
  
@keyframes typing {
    from {
      width: 0;
    }
  }
      
@keyframes effect {
    50% {
      border-color: transparent;
    }
  }