/* static/css/custom.css */


html {
    /* The default is 16px. Let's set it to 15px for a slightly smaller look. */
    font-size: 14px;
}

.quiz-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.quiz-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* static/css/custom.css */

/* Make the default help text smaller and lighter */
.form-text {
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Add some extra style to the login/signup card */
.auth-card {
    border: none;
    border-radius:   15px; /* Softer corners */
}

/* A subtle gradient for the page background for a more modern feel */
body {
    /* background-color: #f8f9fa; */
     /* #f2f2f2;; */
    background-color: #ecebeb;
    /* background-image: linear-gradient(to top, #f8f9fa 0%, #d4dce1 100%);   */ 
    
}


/* for to have same size  home page scrolling image*/

.hero-carousel .carousel-item {
    /* Sets a consistent height and aspect ratio for all slides */
    height: 400px; 
    overflow: hidden;
}

.hero-carousel .carousel-item img {
    /* Ensures the image fills the container without being distorted */
    width: 100%;
    height: 100%;
    object-fit: cover; /* This crops the image to fit, like 'background-size: cover' */
}



/* Base style for our new topic tags buttons on dashboard */


/* Base style for our new topic tags */
.topic-tag {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 50rem; /* This creates the "pill" shape */
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

/* Custom color schemes */
.topic-tag.tag-blue {
    background-color: #e6f2ff;
    color: #0056b3;
    border-color: #b3d7ff;
}
.topic-tag.tag-blue:hover {
    background-color: #cce5ff;
    color: #004085;
}

.topic-tag.tag-green {
    background-color: #e9f5e9;
    color: #155724;
    border-color: #c3e6cb;
}
.topic-tag.tag-green:hover {
    background-color: #b7e0be;
    color: #0c3c17;
}

.topic-tag.tag-purple {
    background-color: #efebf5;
    color: #493267;
    border-color: #d1c4e9;
}
.topic-tag.tag-purple:hover {
    background-color: #dcd1ea;
    color: #311b92;
}

.topic-tag.tag-red {
    background-color: #fdeaea;
    color: #721c24;
    border-color: #f5c6cb;
}
.topic-tag.tag-red:hover {
    background-color: #f8b4b9;
    color: #5a1219;
}

.topic-tag.tag-teal {
    background-color: #e0f2f1;
    color: #004d40;
    border-color: #b2dfdb;
}
.topic-tag.tag-teal:hover {
    background-color: #a0d4cf;
    color: #00251a;
}