@dark: #262a35;
@light: #383e4e;
@lighter: #424961;
@blue: #188ff3;
@orange: #f37a18;
@purple: #e118f3;
@green: #18f384;

body {
    background-color: @dark;
}

.card {
    display: grid;
    background-color: @light;
    border-radius: 16px;
    padding: 16px;
    grid-row-gap: 8px;
    grid-template-columns: 24px auto;
    grid-column-gap: 8px;
    font-family: "Source Sans Pro", sans-serif;
    color: white;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}

#question {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 3;
    align-items: center;
    font-size: xx-large;
}

.letter {
    grid-column: 1;
    font-size: larger;
    border-radius: 12px;
    width: 24px;
    height: 24px;
    text-align: center;

    .text {
        text-shadow: none;
        color: @light;
        font-family: "Arial", sans-serif;
    }

    &.a {
        background-color: @blue;
    }

    &.b {
        background-color: @orange;
    }

    &.c {
        background-color: @purple;
    }

    &.d {
        background-color: @green;
    }
}

.text {
    margin: auto;
}

.answer {
    grid-column: 2;
    font-size: larger;

    &.correct {
        color: #0f0;
    }

    &.incorrect {
        color: #f00;
    }
}

.a {
    grid-row: 2;
}

.b {
    grid-row: 3;
}

.c {
    grid-row: 4;
}

.d {
    grid-row: 5;
}

.footer {
    position: fixed;
    bottom: 0;
    color: @lighter;
    font-size: smaller;
    font-family: "Arial", sans-serif;
    padding: 16px;

    a {
        color: @lighter;
    }
}