@import url("./common/style_common.css");

/*===============================================================================================*/
/* Base setup */
/*===============================================================================================*/

body
{
    margin: 0px 0px 0px 0px;
	height: 100%;
	background-color: black;

    font-family: content, sans-serif;
	font-size: 1.0em;
	line-height: 1.34em;
}
h1, h2, h3, h4, h5
{
    font-weight: normal;
    font-family: big, sans-serif;
    line-height: 1.0em;

    padding: 0px;
    margin: 0px;
}
h1 { font-size: 3.0em; }
h2 { font-size: 2.6em; }
h3 { font-size: 2.1em; }
h4 { font-size: 1.7em; }
h5 { font-size: 1.4em; }

/* High DPI fixes */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
{
    body
    {
        font-size: 1.22em;
    }
}

hr
{
    display: block;
    /*height: 1px;*/
    border: none;
    /*border-top: 2px solid #777;
    margin: 1em 0;*/
    padding: 0;

    box-shadow: 0px 0px 0.05em 0.1em #000;
}

/*===============================================================================================*/
/* Links gonna be special as fuck now */
/*===============================================================================================*/

a, a span, label.tab_header
{
    color: #F00;
    text-decoration: none;

    /* Set up the duct-tap panning */
    background: linear-gradient(to right, white 50%, rgba(0,0,0,0) 50%);
    background-size: 210% 100%;
    background-position:99% bottom;

    transition:
        color 0.4s ease-in-out,
        background-position 0.2s ease-in;
}
a:hover, a:hover span, label.tab_header:hover
{
    color: black;

    /* Set up the duct-tap panning */
    background-position:1% bottom;

    transition:
        color 0.4s ease-in-out,
        background-position 0.2s ease-in;
}

/*===============================================================================================*/
/* Tippity top header */
/*===============================================================================================*/

.superheader
{
    background-color: #ffffff;
}

/* Logo image */
.superheader #logo
{
    text-align:center;
	font-size: 1.8em;

	padding-left: 1.22em;
	padding-right: 1.22em;
	padding-top: 0.82em;
	padding-bottom: 0.82em;
}
.superheader #logo img
{
    max-width: 100%;
}

