/* =====================================================
   PeriodicX v1
   Professional Flashcards
   Developed by Aditya Jaiswal
===================================================== */

#flashcards{

    width:100%;

    padding:80px 20px;

    text-align:center;

}

#flashcards h2{

    color:#00e5ff;

    margin-bottom:40px;

    font-size:2rem;

}

/* ===========================
      Container
=========================== */

#flashcardContainer{

    display:flex;

    justify-content:center;

    align-items:center;

    perspective:1200px;

    min-height:500px;

}

/* ===========================
      Card
=========================== */

.flash-card{

    position:relative;

    width:340px;

    height:460px;

    transform-style:preserve-3d;

    transition:transform .8s;

    cursor:pointer;

}

.flash-card.flipped{

    transform:rotateY(180deg);

}

/* ===========================
      Front & Back
=========================== */

.flash-front,
.flash-back{

    position:absolute;

    width:100%;

    height:100%;

    border-radius:20px;

    backface-visibility:hidden;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:

        0 0 35px rgba(0,229,255,.25);

}

/* ===========================
      Front
=========================== */

.flash-front{

    background:linear-gradient(135deg,#1e293b,#0f172a);

    border:2px solid #00e5ff;

}

.flash-front .symbol{

    font-size:90px;

    font-weight:bold;

    color:#00e5ff;

    margin-bottom:20px;

}

.flash-front h2{

    color:white;

    margin:10px 0;

}

.flash-front h1{

    font-size:55px;

    color:#00e5ff;

}

.flash-front p{

    color:#ccc;

}

.flash-front small{

    color:#00e5ff;

}

/* ===========================
      Back
=========================== */

.flash-back{

    background:#111827;

    border:2px solid #00e5ff;

    transform:rotateY(180deg);

    padding:25px;

    box-sizing:border-box;

    overflow:auto;

}

.flash-back h2{

    color:#00e5ff;

    margin-bottom:15px;

}

.flash-back p{

    color:#fff;

    margin:8px 0;

    line-height:1.6;

}

.flash-back hr{

    width:100%;

    border:none;

    border-top:1px solid rgba(255,255,255,.15);

    margin:10px 0;

}

.flash-back code{

    background:#0f172a;

    color:#00e5ff;

    padding:8px 12px;

    border-radius:8px;

    display:block;

    margin-top:10px;

    word-break:break-word;

}

/* ===========================
      Buttons
=========================== */

.flash-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:35px;

}

.flash-buttons button{

    background:#00e5ff;

    color:#111;

    border:none;

    padding:12px 18px;

    border-radius:10px;

    cursor:pointer;

    font-weight:bold;

    transition:.3s;

}

.flash-buttons button:hover{

    transform:translateY(-3px);

    box-shadow:0 0 20px cyan;

}

/* ===========================
      Hover
=========================== */

.flash-card:hover{

    transform:scale(1.03);

}

.flash-card.flipped:hover{

    transform:rotateY(180deg) scale(1.03);

}

/* ===========================
      Responsive
=========================== */

@media(max-width:600px){

.flash-card{

width:300px;

height:420px;

}

.flash-front .symbol{

font-size:70px;

}

.flash-front h1{

font-size:45px;

}

}