:root {
    /* Fonts */
    --titlefont:'ABeeZee', Georgia, serif;
    --headerfont:'ABeeZee', Georgia, serif;
    --bodyfont:'ABeeZee', Georgia, serif;

    /* Images - change paths if necessary */
    --backgroundimage:url('/fl/yy/yybg.png');
    --headerimage:url('/fl/yy/yyhr.png');
    
    /* Colors */
    --backgroundcolor:#ccc;
    --contentbackground:#FFF;

    --contentcolor:#000;
    --footercolor:#444;

    --title:#ff5da9;
    --header1:#ff5da9;
    --header2:#ff5da9;
    --header3:#ff5da9;

    --navlink:#026cd9;

    --link:#026cd9;

    --footerlink:#026cd9;
    
}

* { /*reset margin and padding*/
    margin:0;
    padding:0;
    border:0;
}

body {
    background:var(--backgroundimage) fixed var(--backgroundcolor);
    background-size: 20%;
    font:1rem var(--bodyfont);
    line-height:1.5;
}

#container {
    margin:50px auto 20px auto;
    background-color:var(--contentbackground);
    max-width:500px;
    width:90%;
    box-shadow: 0px 0px 10px  #ff5da9;
}

#banner {
    width:100%;
    height:284px;
    background:var(--headerimage) no-repeat center;
    background-size:cover;
    border-bottom: 1px solid #ff5da9;
}


#navigation {
    width:calc(100% - 10px);
    text-align:center;
    padding:5px;
}

#navigation ul li {
    display:inline-block;
    list-style:none;
    padding: .25em .5em .25em 0;
}

#navigation ul li a {
    font:1.25em var(--headerfont);
    color:var(--navlink);
    text-decoration:none;
}

#navigation ul li a:hover, #navigation ul li a:focus {
    color:var(--navlinkhover);
}

#content {
    text-align:justify;
    color:var(--contentcolor);
    padding:0 20px 20px 20px;
    width:var(100% - 40px);
}

    #content p {
        margin:1em 0 1em 0;
    }
    
    #content h1 {
        border-bottom:1px solid #ff5da9;
        font:1.7em var(--headerfont);
        color:var(--header1);
        margin:0.25em 0 0.25em 0;
    }
    
    #content h2 {
        color:var(--header2);
        font:1.5em var(--headerfont);
        border-bottom:1px solid #ff5da9;
        margin:0.25em 0 0.25em 0;
    }

    #content h3 {
        font:1.3em var(--headerfont);
        text-transform:lowercase;
        font-style:italic;
        color:var(--header3);
        margin:0.25em 0 0.25em 0;
    }
    
    #content a {
        color:var(--link);
        text-decoration: none;
    }
    
    #content a:hover {
        color:var(--linkhover);
    }
    
    #content li {
        margin:.5em 0 .5em 1.5em;
        list-style-position:outside;
    }
    
textarea {
border: 1px solid #ccc;
border-radius: 4px;
height: 50px;
width: 40%;
}

hr { 
    border-top: 1px solid #ff5da9;
    margin:0 -20px;;
    padding: 0;
}

table {
    text-align: center;
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid #ff5da9;
    padding: 5px;
    font-size: 14px;
}

#footer {
    margin:auto;
    text-align:center;
    color:var(--footercolor);
    background-color:var(--contentbackground);
    max-width:400px;
    width:90%;
    padding: 10px 0 0 0;
}

    #footer a {
        color:var(--footerlink);
    }
    
    #footer a:hover, #footer a:focus {
        color:var(--footerlinkhover);
    }

    #footer p {
        margin:0.5em 0 0.5em 0;
    }

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--contentbackground);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}