:root {
    --clr-primary-300: #f3eed9;
    --clr-primary-400: #038470;
    --clr-neutral-100: #ffffff;
    --clr-neutral-900: #222c2a;
    --clr-dark-900: rgba(0,0,51,1);
    --clr-dark-700: rgba(51,0,153,1);
    --clr-light-400: rgba(102,153,204,1);
    --clr-light-600: rgba(255,102,153,1);

    --ff-primary: 'Lato', sans-serif;
    --ff-secondary: 'Oswald', sans-serif;
    --ff-handwritten: 'Hachi Maru Pop', cursive;
    --ff-logo: 'Ultra', cursive;
}

*, *::before,*::after {box-sizing: border-box; margin:0;}
body {
    font-family: var(--ff-primary);
    font-weight: 400;
    font-size: 1.3125rem;
    line-height:1.6;
    height: 100%;
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--ff-secondary);
}
h1,h2,h3 {
    /* font-family: var(--ff-handwritten); */
    line-height: 1;
}
h2,h3,p {
    margin-bottom:1em;
}
img {
    display:block;
    max-width:100%;
    border-radius:8px;
    margin:0 auto;
}
/* custom fonts */
.handwritten {font-family: var(--ff-handwritten);}
.logo {font-family: var(--ff-logo); font-size:2rem;}
.logo span:nth-child(1) {color:red;}
.logo span:nth-child(2) {color:yellow;}
.logo span:nth-child(3) {color:orange;}
.logo span:nth-child(4) {color:green;}
.logo span:nth-child(5) {color:pink;}
.logo span:nth-child(6) {color:cyan;}
.logo span:nth-child(7) {color:pink;}
.logo span:nth-child(8) {color:green;}
.logo span:nth-child(9) {color:orange;}
.logo span:nth-child(10) {color:yellow;}
.logo span:nth-child(11) {color:red;}
.logo a {text-decoration: none;}

/* colours */
.bg-dark {background: var(--clr-dark-900);}
.bg-blue {background: var(--clr-dark-700);}
.bg-light {background: var(--clr-light-400);}
.bg-white {background: var(--clr-neutral-100);}
.clr-dark {color: var(--clr-dark-900);}
.clr-blue {color: var(--clr-dark-700);}
.clr-light {color: var(--clr-light-400);}
.clr-white {color: var(--clr-neutral-100);}

/* photo backgrounds */
.bg-cancercells {
    background-image: url(../../images/background-Cancer-Cells.jpg);
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* filter: blur(8px);
    -webkit-filter: blur(8px);
    z-index:-1; */
}

.bg-cancercells > section {
    background-color: rgba(255,255,255,0.75);
}

/* layout */
.donations {
    /* background: #038470; */
    background: var(--clr-light-400);
    padding:1em;
    text-align: center;
    color: var(--clr-dark-900);
}
.donations a {
    background-color: var(--clr-light-4000);
    border:2px solid var(--clr-dark-900);
    border-radius:8px;
    padding:0.5em;
    text-decoration: none;
    font-weight: 700;
    color: var(var(--clr-dark-700));
}
.donations a:hover {
    background-color:var(--clr-dark-900);
    border:2px solid #e5e5e5;
    border-radius:8px;
    padding:0.5em;
    text-decoration: none;
    font-weight: 700;
    color: var(--clr-primary-300);
}
header {
    /* background-color: var(--clr-primary-300); */
    background: rgb(0,0,51);
    background: linear-gradient(165deg, rgba(0,0,51,1) 0%, rgba(51,0,153,1) 48%, rgba(102,153,204,1) 76%, rgba(255,102,153,1) 100%); 
    padding: 3rem;
}
section {
    padding: 3rem 0;
}
.container {
    margin-inline: auto;
    margin: 0 auto;
    width: min(90%, 70.5rem);
}
.container-fliud {
    width:100%;
}
.row {
    padding:0;
}
.row .col {
    margin:0 auto;
    padding: 2rem;
}

.letter {
    position: relative;
    background-color: #f3f3f3;
    /* transform: rotate(0.5deg); */
    box-shadow:0 5px 16px #444444;
    /* In a perfect world... */
    background-image: linear-gradient(0deg, transparent 5em, rgba(255,0,0,.1) 0, transparent 5.1em), linear-gradient(rgba(0,0,255,.1) 1px, transparent 0);
    background-size: 100% 1.6em;
    background-position: 0 1.9em;
    color: blue;
    padding:0.6em 1.2em;
    font-size: 0.8em;
    /* line-height: 1.2em; */
}
.letter .signed {
    position:absolute;
    right:1em;
    text-align:right; 
    display:inline-block;
    bottom: 0;
    /* float:right; */
}
.letter .signed span.signature{
    font-size: 2em;
    font-weight: 900;
}
.split {
    display:flex;
    flex-direction: column;
}
.split img {margin-bottom:0.5em;}

.performers {
    margin-bottom: 2em;;
}
.performers h3 {
    color: var(--clr-light-600)
}
.performers .split {
    padding:1em;
    border-bottom: 1px solid var(--clr-primary-400);
}
.performers .split:last-child {
    padding:1em;
    border-bottom: none;
}
.performers a {
    display:block;
    background-color: var(--clr-light-400);
    border:2px solid var(--clr-dark-700);
    padding: 0.5em;
    border-radius:8px;
    text-align: center;
    text-decoration: none;
}
.performers a:hover {
    background-color: var(--clr-light-600);
    color: var(--clr-dark-700);
}
footer .copyright p {
    margin-bottom:0;
    padding:1em;
    text-align: center;
}
.marg0 {margin:0; margin-bottom:0;}
.padd0 {padding:0;}

/* #donation-results {

} */

/* typography */
header h1 {
    font-size: 3em;
    color:#ffffff;
}
header p {
    color:#ffffff;
}
.txt-center {
    text-align: center;
}

/* navigation links */
section.navigation {
    padding:1rem 0;
}
nav {
    text-align: center;
    display: inline-block;
}
nav a:first-child {
    font-family: var(--ff-logo); font-size:2rem; background:none; border:none;
}
nav a:first-child:hover {
    background:none; border:none; padding:none;
}
nav a {
    border-radius:8px;
    display:inline-block;
    background-color: var(--clr-light-400);
    color: var(--clr-dark-900);
    text-decoration: none;
    margin: 0 0.5em;
    padding:0.5rem 1rem;
    font-size: 0.8em;
    font-weight:900;
}
nav a:hover {
    background-color: var(--clr-dark-900);
    color: var(--clr-light-400);
}

/* footer links */
footer a.btn {
    display: inline-block;
    background-color: var(--clr-light-400);
    border:2px solid var(--clr-dark-700);
    border-radius:8px;
    padding:0.5rem 1rem;
    text-decoration: none;
    font-weight: 700;
    color: var(--clr-dark-700);
}
footer a.btn:hover {
    background-color: var(--clr-light-600);
    color: var(--clr-dark-700);
}

/* media queries */
@media (min-width: 60em) {
    .split {
        flex-direction: row;
    }
    .split > * {
        flex-basis: 100%;
    }
    .split > * + * {
        margin-left: 2em;
    }
}
@media (min-width: 851px) {
    .letter {
        background-size: 100% 1.6em;
        background-position: 1.6em;
        padding:0.6em 1.2em;
        font-size: 0.8em;
    }
}