.alt-background {
    background-color: var(--lightRed);
}

.emphasize {
    color: var(--red);
}

.casepage header {
    background-color: var(--red);
    background-image: url("../img/2case_study/hero_mockup.webp");
}

.website-link {
    color: var(--red);
    text-decoration: none;
}
.website-link:hover {
    text-decoration: underline;
}

#h3-solution {
    margin-bottom: 10px;
}
.link-solution {
    display: flex;
    margin-bottom: 20px;
}
#arrow-solution {
    display: inline;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0;
    margin-left: 7.5px;
}

.sol-outer-flex span {
    color: var(--lightRed);
}

.figma-button {
    background-color: var(--red);
}

.figma-button:hover {
    color: var(--red);
    border: 2px solid var(--red);
}

.quote-style {
    color:var(--red);
}
.quote-style cite {
    color: var(--red);
}

#buttonUp:hover {
    background-color: var(--red);
}

.cursor-circle {
    border: 2px solid var(--red);
}

ol > li > ul {
    margin-left: 20px;
}

/* .cards-item {
    background-color: var(--lightRed);
} */

footer {
    background-color: var(--red);
}

.conclusion span {
    color: var(--red);
}

.final a {
    color: var(--red);
}

nav a:hover {
  color: var(--red);
}

.cards-item:hover, .cards-item:focus {
  background: var(--darkOrange);
  border-color: var(--darkOrange);
}

.cards-item {
    border-top: 15px solid var(--darkOrange);
}

/* 2nd CARD COLORS + HOVER*/
.cards-item:nth-of-type(2) {
    border-top: 15px solid var(--darkGreen);
}

.cards-item:nth-of-type(2):hover,
.cards-item:nth-of-type(2):focus {
    background: var(--darkGreen);
    border-color: var(--darkGreen);
}