body{
    background: linear-gradient(135deg, hsl(230, 40%, 12%), hsl(230, 20%, 7%));
}

.content{
    padding: 3%;
    color: #f2f0f0;
}
#typed-text{
    font-size: 36px;
    font-family: monospace;
    font-weight:800;
    white-space: nowrap;
    overflow: hidden;
}

#para{
    font-size: 26px;
    font-family: monospace;
    width: auto;
    overflow: hidden;
}

h2 {
    justify-content: center;
    align-items: center;
    margin: auto;
    font-family: monospace;
    font-size: 3.5rem;
    font-weight: 300;
    animation: lights 5s 750ms linear infinite;
  }

  @keyframes lights {
    0% {
      color: hsl(230, 40%, 80%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.2),
        0 0 0.125em hsla(320, 100%, 60%, 0.3),
        -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
        1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }
    
    30% { 
      color: hsl(230, 80%, 90%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.5),
        0 0 0.125em hsla(320, 100%, 60%, 0.5),
        -0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
        0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }
    
    40% { 
      color: hsl(230, 100%, 95%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.5),
        0 0 0.125em hsla(320, 100%, 90%, 0.5),
        -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
        0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
    }
    
    70% {
      color: hsl(230, 80%, 90%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.5),
        0 0 0.125em hsla(320, 100%, 60%, 0.5),
        0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
        -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
    }
    
    100% {
      color: hsl(230, 40%, 80%);
      text-shadow:
        0 0 1em hsla(320, 100%, 50%, 0.2),
        0 0 0.125em hsla(320, 100%, 60%, 0.3),
        1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
        -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
    }
    
  }
  
.types
{
  margin-top: -2.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  /* padding: 10%; */
  /* border: 4px solid#ffffff; */
}
.cells{
  height: fit-content;
  width: fit-content;
  /* padding: 2%; */
  font-family: monospace;
  margin: 15%;
  font-size: x-large;
}

.btn-group button{
  background-color: #494e4e; 
  border: 1px solid green;
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  width: 30%; /* Set a width if needed */
  margin: 2%;
  
  display: block; /* Make the buttons appear below each other */
}

.btn-group button:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #3e8e41;
}