body {
  text-align: center;
}

.btn {
    height: 200px;
    width: 200px;
    border-radius: 20%;
    border: 10px, solid black;
    margin: 2.2rem;
    cursor: pointer;
}

.btn-container {
    display: flex;
    justify-content: center;
    
}

.yellow {
    background-color: #f99b45;
}

.red {
    background-color: #d95980;
}

.green {
    background-color: #63aac0;
}

.purple {
    background-color: #819ff9;
}

.flash {
    background-color: white;
}

.userflash {
    background-color: green;
}



/* For tablets and smaller laptops */
@media (max-width: 1024px) {
  .btn {
    height: 160px;
    width: 160px;
    margin: 1.5rem;
  }
}

/* For mobile devices */
@media (max-width: 768px) {
  .btn {
    height: 130px;
    width: 130px;
    margin: 1rem;
  }

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  .btn-container {
    flex-direction: row;
    justify-content: center;
  }
}

/* For very small screens */
@media (max-width: 480px) {
  .btn {
    height: 100px;
    width: 100px;
    margin: 0.7rem;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1rem;
  }

  .btn-container {
    flex-direction: row;
    justify-content: center;
  }
}