body {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-content: start;
    align-content: start;
    grid-gap: 3px;
    max-width: 100em;
    margin: 0 auto;
    padding: 1em;
    background-repeat: repeat; background: url(swirlsbg.png); background-attachment: fixed; background-color: #300030;
    font-family: 'Trebuchet MS', 'Tahoma', 'Arial', sans-serif; 
    font-size: 16; 
    color: #E5DDCB; }

@font-face {
font-family: 'METRO';
src: local('METRO'), 
    url('METRO.TTF') format('truetype');}

a:link		{color: #f2a98c; text-decoration:underline; padding: 1px;}
a:visited	{color: #f2a98c; text-decoration:underline; padding: 1px;}
a:hover, a:focus	{color: #C04848; text-decoration:underline; padding: 1px;}

h1 { font-family: 'METRO'; font-size: 72; color: #F07241; letter-spacing: 1px; font-weight:bold; margin: 0; padding: 0; text-shadow:2px 0px 1px #C04848; filter:dropshadow(color=#C04848,offx=2,offy=0); }
h2 { font-family: 'METRO'; font-size: 54; color: #F07241; letter-spacing: 1px; font-weight:bold; margin: 0; padding: 0; }
h3 { font-family: 'METRO'; font-size: 40; color: #F07241; letter-spacing: 1px; font-weight:bold; margin: 0; padding: 0; display: inline-block; }
h4 { font-family: 'METRO'; font-size: 32; color: #F07241; letter-spacing: 1px; font-weight:bold; margin: 0; padding: 0; display: inline-block; }
h5 { font-family: 'METRO'; font-size: 20; color: #F07241; letter-spacing: 1px; font-weight:bold; margin: 0; padding: 0; display: inline-block; }

hr {border: 1px solid #601848; align-items:stretch;}

.port { float: left; padding: 0 2em 1em 0;}

img { max-width: 100%; height: auto;}

.center {
    justify-items: center;
    justify-content: center;
    text-align: center;
    justify-self: center;
    display: flex;
    position: relative;
}

.splash {
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    background-image:
        linear-gradient(
            #F07241, 
            #300030);
}

.splash-content {
    max-height: 50%;
    margin: 0px auto;
    width: 1000px;
    max-width: 90%;
    padding: 10px 0px 0px;
    background-image:url(img/red-rose.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.splash-content H1 {
    color: #F07241;
    margin-bottom: 40px;
    text-shadow: 2px 2px 5px #300030;
}

.splash-content p {
    color: #FFC8C2;
    font-size: 1.2em;
    margin: 20px;
    font-family: 'Trebuchet MS', 'Tahoma', 'Arial', sans-serif;
    text-align: left;
    line-height: 1.4em;
}

.splash-enter {
    color: #EFAE64;
    font-family: 'Trebuchet MS', 'Tahoma', 'Arial', sans-serif;
    font-weight: 600;
}

.splash-header {
    width: 100%;
    font-size: 5em;
    margin-top: 100px;
    margin-bottom: 50px;
    padding-left: 50px;
    text-shadow: 3px 3px 5px #300030;
    color: #f2a98c;
    font-family: 'METRO', 'Trebuchet MS', 'Tahoma', 'Arial', sans-serif;
    letter-spacing: 2px;
    font-weight: 600;
}

a.splash-animated:hover {
    background-size: 100% 100%;
    letter-spacing: 0px;
}

a.splash-arrow:hover {
    text-decoration: none;
}

header {  
    grid-column: 1 / span 5;
    align-items: center;
}

navbar {
    grid-column: 1 / span 5;
    grid-row: 2;
    padding: .5em 0em .5em 0em;
    margin: auto 8em auto 8em;
    display: flex;
    border-radius: 3px;
    background: url(og25.png);
    justify-content: center;
    justify-items: center;
    text-align: center;
    border-width: 3px;  
    border-style: double;
    border-color: #EB7B59;
}

.charbox {
    display:inline-block;
    text-align: center;
    align-content: center;
    justify-self: center;
    vertical-align: top;
    margin:20px 10px 20px 10px;
    padding: 8px;
    position: relative;
    width: 200px;
    height: 300px;
    border-radius: 10px;
    border-width: 6px;  
    border-style: double;
    border-color: #601848;}

.galbox {
    display:inline-block;
    text-align: center;
    align-content: center;
    justify-self: center;
    vertical-align: top;
    margin:20px 10px 20px 10px;
    padding: 8px;
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    border-width: 6px;  
    border-style: double;
    border-color: #601848;}

.column1 {
    display:inline-block;
    justify-content:flex-start;
    vertical-align: top;
    margin:0px 20px 0px 0px;
    position: static;
    width: 47.5%; }

.column2 {
    display:inline-block; 
    justify-content:flex-start; 
    vertical-align: top; 
    position: relative;
    width: 47.5%; }

navbar ul { font-family: 'METRO'; font-size: 26; color: #EB7B59; list-style-type: none; margin: 0; padding: 0; }
navbar ul li { display: inline; font-weight:bold;  }
navbar a:link		{color: #f2a98c; text-decoration:none; padding: 1px;}
navbar a:visited	{color: #f2a98c; text-decoration:none; padding: 1px;}
navbar a:hover		{color: #C04848; text-decoration:none; padding: 1px;}

main {
    grid-column: 1 / span 5;
    grid-row: 3;
    background: url(drk50.png);
    background-repeat: repeat;
    display: inline;
    margin: 2em 0em 0em 0em;
    padding: 1em 2em 1em 2em;
    border-width: 6px;  
    border-style: double;
    border-color: #601848;
    align-items:stretch;
}

footer {
    grid-column: 2 / span 3;
    grid-row: 4;
    display: flex;
    justify-content: center;
    justify-items: center;
    text-align: center;
    border-radius: 3px;
}

@media (max-width: 960px), (max-aspect-ratio: 800x600), screen and (max-device-width: 600px) {
.splash-title {font-size: 1.2em;}

.column1 { width: 100%; }

.column2 { width: 100%; }
    }