:root {
    --background: white;

    --blue: #398CCB;
    --gray: #F0F6FB;
    --darkgray: #96969A;
    --gray-accent: #3B677680;
    --gray-green: #94ABB4;
    --darkblue: #10069F;
    --cyan: #456071;
    --darkcyan: #3B6776;
    --orange: #EB724B;
    --emerald: #00927D;
    --green: #4AA561;

    --item-inactive: #B4B4B4;
    --item-active: var(--darkcyan);
    --highlight-orange: var(--orange);

    --contents-bg: var(--blue);
    --contents-bg-color: var(--blue);
    --text-primary: var(--darkblue);
    --text-paragraph: var(--cyan);

    --header-height: 96px;
    --contents-ml: 75vw;

    --section-bg: white;
    --section-bg-accent: var(--gray);

    --highlight-bg: var(--darkblue);
    --highlight-text: white;

    --quote-bg: var(--darkblue);

    --esg-environment: var(--green);
    --esg-social: var(--blue);
    --esg-governance: var(--orange);

    --divider: var(--gray-accent);
    --box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1);
}

html {
    font-size: 62.5%; /* font-size: 62.5% now means that 1.0 rem = 10px */
}


.sustainability h1,
.sustainability h2,
.sustainability h3 {
    font-weight: bold;
    line-height: 1.25;
}

.sustainability h2 {
    font-size: 3rem;
    text-align: center;
}

.sustainability {
    position: relative;
    overflow: hidden;
}

.sustainability.inner {
    background-color: var(--background);
}

.sustainability a {
    color: inherit;
    text-decoration: underline;
}

.sustainability .main {
    max-width: 1520px;

    display: flex;
    flex-direction: column;

    margin: 0 auto;

    transition: filter 0.1s ease-in-out;

    overflow: hidden;
}

.sustainability .main section {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.sustainability .main h1 {
    color: var(--text-primary);
    font-size: 5rem;
}

.sustainability .subpage h1 {
    color: var(--blue);
}

.sustainability p {
    color: var(--text-paragraph);
    font-size: 1.75rem;
}

@media screen and (max-width: 1024px) {
    .sustainability h1 {
        font-size: 3rem !important;
    }

    .sustainability h2 {
        font-size: 2rem !important;
    }

    .sustainability p {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 768px) {
    .sustainability h2 {
        font-size: 1.5rem !important;
    }
}

.sustainability .highlight {
    padding: 0 1rem;
    background-color: var(--darkblue);

    color: white;
}

.sustainability .subpage .highlight {
    background-color: var(--blue);
}

.sustainability strong {
    font-size: 1.5em;
    font-weight: bold;
}

section.bg-accent {
    background-color: var(--section-bg-accent);
}

.sustainability [role="button"] {
    cursor: pointer;
}

.explanation {
    color: var(--item-inactive);
}

.grayscale {
    filter: grayscale(1);
}

.container-rounded {
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    gap: 2rem;
}

.sustainability .description {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    padding: 0 10rem;
}

@media screen and (max-width: 1280px) {
    .sustainability .description {
        padding: 0 5rem;
    }
}

@media screen and (max-width: 768px) {
    .sustainability .description {
        padding: 0;
    }
}