@import url(style.css);



.card-container {
    display: inline-block;
    margin: 0 auto;
    padding: 0 12px;
    perspective: 900px;
    text-align: center;
}

.card {
  position: relative;
  border-radius: 5px;
    margin-bottom: 50px;
    border: 2px solid #fec200;
  width: 270px;
  height: 450px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}



.front {
  position: absolute;
  top: 0;
  left: 0;
  width: 266px;
  height: 445px;
  background-color:#fec200;
  border-radius: 2px;
  color: white;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.back {
	
 position: absolute;
  background: #FEC606;
  top: 0;
  right: 0px;
    left: 0px;
    padding: 4px;
    padding-right: 5px;
    width: 266px;
 height: 445px;
 
  color: #fec200;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;	
	
  /*position: absolute;
  background: #FEC606;
  top: 0;
  left: 0;
  width: 265px;
    height: 445px;
  border-radius: 2px;
  
  color: white;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
  backface-visibility: hidden;	
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px; */
}

.card-container:hover .card {
  transform: rotateY(180deg);
}

.back {
  transform: rotateY(180deg);
}