@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
    --dark-teal: #032419;
    --light-teal: #e2f0e8;
    --teal: #99ddcc;
    --mint: #abdbb5;
    --dark-blue: #031b24;
    --light-blue: #e2e8f0;
}

body {
    /* font-family: 'Nanum Brush Script', cursive; */
    font-family: 'Nanum Gothic', sans-serif;
    /* font-family: 'Nanum Gothic Coding', monospace; */
    /* font-family: 'Nanum Pen Script', cursive; */
}

.cursive {
    font-family: 'Nanum Pen Script', cursive;
}

.polaroid {
    z-index: 10;
}

.flip-card {
    background-color: white;

    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner, .flip-card.active .flip-card-inner{
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: white;
    color: black;
}

.flip-card-back {
    color: black;
    transform: rotateY(180deg);
}