body {
    background-color: #EAE2D1;
}

.CIGAW-calc {
    --main-bg-colour: rgb(234,226,209);
    --main-bg-colour-alpha: rgb(234,226,209,.5);
    --main-text-colour: #163804;
    --light-text-colour: #F8F7F5;
    --accent-colour1: #A8348F;
    --accent-colour2: #76445D;
    --accent-colour3: #DF7449;
    --accent-colour4: #B2A622;
    --accent-colour4-vals: 178, 166, 34;
    --accent-colour5: #7F7D2E;
    --accent-colour6: #163804;
    --accent-colour7: #4F6A73;
    --accent-text-colour: #4a4646;
    --accent-text-colour2: #74804f;
    --accent-text-colour3: #b0c56f;
    --accent-text-colour4: #0b0b0a;
    --border-colour: lightgrey;
    --slider-background: var(--accent-colour5);
    --select-background-colour: var(--light-text-colour);
    --select-border-colour: var(--accent-colour4);
    --highlight-colour: maroon;

    font-family:"mr-eaves-modern",sans-serif;
    font-weight: 400;
    color: var(--main-text-colour);
    width: 100%;
    max-width: 1500px;
    min-height: max-content;
    margin: 0px auto;
}

.tiny {
    font-size: .7em;
}
.small {
    font-size: .9em;
}
.medium {
    font-size: 1em;
}
.large {
    font-size: 1.1em;
}
.larger {
    font-size: 1.2em;
}
.huge {
    font-size: 1.4em;
}

/* .huge {
    font-size: min(7vw, 96px);
}
.larger {
    font-size: min(6vw, 48px);
}
.large {
    font-size: clamp(1.5em,4.3vw,1.8em);
}
.medium {
    font-size: clamp(1.3em,3.2vw,1.5em);
}
.small {
    font-size: clamp(1em,2.7vw,1.2em);
}
.tiny {
    font-size: clamp(.8em,2.2vw,.8em);
} */
.regular {
    font-weight: 400;
}
.thicker {
    font-weight: 700;
}
.thin {
    font-weight: 300;
}
.bold {
    font-weight: 700;
}
.underline {
    text-decoration: underline;
}

.panel {
    box-sizing: border-box;
}

.panel.hidden {
    display:none;
}

.panel-content {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    gap: 1em;
}

.panel-goback-button {
    color: var(--accent-colour2);
    margin-top: 1em;
    cursor: pointer;
}

.panel-goback-button:hover {
    color: var(--accent-colour1);
}

.title-group {
    display: flex;
    flex-flow: column nowrap;
    align-items:center;
    gap:.5em;
    margin-bottom: 1em;
}

.title {
    text-align: center;
}

#intro-panel {
    background: linear-gradient(var(--main-bg-colour-alpha), var(--main-bg-colour-alpha)), url(assets/carbonMontage.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    padding-bottom: 40%;
}

#country-panel {
    background: linear-gradient(var(--main-bg-colour-alpha), var(--main-bg-colour-alpha)), url(assets/carbonMontage2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    padding-bottom: 40%;
}

#age-panel {
    background: linear-gradient(var(--main-bg-colour-alpha), var(--main-bg-colour-alpha)), url(assets/carbonMontage3.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    padding-bottom: 29%;
}

.country-select {
    width: 10em;
    height: 1.8em;
    margin-top: 1em;
    margin-bottom: .6em;
}

.age-date-input {
    font-family: "mr-eaves-modern";
    width: 4em;
    height: 2.5em;
    text-align: center;
    text-align-last: center;
    padding: 0px;
    border: var(--select-border-colour) solid 1px;
    background-color: var(--select-background-colour);
}

.death-date {
    display: flex;
    flex-flow: row nowrap;
    gap: 30px;
}

.date-select {
    width: 6em;
    height: 2.5em;
    border-color: var(--border-colour);
    text-indent: .3em;
    color: var(--main-text-colour);
}

.info-msg {
    background-color: var(--main-bg-colour);
    color: var(--accent-colour2);
    padding: 0.5em;
    margin-top: 0.5em;
    text-align: center;
}

.accent-msg {
    background-color: var(--accent-colour);
    color: var(--accent-colour5);
    font-size: 1.1em;
    padding: 0.07em;
}

.summary-cards {
    display: flex;
    flex-flow: row wrap;
    gap: 1em;
    padding-bottom: 1em;
}

