body,html {
    width: 100%;
    height: 100%;
    background-color: #CCCCCC;
}

.cjNavbar {
    width: calc(100% - 20px);
    height: 40px;
    display: inline-block;
    padding: 10px;
}

.cjButton {
    cursor: pointer;
    border-radius: 8px;
    height: 100%;
}

.cjPageWrapper {
    display: inline-block;
    width: calc(100% - 20px);
    height: calc(100% - 84px);
    padding: 10px;
}

.cjFlashcard_Panel {
    /* width: calc(100% - 20px); */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cjFlashcard_Top {
    height: 350px;
    margin-top: 10px;
}

#cardImage {
    opacity: 1;
    transition: opacity 0.2s ease-in-out; 
}

#cardImage.fade {
  opacity: 0;
}

.cjFlashcard_Bottom {
    perspective: 1375px;
    height: 200px;
}

.cjFlashcard_BottomInner {
    /* width: 100%; */
    width: 620px;
    height: 100%;
    position: relative;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.cjFlashcard_BottomFront, .cjFlashcard_BottomBack {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cjFlashcard_BottomFront {
    background-color: #f1f1f1;
    color: black;
    /* Ensures the front starts without rotation */
    transform: rotateY(0deg);
}

.cjFlashcard_BottomFront > h1 {
    color: #323296;
    font-family: Arial, Helvetica, sans-serif
}

.cjFlashcard_BottomBack {
    background-color: #ebf4ff;
    color: white;
    /* Rotates the back face 180 degrees initially so it is hidden */
    transform: rotateY(180deg);
}

.fcTextFieldsWrapper {
    display: inline-block;
    height: 100%;
    width: 100%;
}

.is-flipped {
  transform: rotateY(180deg);
}

#nextButtonWrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

#btn_nextCard {
    cursor: pointer;
}

.fcBackTextField {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 33%;
    color: #323296;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
}