body {
    color: var(--sdv-dark);
    font-family: 'Stardew Valley', sans-serif;
}

p {
    font-size: 1.1em;
    color: var(--sdv-dark);
}

/* main — no own background-image; the parallax html layer shows through */
.main {
    background: linear-gradient(
        to bottom,
        rgba(236, 170, 103, 0.20)  0%,    /* light tint at top */
        rgba(236, 170, 103, 0.22) 75%,    /* stays nearly transparent through most of hero */
        rgba(217, 142,  74, 0.82) 100%    /* fades into the intro section's exact colour */
    );
    height: calc(100vh - 50px);
    color: var(--sdv-dark);
}

.main-title {
    font-size: 3.4rem;
    color: var(--sdv-dark);
    font-family: 'Stardew Valley', sans-serif;
}

.main-title-name {
    color: var(--sdv-highlight);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--sdv-highlight);
}

.main-subtitle {
    color: var(--sdv-dark);
    font-size: 1.6rem;
}

.bx {
    color: var(--sdv-dark);
}

/* intro */
.intro {
    background-color: var(--sdv-bg-alt);
}

.intro-title {
    color: var(--sdv-dark);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--sdv-dark);
    font-size: 2.2rem;
}

.intro-text {
    color: var(--sdv-dark);
}

/* toolkit */
.toolkit {
    background-color: var(--sdv-bg);
}

.toolkit-title {
    color: var(--sdv-dark);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--sdv-dark);
    font-size: 2.2rem;
}

.toolkit-subtitle {
    font-size: 1.8rem;
    color: var(--sdv-dark);
}

.toolkit-buttons {
    background-color: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-image: none !important;
}

.toolkit-icons {
    font-size: 4rem;
    color: var(--sdv-dark);
}

.toolkit-pytorch  { width: 60px; height: 60px; }
.toolkit-matplotlib { height: 54px; }
.toolkit-numpy    { height: 64px; }

/* Recolor white SVG images (pytorch, numpy, pandas, matplotlib) to #5B2B2A.
   Targets only <img> elements, leaving Boxicon <i> elements untouched. */
img.toolkit-icons {
    filter: brightness(0) invert(36%) sepia(1) hue-rotate(-37deg) saturate(220%) brightness(63%);
}

/* awards */
.awards {
    background-color: var(--sdv-bg-light);
}

.awards-title {
    color: var(--sdv-dark);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--sdv-dark);
    font-size: 2.2rem;
}

.award-card {
    background-color: var(--sdv-input-bg) !important;
    border-style: solid;
    border-width: 5px;
    border-image-slice: 20;
    border-image-width: 10px 20px;
    border-image-outset: 0 20px;
    border-image-repeat: round;
    border-image-source: var(--sdv-border);
}

.award-title {
    font-size: 1.5rem;
    color: var(--sdv-dark);
    font-weight: 600;
}

.award-issue {
    color: var(--sdv-highlight);
}

/* mbti */
.mbti {
    background-color: var(--sdv-bg);
}

.mbti-title {
    color: var(--sdv-dark);
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--sdv-dark);
    font-size: 2.2rem;
}

.mbti-subtitle {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--sdv-dark);
}

.mbti-card {
    background-color: var(--sdv-input-bg) !important;
    border-style: solid;
    border-width: 5px;
    border-image-slice: 20;
    border-image-width: 10px 20px;
    border-image-outset: 0 20px;
    border-image-repeat: round;
    border-image-source: var(--sdv-border);
}

.mbti .progress::-webkit-progress-value {
    background: var(--sdv-highlight);
}
.mbti .progress::-moz-progress-bar {
    background: var(--sdv-highlight);
}
.mbti .progress {
    background-color: #C07830;
}

@media screen and (max-width: 1023px) {
    .main-title    { font-size: 28px; }
    .main-subtitle { font-size: 1.2rem; }
    .intro-title   { font-size: 28px; }
}

@media screen and (max-width: 768px) {
    .profile {
        width: 200px;
        max-width: 100%;
        height: auto;
    }

    .main {
        background-color: #ECAA67;
    }
}