/*#region Root Variables*/

:root {
    --virtual-height: 0vh;

    /* Primary Colors */
    --primary-blue: #004899;
    --primary-blue-hover: #3375CC;
    --primary-red: #D91813;
    --primary-green: #119A10;

    /* Secondary Colors (lighter variants) */
    --secondary-blue: #5D92D1;
    --secondary-red: #E95E55;
    --secondary-green: #5DDC5D;

    /* Tertiary (blend of blue + red → purple) */
    --tertiary-purple: #7A2780;

    /* Neutral Colors */
    --neutral-light: #fff;
    --neutral-dark: #000;

    /* Gradient Fades */
    --gradient-blue-fade: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
    --gradient-red-fade: linear-gradient(90deg, var(--primary-red), var(--secondary-red));
    --gradient-blue-red-fade: linear-gradient(90deg, var(--primary-blue), var(--tertiary-purple), var(--primary-red));

    --primary-color: var(--tertiary-purple);
    --primary-color-hover: color-mix(in srgb, var(--primary-color), 90%);
    --primary-accent-color: var(--tertiary-purple);
    --text-color: var(--neutral-light);
    accent-color: var(--tertiary-purple);
    
    --transparent: rgba(255,255,255,0);
    --transparent-hover: rgba(255,255,255,0.1);
}

/*#endregion*/

.e-vstack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch
}

.e-hstack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-self: stretch
}

.gap-sm {
    gap: .5rem;
}
.gap-lg {
    gap: 1rem;
}

.answer-border {
    border: 1px solid #ddd
}

.answer-border > label {
    flex-grow: 1;
}

img, svg {
    vertical-align: middle;
    max-height: 50vh;
    object-fit: contain;
}

.e-bg-transparent {
    transition: all ease-in-out 150ms;
    background: var(--transparent);
    color: inherit;
}

.e-bg-transparent:hover {
    background: var(--transparent-hover);
}