/* Randomized tagline */
.superheader #tagline
{
    /* Layout */
    text-align: center;
    padding-bottom: 0.82em;

    /* Font options */
    font-family: big;
	font-size: 2.0em;
    line-height: 1.0em;

    /* Effects */
    transform: rotate(3deg);
}
.superheader #tagline span
{
    color: white;
    background: black;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

/* Striped social media bar */
.superheader #miscellaneous_junk
{
    /* Layout */
    text-align: center;
    padding: 0em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.superheader #miscellaneous_junk a
{
    flex-grow: 1;
    z-index: +1;
    overflow: hidden;
    min-width: auto;
    width: 20%;
    line-height: 1.0em;

    /* Background setup */
    background-size: 100%;
    background-position: center;
    background-color: black;

    /* Default text styling */
    color: white;
    font-family: clean;
    font-size: 1.22em;
    text-shadow: 0px +2px 0px #000;
    letter-spacing: 0.2em;
    text-decoration: none;
}
.superheader #miscellaneous_junk a > div
{
    padding: 1.0em;

    /* 3D Effect */
    box-shadow: inset 0px 0px 4.0em #000;
}
.superheader #miscellaneous_junk a span
{   /* Recreate duct-tape panning because CSS is fucking retarded */
    color: white;
    text-shadow: 0px +2px 0px #000;

    /* Set up the duct-tap panning */
    background: linear-gradient(to right, white 50%, rgba(0,0,0,0) 50%);
    background-size: 210% 100%;
    background-position:99% bottom;

    transition:
        color 0.4s ease-in-out,
        text-shadow 0.618s,
        background-position 0.2s ease-in;

    /* Style the text */
    font-variant: small-caps;
}
.superheader #miscellaneous_junk a:hover span
{
    color: black;
    text-shadow: 0px +2px 0px #BBB;

    /* Set up the duct-tap panning */
    background-position:1% bottom;

    transition:
        color 0.4s ease-in-out,
        text-shadow 0.618s,
        background-position 0.2s ease-in;
}

.superheader #miscellaneous_junk a span .engine
{
    /* Smallerize the test */
    font-size: 0.618em;
    /* Style the text */
    font-variant: small-caps;
}

/*===============================================================================================*/
/* Content? Fucking content! Fuck yeah! */
/*===============================================================================================*/

.content
{
    /* Default text styling */
    text-align: center;
    color: white;

    /* Background */
    background-color: #222;
	background-attachment: fixed;

    box-shadow: inset 0 2.0em 1.0em -2.0em #000000;
}
.content h1, .content h2, .content h3, .content h4, .content h5
{   /* Headings get an exaggerated shadow */
    text-shadow:
        0px 0px 0.5em #000,
        0px 0px 0.5em #000;
}

.content .censor
{
    white-space: nowrap;
    display: inline-block;
    line-height: 1.0em;

    background-color: white;
    transform: rotate(.8deg) skewx(-12deg);
    border:1px dotted #555;

    text-shadow: none;
}
.censor:first-child
{   /* Add a few more selectors with slightly varying styles */
    transform: rotate(-.8deg);
}
.censor:first-child + .censor {
    transform: rotate(3deg);
}


/* Actual list of games */
.content #games
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}
.content #games .game
{
    flex-grow: 1;
    flex-basis: 0;

    margin: 2.0em;
    overflow: hidden;
    min-width: 50vmin;
    /*max-width: 100vmin;
    height: 50vmin;*/

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.content #games .spacer
{

}

.content #games .genre
{   /* Game genre styling */
    /* Display options */
    display: block;
    margin-bottom: 0.6em;

    /* Font options */
    font-family: big, sans-serif;
    font-size: 1.6em;
    font-variant: small-caps;
    line-height: 1.0em;

    text-shadow:
        0px 0px 1.0em #000;
}
.content #games .genre .engine, .content h2 .engine
{
    color: #555;
}
.content h2 .engine
{
    font-size: 0.5em;
}
.content #games .game img
{   /* Game title styling */
    /* Display options */
    display: inline-block;

    max-width: 100%;
    max-height: auto;
    height: auto;
}
.content #games .game .name
{   /* Game title styling */
    /* Display options */
    display: block;
    padding: 0.2em;

    /* Font options */
    font-family: big, sans-serif;
    font-size: 3.5em;
    line-height: 1.0em;
}
.content #games .game .name > .hoverinfo
{   /* Description hover thingy */
    /* Display options */
    display: block;
    overflow: hidden;
    z-index: +5;
    position: absolute;
    padding: 0px;

    background-color: rgba(0,0,0,0.75);
    width: inherit;
    max-width: 80vmin;

    /* Font options */
    color: white;
    font-family: clean, sans-serif;
    font-size: 0.4em;
    line-height: 1.2em;

    /* Fade in-out options */
    max-height: 0px;
    transition:
        padding 0.2s ease-in,
        max-height 0.2s ease-in;
}
.content #games .game .name:focus > .hoverinfo, .content #games .game .name:hover > .hoverinfo
{
    padding: 0.6em;
    max-height: 100vh;
    transition:
        padding 0.2s ease-out,
        max-height 0.2s ease-out;
}

/* How about news */
.content #news
{

}

/*===============================================================================================*/
/* Gotta make sure that fuckin tab thing actually works too! */
/*===============================================================================================*/

.content > ul.tab_header
{
	list-style: none;
	float: none;
	text-align: center;
}
.content > ul.tab_header > li
{
	display: inline-block;
	
	font-weight: normal;
	font-family: big, sans-serif;
	line-height: 1.0em;
	
	font-size: 3.0em;

	padding: 0px;
	margin: 0px;
	padding-left: 0.6em;
	padding-right: 0.6em;
}

.content > .tab_header
{
	display: inline-block;
	
	font-weight: normal;
	font-family: big, sans-serif;
	line-height: 1.0em;
	
	font-size: 3.0em;

	padding: 0px;
	margin: 0px;
	padding-left: 0.6em;
	padding-right: 0.6em;
}

.content > input[type="radio"].tab_header
{	/* Hide the radio button we use for tabs */
	position: absolute;
	visibility: hidden;
}

.content > input[type="radio"].tab_header:checked + label.tab_header
{
	color: #FFF;
}
.content > input[type="radio"].tab_header:checked + label.tab_header:hover
{	/* Make the anim go forward further */
	background-position:-95% bottom;
}

.content > input[type="radio"].tab_header:nth-of-type(1) ~ #games:nth-of-type(1),
	.content > input[type="radio"].tab_header:nth-of-type(2) ~ #games:nth-of-type(2),
	.content > input[type="radio"].tab_header:nth-of-type(3) ~ #games:nth-of-type(3)
{
	display: none;
}

.content > input[type="radio"].tab_header:nth-of-type(1):checked ~ #games:nth-of-type(1),
	.content > input[type="radio"].tab_header:nth-of-type(2):checked ~ #games:nth-of-type(2),
	.content > input[type="radio"].tab_header:nth-of-type(3):checked ~ #games:nth-of-type(3)
{
	display: flex;
}

/*.content > ul.tab_header ~ div[for=
{
	display: hidden;
}*/

/*.content > ul.tab_header > li:nth-child(1):hover > input[type="radio"]:checked
{
	display: hidden;
}

.content > ul.tab_header > li:nth-child(1):hover > input[type="radio"]:checked + .content > div:nth-child(2)
{
	display: hidden;
}*/

/*.content > ul.tab_header > li:nth-child(1) > input[type="radio"]:checked + label
{
	visibility: hidden;
}*/

/*.content > ul.tab_header > li:nth-child(1) > input[type="radio"]:checked ~ .content > div
{
	visibility: hidden;
}*/

/*.content li:nth-child(1) input[type="radio"]:checked + label
{
	visibility: hidden;
}

.content li:nth-child(1) input[type="radio"]:checked + .content div
{
	visibility: hidden;
}*/

/*===============================================================================================*/
/* Can't forget the footer. Glorious fucking footer! */
/*===============================================================================================*/

.footer
{
    /* Layout */
    padding: 1.0em;

    /* Background options */
    background-color: #666;

    /* 3D Effect */
    box-shadow: 0px 0px 1.0em 0.0em #000;

    /* Text options */
    color: #CCC;
    text-align: center;
    font-size: 0.8em;
}