/* Variables for color palette */
:root{
    --bg1: black;
    --bg2: #222222; /* dark grey */
    --bg3: #ddd; /* light grey */
    --bg4: url("../images/tile/lace_teal.gif"); /* teal lace */
    --bg5: url("../images/tile/lace_red.gif"); /* red lace */
    --bg6: url("../images/tile/wave.gif"); /* white */
    --bg7: url("../images/tile/4.jpg"); /* off-white */
    --text1: black; 
    --text2: white;
    --main: #047791; /* teal */
    --acc: #af010a; /* red */
    --border: white;
    --lace: url(../images/border/lace_white_border_filled2.png);
}
/************************************************************/
            
/* BASIC FORMATTING THROUGHOUT PAGE */
body {
    /* BACKGROUND */
    background: var(--bg2);
    background-image: url("../images/peeping marie.png");
    background-repeat: no-repeat;
    background-position: right bottom;
                
    /* TEXT */
    color: var(--text1);
    font-family: courier, serif;
}
            
a {
    color: var(--main);
}

a:hover {
    color: var(--acc);
}

img {
    vertical-align: middle; /* removes gap beneath image */
}

/************************************************************/
            
/* TITLE HEADER */
header {
    max-width: 500px;
    margin: auto;
    margin-bottom: 20px;
    box-sizing: border-box; /* Accounts for borders and padding to make max-width final */
    
    /* BORDER */
    /*border: 1px dashed var(--border); /* Simple dashed border */
    border: 30px solid transparent; /* Required for border-image */
    border-image: var(--lace) 30 round;
    border-image-outset: 5px;
    
    /* BACKGROUND */
    background: var(--bg4);
    background-origin: border-box;
    
    /* TEXT */
    color: var(--text2);
    text-align: center;
    padding: 0px;                
}
/************************************************************/
            
/* MAIN BLURB */
main {
    max-width: 500px;
    margin: auto;                
    margin-bottom: 20px;
    box-sizing: border-box; /* Accounts for borders and padding to make max-width final */
    
    /* BORDER */
    /*border: 1px dashed var(--border); /* Simple dashed border */
    border: 30px solid transparent; /* Required for border-image */
    border-image: var(--lace) 30 round;
    border-image-outset: 5px;
    
    /* BACKGROUND */
    background: var(--bg6);
    
    /* TEXT */
    padding: 0px;
}
/************************************************************/
            
/* LINKS OUT CONTAINER */
.social {
    /* WRAP LINKS */
    display: flex; 
    flex-wrap: wrap;
    max-width: 500px; /* Header max-width + text padding x2 */
    margin: auto;
    margin-bottom: 20px;
    box-sizing: border-box; /* Accounts for borders and padding to make max-width final */
    
    /* BORDER */
    /*border: 1px dashed var(--border); /* Simple dashed border */
    border: 30px solid transparent; /* Required for border-image */
    padding: 0px;
    border-image: var(--lace) 30 round;
    border-image-outset: 5px;
    
    /* BACKGROUND */
    background: var(--bg4);
    background-origin: border-box;
    
    /* TEXT */
    color: var(--text2);
    font-weight: bold;
}

/* LINKS BUTTON */
.social div {
    width: 100px; /* Width of each link button */
    margin: auto;
    text-align: center;
    padding: 5px;
}
            
/* LINKS TEXT */
.social a {
    color: var(--text2);
    text-align: center;
    text-decoration: none;
}
            
/* LINKS HOVER */
.social div:hover {
    background: var(--bg5);                
}
/************************************************************/
            
/* FANLISTINGS AND OTHER INTERESTS */
            
.fandom {
    /* WRAP LINKS */
    display: flex; 
    flex-wrap: wrap;
    
    max-width: 500px; /* Header max-width + text padding x2 */
    margin: auto;
    margin-bottom: 20px;
    box-sizing: border-box; /* Accounts for borders and padding to make max-width final */
    
    /* BORDER */
    /*border: 1px dashed var(--border); /* Simple dashed border */
    border: 30px solid transparent; /* Required for border-image */
    padding: 0px;
    border-image: var(--lace) 30 round;
    border-image-outset: 5px;
    
    /* BACKGROUND */
    background: var(--bg5);
    background-origin: border-box;
    
    /* TEXT */
    color: var(--text2);
}

/* LINKS BUTTON */
.fandom div {
    margin: auto;
}
            
/* HOVER LOWERS lINK BUTTON OPACITY */
.fandom a:hover {
    opacity: .75;
}
            
/************************************************************/
            
/* FOOTER AND ASSET CREDITS */
footer {
    grid-area: footer;
    max-width: 500px;
    margin: auto;
    box-sizing: border-box; /* Accounts for borders and padding to make max-width final */
    
    /* BORDER */
    border: 1px dashed var(--border);
    border-radius: 15px;
    
    /* BACKGROUND */
    background: rgba(34, 34, 34, .75);
    padding: 0px;
    
    /* TEXT */
    color: white;
    font-size: 12px;
    text-align: center;
}
/************************************************************/