:root{
    --theme-grey-1: #f1ebe4; 
    --theme-grey-2: #dbd5ce; 
    --theme-bg: #fce9c8; 
    --theme: #fac27e; 
    --theme-red: #a93923; 
    --theme-fg: #9c6a3d;
}

.coloured-bg,
#showcase{
    background-color: var(--theme-bg);
}

.pie-chart-in{
    background-color: var(--theme-grey-1) !important;
}

.persona-card{
    padding: 12px 12px 24px 12px !important;
    background-color: #fbf5ea; 
    border-color: var(--theme-bg);
}

.persona-card img{
    border: 2px solid var(--theme-bg);
}

.persona-card div{
    margin: 0 8px;
}

main h2, 
.themed-text{
    color: var(--theme-fg);
}

.icon-text svg {
    fill: var(--theme-fg);
}

.bordered{
    background: none; 
    border: 1px solid var(--theme-fg);
}

.textbox .icon-text{
    background-color: var(--theme-bg); 
    color: var(--theme-fg);
}

.textbox.cons.bordered{
    border: 1px solid #a93923;
}

.textbox.cons.coloured-bg{
    background-color: #f9e7e2;
}

.cons .icon-text{
    color: var(--theme-red); 
    background-color: #f9e7e2;
}

.cons.icon-text p{
    color: var(--theme-red);
}

.cons svg{
    fill: var(--theme-red);
}

.textbox.glass{
    border: 1px solid var(--white-50);
    border-radius: 8px;
}

.link-button.solid{
    color: #251F15;
    background-color: #fcd797;
    border-color: #fcd797;
}

#mascot{
    position: absolute; 
    width: auto; 
    height: 240px; 
    bottom: -40px; 
    right: -80px; 
    z-index: 10;

    @media only screen and (max-width: 767px) { 
        bottom: -80px;
        right: auto;
        left: calc(50% - 90px);
    }
}

#showcase .glass{
    background-color: #fcd797;
}

#showcase .cons{
    background-color: #f6ccc3;
}

figure img:nth-child(1 of img){
    opacity: 1;
    transition: all 0.4s ease;
}

figure img:nth-child(2 of img){
    filter: grayscale(0.5);
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    z-index: -1;
}

@media (any-hover: hover){
    .link-button.solid:hover {
        background-color: var(--theme-bg); 
        color: var(--theme-fg); 
        border-color: var(--theme-fg);
    }    
    .link-button.solid:hover svg {
        fill: var(--theme-fg);
    }
}