.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
.cards{
  position: relative;
  width: 274px;
  height: 301px;
}
.card{
  width: 200px;
  height: 247px;
  background-color: #fff;
  border: solid 2px #000;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  gap: 15px;
  position: absolute;
  top: 9%;
  left: 13%;
}
.color{
  width: 175px;
  height: 175px;
  border: solid 2px #000;
  border-radius: 10px;
}
.one{ background-color: #05D6B8;}
.two{ background-color: #DE98FF; }
.three{ background-color: #3293EC; }
.c-one{ z-index: 3; }
.c-two{ 
  z-index: 2;
  transform: rotate(-19.26deg);
}
.c-three{ 
  z-index: 1; 
  transform: rotate(19.26deg);
}
button{
  border: solid 1.5px #000;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 20px;
  background-color: #A0EEFF;
  cursor: pointer;
}
.dark-mode .card{
  background-color: #242424;
  border-color: #fff;
}
.dark-mode .color,
.dark-mode button{
  border-color: #fff;
}
.dark-mode button{
  color: #fff;
  background-color: #14B7DB;
}