body
{
    background: url('../images/background.png') fixed;
    background-color: #161B34;
    color: white;
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6
{
    font-family: 'Sniglet', cursive;
}

.gradient
{
    background: url('../images/background-gradient.png') fixed;
    background: linear-gradient(to bottom, rgba(60,62,99,0), rgba(60,62,99,0) 60%, rgba(60,62,99,1)) fixed;
    background-size: 100% 100%;
    overflow: hidden;
}

#message
{
    background-color: white;
    color: #161B34;
    text-align: center;
    padding: 3% 0 3%;
    margin-bottom: -7%;
}

#logo
{
    position: relative;
    overflow: visible;
    text-align: center;
    white-space: nowrap;
}

#logo:empty
{
    background-image: url('../images/logo.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-bottom: 41.619%;
}

#logo-01
{
    background-image: url('../images/logo_01.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-bottom: 41.619%;
}

#logo-bottom
{
    position: relative;
    width: 100%;
    margin-top: -16.904218928164%;
}

#logo-02, #logo-03, #logo-04
{
    background-repeat: no-repeat;
    background-size: auto 100%;
    display: inline-block;
    padding-bottom: 16.904218928164%;
    padding-left: 0;
    padding-right: 0;
}

#logo-02
{
    background-image: url('../images/logo_02.png');
    margin-right: -0.208333333334%;
    width: 59.293044469783%;
}

#logo-03
{
    background-image: url('../images/logo_03.png');
    margin-left: -0.208333333334%;
    margin-right: -0.208333333334%;
    width: 8.836944127708%;
}

#logo-04
{
    background-image: url('../images/logo_04.png');
    margin-left: -0.208333333334%;
    width: 31.955530216648%;
}

#logo-and-awards
{
    margin-bottom: 10%;
    text-align: center;
}

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2)
{

	#logo:empty
	{
		background-image: url('../images/logo@2x.png');
	}

	#logo-01
	{
		background-image: url('../images/logo_01@2x.png');
	}

	#logo-02
	{
		background-image: url('../images/logo_02@2x.png');
	}

	#logo-03
	{
		background-image: url('../images/logo_03@2x.png');
	}

	#logo-04
	{
		background-image: url('../images/logo_04@2x.png');
	}

}

#logo-container
{
    margin-bottom: 5%;
}

@media (min-width: 550px)
{
    #logo-container
    {
        max-width: 660px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1055px)
{
    #logo-container
    {
        margin-left: 150px;
        margin-right: 150px;
        position: relative;
    }

    #logo-and-awards
    {
        margin-bottom: 10%;
    }
}

.award
{
    display: none;
}

@media (min-width: 350px)
{
    .award
    {
    	background: url('../images/laurel_left_120px.png') left no-repeat, url('../images/laurel_right_120px.png') right no-repeat;
    	background-size: 34px 80px, 34px 80px;
    	display: inline-block;
    	margin: 10px;
    	overflow: hidden;
    	width: 130px;
    	height: 80px;
    	vertical-align: top;
    }

    @media only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2)
    {
    	.award
    	{
    		background: url('../images/laurel_left_240px.png') left no-repeat, url('../images/laurel_right_240px.png') right no-repeat;
        	background-size: 34px 80px, 34px 80px;
    	}
    }

    .award h2, .award p
    {
    	margin: 10px 27px;
    	padding: 0;
    	text-align: center;
    	vertical-align: middle;
    	width: 76px;
    }

    .award h2
    {
        font-family: 'Sniglet', cursive;
        font-size: 0.8em;
    }

    .award p
    {
        font-family: 'Sniglet', cursive;
        font-size: 0.667em;
    }

    .awards-left, .awards-right
    {
        display: inline-block;
    }
}

@media (min-width: 1055px)
{
    .awards-left, .awards-right
    {
        margin-top: 25%;
        position: absolute;
        top: -180px;
        width: 150px;
    }

    .awards-left
    {
        left: 0;
    }

    .awards-right
    {
        right: 0;
    }
}

a
{
    color: #F16868;
    text-decoration: none;
}
a:hover
{
    color: #E94246;
    text-decoration: underline;
}

.button, button, input[type="submit"], input[type="reset"], input[type="button"]
{
    font-weight: normal !important;
}

.button:hover
{
    text-decoration: none;
}

input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select
{
    border-color: white;
}

input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus
{
    border-color: #F16868;
}

.button-primary
{
    background-color: #F16868 !important;
    border-color: #F16868 !important;
}

.button-primary:hover
{
    background-color: #E94246 !important;
    border-color: #E94246 !important;
}

.button, .button:active, .button:hover, .button:visited
{
    background-color: black;
    border: 2px solid black;
    color: white;
    line-height: 36px;
}
.button:hover
{
    color: #E94246;
}

.steam-logo
{
    background-image: url('../images/steam-logo.png'), none;
    background-image: url('../images/steam-logo.svg'), none;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    display: inline-block;
    margin: 0 0 0 2px;
    text-indent: -9999px;
    width: 6em;
}

@media (max-width: 549px)
{
    .squeeze>*
    {
        width: 100%;
    }

    .squeeze>*:not(:first-child)
    {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .squeeze>*:not(:last-child)
    {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-bottom: 0;
    }
}

@media (min-width: 550px)
{
    .squeeze
    {
        display: flex;
        flex-direction: row;
    }

    .squeeze>*:not(:first-child)
    {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .squeeze>*:not(:last-child)
    {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}


@media (min-width: 550px)
{
    .offset-by-one-and-a-half.column,
    .offset-by-one-and-a-half.columns          { margin-left: 13%; }
}

.avatar
{
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    display: block;
    padding-bottom: 100%;
    margin: 5% auto 0;
}

.avatar.alan
{
    background-image: url('../images/avatars/alan.png');
}

.avatar.ben
{
    background-image: url('../images/avatars/ben.png');
}

.avatar.tyu
{
    background-image: url('../images/avatars/tyu.png');
}

a.icon-link
{
    border-radius: 50%;
    background-color: white;
    color: #161B34;
    display: inline-block;
    vertical-align: top;
    font-size: 2rem;
    padding: 0.5em;
    margin: 7.5% 2.5% 5%;
    width: 1em;
    height: 1em;
    line-height: 0;
}

a.icon-link:hover
{
    background-color: #E94246;
    color: white;
}

a.icon-link.twitter
{
    background-color: #161B34;
    background-image: url('../images/buttons/tw.png');
    background-repeat: no-repeat;
    background-size: contain;
    line-height: 10px;
}

a.icon-link.twitter:hover
{
    background-image: url('../images/buttons/tw-hover.png');
}

#island-container
{
    margin: 0 auto;
    max-width: 679px;
    /*height: 639px;*/
}

#island
{
    background-image: url('../images/demo/island.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    left: 5%;
    padding-bottom: 94.10898379970545%;
}

#island-gif
{
    background-image: url('../images/demo/looping_level.gif');
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    /*left: 57px;*/
    /*top: 217px;*/
    /*width: 522px;*/
    /*height: 263px;*/
    margin-left: 13.394698085419735%;
    margin-top: -62.15022091310751%;
    margin-bottom: 31.07511045655376%;
    width: 76.87776141384389%;
    padding-bottom: 38.73343151693667%;
}

@-webkit-keyframes float
{
    0% { top: -10px }
    50% { top: 10px }
    100% { top: -10px }
}

@-moz-keyframes float
{
    0% { top: -10px }
    50% { top: 10px }
    100% { top: -10px }
}

@-ms-keyframes float
{
    0% { top: -10px }
    50% { top: 10px }
    100% { top: -10px }
}

@-o-keyframes float
{
    0% { top: -10px }
    50% { top: 10px }
    100% { top: -10px }
}

@keyframes float
{
    0% { top: -10px }
    50% { top: 10px }
    100% { top: -10px }
}

#floating-island-01
{
    background-image: url('../images/demo/floating_island_01.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    /*width: 103px;*/
    /*height: 148px;*/
    width: 15.16936671575847%;
    padding-bottom: 21.79675994108984%;
    -webkit-animation: float 4000ms ease-in-out infinite;
    -moz-animation: float 4000ms ease-in-out infinite;
    -o-animation: float 4000ms ease-in-out infinite;
    animation: float 4000ms ease-in-out infinite;
}

#floating-island-02
{
    background-image: url('../images/demo/floating_island_02.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    /*width: 68px;*/
    /*height: 115px;*/
    width: 10.01472754050074%;
    padding-bottom: 16.93667157584683%;
    -webkit-animation: float 7000ms ease-in-out infinite;
    -moz-animation: float 7000ms ease-in-out infinite;
    -o-animation: float 7000ms ease-in-out infinite;
    animation: float 7000ms ease-in-out infinite;
}

#floating-island-03
{
    background-image: url('../images/demo/floating_island_03.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    /*width: 134px;*/
    /*height: 99px;*/
    width: 19.73490427098675%;
    padding-bottom: 14.58026509572901%;
    -webkit-animation: float 3000ms ease-in-out infinite;
    -moz-animation: float 3000ms ease-in-out infinite;
    -o-animation: float 3000ms ease-in-out infinite;
    animation: float 3000ms ease-in-out infinite;
}

#a-good-snowman
{
    background-color: #F0F0E7;
    box-shadow: inset 0 3px 3px -3px black;
    color: #4E4E4E;
    overflow: hidden;
    padding: 5rem 0;
}
#a-good-snowman-title
{
    color: #4E4E4E;
    text-decoration: none;
}
#a-good-snowman-title h3
{
    font-family: 'Open Sans', sans-serif;
}
#a-good-snowman-demo
{
    background: url('../images/a-good-snowman/demo.gif') center no-repeat;
    background-size: 576px 276px;
    display: block;
    height: 276px;
    margin: -20px 0 30px;
    margin: -20px -10rem 30px;
    padding: 0 10rem;
}
#a-good-snowman .button
{
    background-color: black;
    border: 2px solid black;
    color: #F0F0E7;
    line-height: 36px;
}
#a-good-snowman .button:hover
{
    color: white;
}

@media (min-width: 550px)
{
    #a-good-snowman-demo
    {
        background-size: contain;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        max-width: 100%;
    }

    #a-good-snowman-title
    {
    	background: url('../images/a-good-snowman/title.png');
    	background-image: url('../images/a-good-snowman/title.svg'), none;
    	background-position: center;
    	background-repeat: no-repeat;
    	background-size: contain;
    	display: inline-block;
        padding: 0 0 100%;
        margin: 0 0 0.5rem;
        width: 100%;
    }
    #a-good-snowman-title h3 { display: none; }
}