/* Fonts */
body {
    font-family: 'Poppins', sans-serif;
}
/* Regular (400) */
p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

/* Medium (500) */
h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

/* SemiBold (600) */
h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

/* Bold (700) */
h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.full-height {
    height: 100vh;
}
.answer {
    visibility: hidden;
}
.flashcard {
    padding-top:1.5em;
    padding-bottom:1.5em;
    background-color: #12A89D;
    color:#ffffff;
    border: none;
    border-radius: 5px;
}
.flashcard-inner {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.flashcard-word {
    font-size: 1.35rem;
}
.flashcard.has-hint {
    cursor: pointer;
}
.flashcard.has-hint:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}
.flashcard-hint {
    display: none;
    position: relative;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    min-height: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.flashcard.has-hint .flashcard-hint {
    display: block;
}
.flashcard-hint .hint-text {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.flashcard.hint-visible .flashcard-hint .hint-text {
    visibility: visible;
    opacity: 1;
}
.flashcard-hint .hint-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.flashcard.hint-visible .flashcard-hint .hint-placeholder {
    opacity: 0;
    visibility: hidden;
}
/* On mobile, remove the margin to make it spread across the screen */
@media (max-width: 768px) {
    .flashcard {
        margin-left: 0;
        margin-right: 0;
        width: 100%; /* Full viewport width */
        border-radius: 0; /* Optionally remove the border radius on mobile */
        overflow-x: hidden;
        max-width: 100%;
    }
}
.no-disc {
    list-style-type:none;
}
.got-correct {
    /* padding: 5px; */
    background-color: #a2bdf8;
    color:#1B325E;
    border-radius: 5px;
    /* height:35px; */
    display: inline-block; /* Make the div wrap tightly around the image */
    width: auto; /* Ensure it doesn't expand unnecessarily */
}
.tick-icon {
    display: block; /* Ensures no extra space under the image */
  }
.no-underline {
    text-decoration: none!important;
}
.rounded-corners {
    border-radius:10px;
}
.text-center {
    text-align: center;
}
.highlight {
    display: inline;
    padding: .15em 0;
    background: #FFF7C1;
    box-shadow: .2em 0 0 #FFF7C1, -.2em 0 0 #FFF7C1;
    border-radius: 3px;
    font-weight: bold;
  }
.cta-button {
    --bs-btn-bg:#95c11e!important;
    --bs-btn-border-color: #95c11e!important;
    --bs-btn-color:#ffffff!important;
    --bs-btn-hover-color:#ffffff!important;
    --bs-btn-hover-bg: #6d8c16!important;
    --bs-btn-hover-border-color:#95c11e!important;
    --bs-btn-font-size:1.1rem!important;
    font-weight:500;
}
.subheading {
    font-weight:300;
    line-height: 1.2;
}
.card {
    border: none; /* Removes the border */
}
.footer {
    padding: 20px;
    padding-top:30px;
}
/* Apply a different background color for mobile devices */
@media (max-width: 768px) {
    .footer {
        background-color: rgba(99, 145, 244, 0.2); /* 20% opacity background for mobile */
    }
}
.footer a {
    margin-left:10px;
    margin-right:10px;
    font-weight:600;
    text-decoration:none;
    color: #1B325E;
}
.answer.alert {
    background-color: #1B325E;
    color:#ffffff;
    font-weight: 600;
}
.arrow-img {
    vertical-align: middle; /* Aligns the image vertically with the text */
    position: relative; /* Allows you to adjust the position */
    top: -2px; /* Adjust this value to move the image up or down */
    width: 15px; /* Adjust the size as necessary */
    height: auto; /* Maintain aspect ratio */
    margin: 0 5px; /* Add space around the image */
}
.lang-codes {
    color: #1B325E;
}
.header-bar {
    column-gap: 0.75rem;
}
@media (min-width: 768px) {
    .header-bar {
        column-gap: 1.25rem;
    }
}
.header-bar .language-indicator {
    transition: margin 0.2s ease;
}
@media (max-width: 768px) {
    .header-bar .language-indicator {
        display: none!important;
    }
}
@media (max-width: 576px) {
    .header-bar {
        row-gap: 0.5rem;
    }
    .header-bar .language-indicator {
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
        margin-left: 0 !important;
        margin-top: 0.75rem;
        text-align: center;
        order: 5;
    }
    .header-bar .back-nav-col,
    .header-bar .char-count-col,
    .header-bar .header-counter,
    .header-bar .alert-button-col {
        flex: 0 0 auto;
        max-width: none;
        order: 0;
    }
}
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}