body{
    background-color: #ade7fd;
}
h1 {
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    margin: 20px;
    padding: 20px;
    box-shadow: 5px 5px 3px #ff9191;
    border-radius: 4px;
    

}


#flashcard-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* adjust as needed */
    position: relative;

}
.flashcard {
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    width: 250px;
    height: 120px;
    border: 2px solid #333;
    border-radius: 10px;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;

    cursor: pointer;
    margin: 10px;
    padding: 20px;

    background: #f9f9f9;
    font-size: 18px;

    cursor: pointer;

    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.3s;
    box-shadow: 5px 5px 4px #000000;
}

.flashcard.active{
    display: flex;
}

.flashcard.flipped {
    
    background: #dfefff;
    transform: rotateY(180deg);
    
    
}

.flashcard .front,
.flashcard .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility:hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    
    border-radius: 10px;
    
}

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

/*Next Button*/
button{
    
}
#next-button{
    font-size: 30px;
    height: 100px;
    width: 250px;
    display: block;
    justify-content: center;
    box-shadow: 2px 2px;
    border-radius: 40px;

}





/*#flashcard-container {
  display: flex;
  justify-content: center;   
  align-items: center;        
  height: 300px;              
  position: relative;
}

.card {
  position: absolute;         
  width: 250px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: none;              
}

.card.active {
  display: block;             
}