styles.scss

body {
    font-family: "Russo One", sans-serif;
    background: linear-gradient(#000000, #111111);
    color: #ffffff;
    height: 100vh;
    text-align: center;
}

.banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    &__title {
        margin: 2rem;
        color: #f9e907;
        font-size: 3rem;
    }
}
button {
    padding: 1rem;
    font-family: "Russo One", sans-serif;
    text-align: center;
    border-radius: 5px;
    margin: 1rem 0;
    background-color: white;
}
button:hover {
    background-color: #f9e907;
    border: 2px solid #ffffff;
    cursor: pointer;
}

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card {
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: center;

    &__item {
        background: #000000;
        width: 22rem;
        height: 24rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 1px solid #ffffff;
        border-radius: 4px;
        margin: 1rem;
        box-shadow: 2px 2px 10px #aaa;
        transition: transform 0.1s ease-in-out;
    }
    &__image {
        border-radius: 5px;
        margin: 1rem 0;
        height: 20rem;
        padding: 1rem;
        width: auto;
        height: 15rem;
        text-align: center;
    }
    &__image-box {
        width: 20rem;
        height: 15rem;
        border-radius: 4px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1rem 0;
    }
}

.option {
    display: flex;
    justify-content: center;
}

.answer {
    display: flex;
    justify-content: center;
    padding: 0 6rem;
    text-align: center;
    &__text {
        font-size: 2rem;
    }
    &__text--correct {
        color: lightblue;
    }
    &__text--incorrect {
        color: red;
    }
}