body {
    display: grid;
    grid-template-columns: 15px auto 15px; 
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: 
    ". . ."
    ". content ."
    ". . .";
    gap: 0px;
    height: 100vh;
    width: 100vw;
    background-color: #1F1F1F;
}

main {
    grid-area: content;
    display: flex;
    flex-direction: column;
}

h1 {
    
    font-family: 'Segoe UI', -apple-system, sans-serif;
    font-size: 32pt;
    color: white;

}

b {
  font-weight: bold;
}

.right-bubble .teams-bubble {
      background-color: #292929;

}

.left-bubble .teams-bubble {
    background-color: #323348;

}

.teams-bubble {
    border-radius: 10px;
    display: block;
        min-height: 60px;  
    height: fit-content;
    min-height: 100px;
    width: 70%;
    margin-bottom: 70px;
    padding: 30px;

}

.left-bubble {

}

.type-text{
    color:red
}

.right-bubble {
    display: flex;
    justify-content: flex-end;
    opacity: 0;
}

span.cursor {
  display: inline-block;
  background-color: #ccc;
  margin-left: 0.1rem;
  width: 3px;
  animation: blink 1s infinite;
}

span.cursor.typing {
  animation: none;
}

@keyframes blink {
  0% {
    background-color: #ccc;
  }
  49% {
    background-color: #ccc;
  }
  50% {
    background-color: transparent;
  }
  99% {
    background-color: transparent;
  }
  100% {
    background-color: #ccc;
  }
}

@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(50%);
    }
    to { opacity: 1 }
}

/* Small tablets and larger mobile devices (481px - 768px) */
@media (min-width: 481px) {

}

/* Tablets and small laptops (769px - 1024px) */
@media (min-width: 769px) {
  body {
            grid-template-columns: 1fr 3fr 1fr;
        }
}

/* Large desktops and high-resolution screens (1025px and up) */
@media (min-width: 1025px) {
  body {
            grid-template-columns: 1fr 2fr 1fr;
        }
}

/* Extra-large screens (1440px and up) */
@media (min-width: 1440px) {
  body {
            grid-template-columns: 1fr 1fr 1fr;
        }
}