.summary-card {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    background-color: var(--light-text-colour);
    border-radius: 11px;
    text-align: center;
    gap: 1em;
    flex-grow: 1;
    padding: .5em;
    border: solid 1px var(--accent-colour4);
}

.summary-breakdown-cards {
    display: flex;
    flex-flow: column nowrap;
    gap: 1em;
    flex-grow: 1;
}

.summary-breakdown-card {
    display: grid;
    grid-template-columns: 75% 1fr;
    grid-template-rows: 1fr;
    background-color: var(--light-text-colour);
    border-radius: 11px;
    padding: 1em 0 0 1em;
    border: solid 1px var(--accent-colour4);
}

.breakdown-info {
    display: flex;
    flex-flow: column nowrap;
    gap: .9em;
    grid-row: 1;
    grid-column: 1;
    padding-bottom: 1em;
}

.summary-breakdown-img {
    grid-row: 1;
    grid-column: 2;
    align-self: end;
    justify-self: end;
    width: 100%;
    max-width: 150px;
}

.card-background {
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: clamp(50px,40%,150px);
}

#tons-to-date-card {
    background-image: linear-gradient(rgba(248, 247, 245, .3), rgba(248, 247, 245,.3)),url(assets/todate-graphic.png);
}

#remaining-carbon-card {
    background-image: linear-gradient(rgba(248, 247, 245, .3), rgba(248, 247, 245,.3)),url(assets/toEnd-graphic.png);
}

.reduction-grid {
    display: grid;
    grid-template-columns: 8fr 2fr;
    grid-template-rows: min-content min-content;
    row-gap: 1em;
    column-gap: 1em;
    justify-items: center;
}

#reduction-title {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
}

#reduction-choices {
    grid-column: 1;
    grid-row: 2;
}

.reduction-choices {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 1em;
}

.reduction-choice-card {
    display: grid;
    grid-template-rows: min-content min-content 1fr;
    row-gap: 1em;
    justify-items: center;
    align-items: center;
    align-content: stretch;
    background-color: var(--light-text-colour);
    padding: .5em;
    border-radius: 20px;
    border-style: solid;
    border-color: rgba(var(--accent-colour4-vals),0);
    border-width: 4px;
}

.reduction-img {
    width: 100px;
}

.reduction-info {
    font-weight: 400;
    width: 250px;
    text-align: center;
}

.reduction-info > input[type="checkbox"] {
    width: 1em;
    height: 1em;
    vertical-align: baseline;
    accent-color: var(--slider-background);
}

.reduction-side-panel {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    grid-column: 2;
    grid-row: 2;
    max-height: 80vh;
    position: sticky;
    top: 5px;
}

.reduction-slider-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content 1fr;
    row-gap: 1em;
    padding-top: 1em;
    padding-bottom: 1.5em;
    margin-bottom: 1em;
    border-radius: 10px;
}

.reduction-current {
    grid-column: 1 / 4;
    grid-row: 1;
    text-align: center;
    align-self: center;
}

.reduction-slider {
    grid-column: 2;
    grid-row: 2;
    background-image: linear-gradient(var(--slider-background), #7f7d2e17);
    border-radius:10px;
    min-height: 50vh;
}

.reduction-slider-pointer-container {
    grid-column: 1;
    grid-row: 2;
}

.reduction-slider-pointer {
    position: relative;
    left: 28%;
    top: 0%;
    transition: top 0.3s linear;
}

#slider-pointer-img {
    width: 100%;
    transform: translate(-13%, -50%);
}

.reduction-slider-tickmark-container {
    grid-column: 3;
    grid-row: 2;
    position: relative;
}

.reduction-slider-tickmark {
    position: absolute;
    font-weight: 400;
    color: var(--accent-colour7);
    padding-left: .4em;
}

#reset-commits-button {
    margin-top: .7em;
    color: var(--accent-colour5);
    cursor: pointer;
    transition: all .3s;
    text-align: center;
}

#reset-commits-button:hover {
    color: var(--accent-colour4);
}

#certificate-panel-content {
    flex-flow: row wrap;
    align-items: baseline;
    justify-content: center;
    gap: 2em;
}

