/* |||| MAIN STYLES FOR - index.html |||| */

:root {
    /* COLORS */
    --black: rgb(0, 0, 0);
    --cyan--800: rgb(0, 105, 113);
    --cyan--500: rgb(38, 181, 192);
    --gray--100: rgb(242, 242, 242);
    --green--950: rgb(0, 65, 64);
    --green--500: rgb(25, 184, 157);
    --gold--500: rgb(226, 134, 37);
    --gold--200: rgb(255, 212, 115);
    --white: rgb(255, 255, 255);
}

/* |||| GENERAL |||| */

html {
    font-size: 15px;
}

main {
    display: flex;
    justify-content: center;
}

/* || SCREEN READER ONLY || */

.sr-only {
    height: 1px;
    left: 10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

/* |||| CARD |||| */

.car-model-preview-card {
    border-radius: 0.6em;
    margin-block-start: 2em;
    overflow: hidden;
    max-width: 21.8em;
}

.car-model-preview-card section {
    padding: 3.2em;
}

.car-model-title {
    color: var(--gray--100);
    margin: 0.8em 0 0.6em;
    text-transform: uppercase;
}

.car-model-para {
    color: var(--white);
    padding-inline-end: 0.5em;
}

/* || SEDAN || */

.car-model-sedan {
    background-color: var(--gold--500);
}

.car-model-sedan .learn-more-btn {
    color: var(--gold--500);
}

/* || SUV || */

.car-model-suv {
    background-color: var(--cyan--800);
}

.car-model-suv .learn-more-btn {
    color: var(--cyan--800);
}

/* || LUXURY || */

.car-model-luxury {
    background-color: var(--green--950);
}

.car-model-luxury .learn-more-btn {
    color: var(--green--950);
}

/* || BUTTONS || */

.learn-more-btn {
    background-color: var(--gray--100);
    border: 2px solid var(--white);
    border-radius: 1.667em;
    display: flex;
    justify-self: start;
    margin-block-start: 1.6em;
    padding: 0.667em 2.033rem;
}

/* | BUTTONS | HOVER/ACTIVE STATES | */

.learn-more-btn:hover,
.learn-more-btn:active {
    background-color: transparent;
    color: var(--white);
    cursor: pointer;
}

/* |||| FOOTER | ATTRIBUTION |||| */

.attribution {
    justify-self: center;
    padding: 2em 0;
}

.attribution a {
    color: var(--gold--500);
}

.attribution a:hover,
.attribution a:active {
    color: var(--cyan--800);
}