.bg{
    margin: 0;
    font-family: Monaco, monospace;
    background-color: #97cfca;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

#terminal-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;

} 


.terminal-header{
    background-color: #e0e8f0;
    width: 100%;
    height: 30px;
    max-width: 600px;
    border-radius: 5px 5px 0 0;
    overflow: auto;
     
}


.terminal {
    background-color: #30353a;
    color: white;
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 0px 0px 5px 5px;
    overflow: auto;
    
}


#terminal-button-container{
    padding-left: 10px;
    
}
.terminal-header-button{
    width: 15px;
    height: 15px;
    margin: 10px 1px 0 0;
    display: inline-block;
    border-radius: 50%;
    
}

.terminal-header .green{
    background-color: #3bb662;
}

.terminal-header .yellow{
    background-color: #e5c30f;
}

.terminal-header .red{
    background-color: #e75448;
}

.terminal-text{
    padding: 10px;
    font-size: 14px;
    line-height: 1.5;
    font-family: Monaco, monospace;
}

.terminal-text .green{
    color: #00FF00;
}

.terminal-text .white{
    color: white;
}

.terminal-text .blue{
    color: #37c7f7;
}

.terminal-text .yellow{
    color: #e5c30f;
}

.terminal-text .red{
    color: #e75448;
}

.typing-cursor{
    display: inline-block;
    width: 2px;
    height: 15px;
    background-color: white;
    animation: blink 1s infinite;
}

@keyframes blink{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.hidden {
    display: none;
  }



.blinking-cursor {
  width: 2px;
  height: 20px;
  font-weight: bold;
  background-color: rgb(255, 255, 255);
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  }