html {
    background-color: rgb(40, 40, 40);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.buttons {
    gap: 25px;
    width: 70%;
    height: 70%;
    background-color: rgb(30, 30, 30);
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-content: center;
}

.btn {
    border-radius: 20px;
    width: 500px;
    height: 250px;
    background-color: bisque;
}   

.card {
  position: relative;
  width: 400px;
  height: 180px;
  background: rgb(23,23,23);
  border-radius: 20px;
  padding: 20px;
  padding-left: 130px;
  transition: 0.3s;
  align-content: center;
  justify-content: center;
  display: flex;
  align-items: center;
}

.card:hover {
  filter: drop-shadow(5px 5px 0px rgb(185,100,255))
  drop-shadow(5px 5px 0px rgb(103,74,255))
  drop-shadow(5px 5px 0px rgb(12,204,238));
  scale: 1.05;
}

.img {
  position: absolute;     /* ADD THIS */
  left: 18px;             /* pin to left side */
  top: 50%;               /* vertically center */
  transform: translateY(-50%);
  border-radius: 12px;    /* optional, looks nice */
}

.title1 {
  color: white;
  font-weight: bolder;
  font-size: 40px;
  line-height: 40px;
}