body
{
    padding-top: 5%;
    background-color: #dbdbdb;
    font-family: 'Sanchez', sans-serif;
}

.background-holder
{
    position: absolute;
    display: block;
    z-index: -1;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    overflow-x: hidden;
}

.background
{
    width: 100%;
    height: 100%;
    max-width: 60%;
    min-width: 500px;

    image-rendering: pixelated;

    background-image: url("background_main.png");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100%;
}

/* alternatively: 992px / width:960px */
@media (min-width: 1200px)
{
    .container 
    {
        width: 1140px;
    }
}

@media (min-width: 800px)
{
    .game .container
    {
        width: 800px;
    }
}

.thumb
{
    outline: 1px solid #aaaaaa;
    display: grid;
}

.thumb:hover .overlay
{
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.content, .overlay
{
    grid-area: 1/1;
}

.padded
{
    padding: 40px;
}

.overlay
{
    z-index: 1;
    text-decoration: none;
    background-color: #ffffff88;

    font-size: 3vmax; /* Backup in case fittext doesn't run */

    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.overlay span
{
    width: 100%;
    text-align: center;
}

.preview a, .preview a:visited, .preview a:link, .preview a:active
{
    text-decoration: none;
    color: black;
}

.panel a
{
    text-decoration: none;
    color: #ff3557;
}

img 
{
    max-width: 100%;
}

#contact i
{
    color: #ff3557;
    font-size: 2em;
}

#contact a:hover
{
    font-size: 1.1em;
    transition: 0.1s linear;
}

video 
{
    max-width: 100%;
}

#studio img
{
    background-image: url('studio/logo_background.png');
    background-size: contain;
}

@media (max-width: 400px)
{
    .padded
    {
        padding: 10px;
    }
}

/* Press Kits */
.presskit h2
{
    padding-top: 1em;
    font-size: 1.5em;
    font-weight: bold;
}

.presskit
{
    padding-bottom: 200px;
    background-color: white;
}

.factsheet
{
    background-color: white;
}

.factsheet h3, .presskit h3
{
    padding-top: 2em;
    font-size: 1em;
    font-weight: bold;
}

.presskit .background
{
    background-image: url("background_presskit.png");
}

/* Game Pages */

.game
{
    padding-bottom: 200px;
}

.game a
{
    text-decoration: none;
}

.game h1
{
    text-align: center;
}

.game h2
{
    padding-top: 1em;
    text-align: center;
}

.game .social
{
    font-size: 1.4em;
}

.button
{
	text-align: center;
	display: inline-block;	
	transition: all .1s ease-in-out;
}

.button:hover 
{
	transform: scale(1.01);
}

/* Information Pages */
.info .background
{
    background-image: url("background_presskit.png");
}

.info h2
{
    padding-top: 1em;
    font-size: 1.5em;
    font-weight: bold;
}

.info
{
    padding-bottom: 200px;
    background-color: white;
}