:root {

    --red-1: #FFC5BA;
    --red-2: #FF7B7B;
    --red-3: #E71A0C;
    --red-4: #7C1122;

    --pink-1: #FFE5ED;
    --pink-2: #FFD3E5;
    --pink-3: #FFB3D9;
    --pink-4: #FF9AD8;
    --pink-5: #FF77C7;
    --pink-6: #BC2C89;

    --white: #ffffff;

    --background: var(--pink-3);
    --text-background: var(--white);

    --primary: var(--pink-6);
    --secondary: var(--pink-5);

    --warning-solid: var(--red-4);
    --warning-background: var(--red-1);
}


body { background: var(--background); }

#banner h1 a:link, #banner h1 a:visited, #banner h1 a:hover, #banner h1 a:active {
    color: var(--primary);
}

#banner nav {
    background: var(--primary);
}

#banner nav a:link, #banner nav a:visited {
    background: var(--primary);
    color: var(--white);
}

#banner nav a:active, #banner nav a:hover {
    background: var(--white);
    color: var(--primary);
}

#content-warning {
    width: 40em;
    margin: 2em auto;
    padding: 1em;
    border: 1px solid var(--warning-solid);
    color: var(--warning-solid);
    background-color: var(--warning-background);
}

#content-warning p.buttons {
    text-align: right;
}

#content-warning button {
    display: inline-block;
    font-size: 130%;
    padding: 10px;
    border: 1px solid var(--warning-solid);
    color: var(--warning-solid);
    background-color: var(--background-color); 
}

.photo-right {
    margin: 1em;
    padding: 1em 1em 3em;
    border: 1px solid var(--secondary);
    width: 40%;
    float: right;
}

section.body ul li {
    margin-bottom: 0.125em
}