.certificate {
    position: relative;
    box-sizing: border-box;
    width: max-content;
    padding: 1em;
    padding-bottom: .3em;
    display: block;
    grid-template-rows: 1fr 7fr 1fr;
    grid-template-columns: 1fr 1fr;     
    background-color: #f9f4e8;
    border: var(--accent-colour4) solid 5px;
}

#cert-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}

#cert-content {
    position: relative;
    z-index: 1;
}

.cert-leaf-img {
    position: absolute;
    z-index: 1;
}

#cert-header {
    max-width: 700px;
}

#cert-header-img {
    width: 34%;
    display:block;
    margin: auto;
    opacity:.8;
}

#cert-title {
    text-align: center;
    font-family: "turnip";
    font-weight: 400;
    color: var(--accent-colour5);
}

#cert-header-message {
    width: 80%;
    text-align: center;
    margin: auto;
    margin-bottom: 2.4em;
    font-weight: 600;
    font-style: italic;
    color: var(--accent-colour6);
}

.cert-title {
    font-family: "turnip";
    text-align: center;
    color: var(--accent-colour5);
}

#cert-commits {
    text-align: center;
    max-width: 650px;
    display: block;
    margin: auto;
    color: var(--accent-colour6);
}

.cert-commit {
    margin-block-end: .2em;
}

.cert-reduction {
    margin-block-end: .4em;
}

#total-saved {
    margin-top: 3em;
    z-index: 2;
}

#cert-footer {
    width: 100%;
    margin-top: 2%;
}

#cert-logo-img {
    width: 300px;
    max-width: 100%;
    display: block;
    margin: auto;
    margin-top: 1.8em;
}

#cert-cigaw-url {
    text-align: center;
    font-weight: 400;
    color: var(--accent-colour2);
}

#save-and-share {
    display: flex;
    flex-flow: column nowrap;
    gap: 2em;
    align-items: center;
}

.padded-button {
    width: 6.5em;
    margin: .5em;
}

.share-container {
    visibility: hidden;
    opacity: 0.0;
    transition: all .7s;
}

.visible {
    visibility: visible;
    opacity: 1.0;
}

.share-icons {
    margin-top: .5em;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 1.2em;
}

.share-icons > a {
    cursor: pointer;
}

.share-icons svg {
    width: 37px;
    fill: var(--accent-colour5);
    transition: all .3s;
}

.share-icons svg:hover {
    fill: var(--accent-colour4);
}

.social-icon {
    width: 37px;
    cursor: pointer;
}

.blinking {
    animation-name: blinking;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
}

@keyframes blinking {
    50% {
    opacity: .7;
    }
}

button {
    font-family: "mr-eaves-modern";
    font-size: 1em;
    background-color: var(--accent-colour5);
    color: var(--light-text-colour);
    border: solid 2px var(--accent-colour4);
    padding: .3em 1em;
    min-width: 5em;
    border-radius: 10px;
    cursor: pointer;
    transition: all .3s;
}
button:hover {
    background-color: var(--accent-colour4);
    border: solid 2px var(--accent-colour5);
}
select {
    -moz-appearance: none; 
    -webkit-appearance: none; 
    appearance: none;
    border-color: var(--select-border-colour);
    text-align: center;
    text-align-last: center;
    border-radius: 5px;
    color: var(--main-text-colour);
    font-family: "mr-eaves-modern";
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjEuNDEgNC42NyAyLjQ4IDMuMTggMy41NCA0LjY3IDEuNDEgNC42NyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIzLjU0IDUuMzMgMi40OCA2LjgyIDEuNDEgNS4zMyAzLjU0IDUuMzMiLz48L3N2Zz4=) no-repeat 95% 50% var(--select-background-colour);
}

@media (min-width: 768px) {
    .CIGAW-calc {
        font-size: 24px;
        .huge {
            font-size: 2em;
        }
    }
}

@media (min-width: 1024px) {
    .CIGAW-calc {
        font-size: 24px;
        .huge {
            font-size: 2.4em;
        }
    }
}

@media (max-width: 768px) {
    .CIGAW-calc {
        font-size: 20px; 
        #reduction-title {
            grid-column: 1/3;
        }
        .reduction-img {
            width: 75px;
        } 
        .reduction-info {
            width: 175px;
        }     
        .reduction-side-panel {
            max-height: 700px; 
        }
        .reduction-slider {
            min-height: 340px;
        }
    }
}
@keyframes blinking {
    50% {
      opacity: .7;
    }
}