body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0;
    justify-content: start;
    align-content: start;
    margin: 0 auto;
    padding: 0em;
    background: url(coa200-.png) no-repeat, url(starsbg.png)  repeat;
    background-attachment: scroll, fixed; 
    background-position: 88% 0%, 0% 0%;
    background-color: #1D1C1E;
    font-family: 'MINIMA','Verdana', sans-serif;
    color: #e7e1ec; 
    letter-spacing: 1px; }

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

@font-face {
font-family: 'Forgotten Futurist';
src: local('Forgotten Futurist'), 
    local('ForgottenFuturist'), 
    url('FORGOTTEN_FUTURIST_RG.OTF') format('truetype');}

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

a:link		{color: #dec0f4; text-decoration:underline double; font-weight:bold; padding: 1px; letter-spacing: 2px; font-family: 'Forgotten Futurist'; }
a:visited	{color: #dec0f4; text-decoration:underline double; font-weight:bold; padding: 1px; letter-spacing: 2px; font-family: 'Forgotten Futurist'; }
a:hover, a:focus	{color: #666666; text-decoration:underline overline; font-weight:bold; padding: 1px; letter-spacing: 2px; font-family: 'Forgotten Futurist'; }

img { max-width: 100%; height: auto;
    image-rendering: high-quality;}

strong { font-family: 'Forgotten Futurist', 'Verdana', sans-serif; 
    font-size: 16;
    font-weight: bolder;}

hr { border:none;
    border-top: 1px ridge #A8A2A9;}

h1 { font-family: 'DENMARK', 'Tahoma'; font-size: 50; color: #787878; letter-spacing: 1px; font-weight:bold; color:#d8cad7; margin: -15 0 0 0; padding: 0px; display: inline-block;}
h2 { font-family: 'DENMARK', 'Tahoma'; font-size: 36; color: #787878; letter-spacing: 1px; font-weight:bold; color:#d8cad7; margin: 0px; padding: 0px; display: inline;}
h3 { font-family: 'DENMARK', 'Tahoma'; font-size: 30; color: #787878; letter-spacing: 1px; font-weight:bold; color:#d8cad7; margin: 0px; padding: 0px; display: inline;}
h4 { font-family: 'DENMARK', 'Tahoma'; font-size: 22; color: #787878; letter-spacing: 1px; font-weight:bold; color:#d8cad7; margin: 0px; padding: 0px; display: inline;}
h5 { font-family: 'DENMARK', 'Tahoma'; font-size: 18; color: #787878; letter-spacing: 1px; font-weight:bold; color:#d8cad7; margin: 0px; padding: 0px; display: inline;}

sidebar {
    grid-column: span 1;
    display: block;
    padding: 0em 0em 0em 1em;
    margin: -6em 1em 0em -1em;
    float: right;
    z-index: 10;
    position: relative;
}

sidebar ul { font-family: 'Forgotten Futurist', 'Verdana', 'Tahoma', 'Arial', sans-serif;  
    font-size: 18; 
    color: #787878; 
    letter-spacing: 2px; 
    list-style-type: none; 
    margin: 0em 0em 0em -1em; 
    padding: 0em 0em 0em 0em; }

sidebar a:link {color: #dec0f4; text-decoration:underline; font-weight:bold; padding: 4px 6px 6px 6px; letter-spacing: 2px; font-family: 'Forgotten Futurist'; background-color: #1D1C1E; display: inline-block; width: 140px; margin-bottom: 8px; border: thin outset #A8A2A9; border-radius: 3px; box-shadow: -4px 4px 8px #22202c}
sidebar a:visited {color: #dec0f4; text-decoration:underline; font-weight:bold; padding: 4px 6px 6px 6px; letter-spacing: 2px; font-family: 'Forgotten Futurist'; background-color: #1D1C1E; display: inline-block;  width: 140px; margin-bottom: 8px; border: thin outset #A8A2A9; border-radius: 3px; box-shadow: -4px 4px 8px #22202c}
sidebar a:hover, sidebar a:focus  {color: #666666; text-decoration:underline; font-weight:bold; padding: 4px 6px 6px 6px; letter-spacing: 2px; font-family: 'Forgotten Futurist'; background-color: #1D1C1E; display: inline-block; width: 140px; margin-bottom: 8px; border: thin inset #A8A2A9; border-radius: 3px; box-shadow: -4px 4px 8px #22202c}

header {  
    grid-column: 1 / span 5;
    align-items: center;
    text-align: left;
    margin: 0em 0em 0em 5em; 
}

header h1 { font-family: 'DENMARK'; 
    font-size: 9vmax; 
    letter-spacing: 1px; 
    font-weight:500; 
    color:#222328; 
    margin: 0px; 
    padding: 0 0 0 .1em; 
    font-variant: small-caps; 
    display:inline-flex; 
    background: rgb(94,94,94);
    background: linear-gradient(180deg, rgba(94,94,94,1) 5%, rgba(235,235,235,1) 43%, rgba(54,54,54,1) 45%, rgba(183,186,193,1) 81%, rgba(58,61,66,1) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text; }

header h1:after {
    background: none;
    content: attr(data-heading);
    position: absolute;
    z-index: -1;
    text-shadow: 
		-1px 0 1px #d8cad7, 
		0 1px 1px #d8cad7, 
		5px 5px 10px rgba(0, 0, 0, 0.4),
		-5px -5px 10px rgba(0, 0, 0, 0.4);
}

header h2 { font-family: 'DENMARK'; font-size: 3vmax; color: rgb(94,94,94); letter-spacing: 1px; font-weight:500; margin: -1.5em 0em 0em 6em; padding: 0px; display: inline-flex; font-variant: small-caps;
    -webkit-text-stroke: 2px #222328;
}

main {
    grid-column: 1 / span 4;
    background-color: rgba(49, 44, 50, 0.75);
    float: left;
    display: inline;
    font-size: 16;
    padding: .5em 1em .5em 1em;
    margin: 0em 0em 0em 4em;
    text-align: left;
}

main p a:link {font-size: 16; }

.about1 {
    float: left;
    margin:0px 20px 0px 0px;
    position: static;
    width: 65%;
}

.about2 {
    float: left; 
    position: relative;
    width: 30%;
}

.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%;
}

.somed {
    font-family: 'Verdana', 'Arial', sans-serif;  
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 40;
    color: #e7e1ec; 
    letter-spacing: 3px;
}

.combox {
    display:inline-block;
    justify-content: center;
    text-align: center;
    align-content: center;
    vertical-align: top;
    margin:20px 10px 20px 10px;
    padding: 5px 10px;
    position: relative;
    width: 300px;
    height: 550px;
    border-radius: 15px;
    border-width: 1px;
    border-style: dashed;}

.thumb {
	background-size: cover;
	position: relative;
	display: inline-block;
	border: 1px solid #111111;
	margin: 3px;
	box-shadow: 1px 1px 6px #000000;
	filter: grayscale(65%);
	width: 100px;
	height: 200px;
	overflow: hidden;
	z-index: 1;
	-webkit-transition: 0.25s;
	transition: 0.25s;
    image-rendering: high-quality;
}
    
.thumb:hover, .thumb:focus, .thumb:focus-within {
	transform: scale(1.2, 1.2);
	-webkit-transition: 0.1s;
	transition: 0.1s;
	border: 1px solid #dddddd;
	filter: grayscale(0%);
	z-index: 5;
}

.hovertext { position: relative;}

.hovertext:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: 200px;  
    background-color: black;
    color: #e7e1ec;
    text-align: center;
    border-radius: 5px;
    padding: 8px 5px;
    position: absolute;
    left: -2em;
    z-index: 6;
    top: 110%;
    -webkit-transition: 0.25s;
}

.hovertext:hover:before, .hovertext:focus:before, .hovertext:focus-within:before {
    opacity: 1;
    visibility: visible;
}

footer {
    grid-column: 2 / 4;
    background-color: rgba(49, 44, 50, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2em;
    padding: 0em 1em 0em 1em;
    border-radius: 3px;
    font-size: 16;
}

@media (max-width: 960px), (max-aspect-ratio: 800x600), screen and (max-device-width: 600px) 
    
{
    
body { background-position: 100% 0%, 0% 0%;}
    
header {  
    margin: 0em 0em 0em 0em; 
    text-align: center;}
    
header h1 { font-size: 18vw; }
header h2 { font-size: 3vmax; font-weight:500; margin: -1.5em 0em 0em 0em;}
   
sidebar { 
    grid-column: 1 / span 5;
    grid-row: 2;
    padding: 1em 1em 1em 1em;
    margin: 0em 1em 0em 1em;
    align-items: center;
    justify-content: center;
    text-align: center;}
    
main { 
    grid-column: 1 / span 5;
    grid-row: 3;
    margin: 0em 1em 0em 1em;
    font-size: 18;}
    
sidebar ul li { 
    display: inline;
    font-size: 24; 
    margin: 0 0 0 0;}

sidebar a:link {margin: 2px; text-align: center; justify-content: center; width: inherit; padding: 4px 10px 8px 10px;}
sidebar a:active {margin: 2px; text-align: center; justify-content: center; width: inherit; padding: 4px 10px 8px 10px;}
sidebar a:hover, sidebar a:focus {margin: 2px; text-align: center; justify-content: center; width: inherit; padding: 4px 10px 8px 10px;}
    
strong {  font-size: 20;}

.about1 {
    width: 100%;
    }

.about2 {
    width: 100%;
    }
    
.column1 {
    width: 100%;
    }

.column2 {
    width: 100%;
    }
    
footer {
    grid-column: 1 / span 5;}
    
}