#message
{
    background: black;
    color: white;
    padding-top: 2.5rem;
}

.circle
{
    border-radius: 50%;
}
.fixed-background
{
    background-attachment: fixed;
    background-size: 50%;
    padding-bottom: 50%;
    width: 50%;
}
.section
{
    background-position: center;
    background-size: cover;
    padding: 5rem 0;
    /*margin: 5rem 0;*/
}

#title
{
    font-family: 'Chewy', cursive;
    font-size: 7rem;
}

#cosmic-express
{
    background: url('/images/cosmic-express/background.png') fixed;
    background-color: #161B34;
    color: white;
    box-shadow: inset 0 3px 3px -3px black;
}

#cosmic-express-gradient
{
    background: url('/images/cosmic-express/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%;
}

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

@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)
{

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

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

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

#cosmic-express-island-gif
{
    background-image: url('/images/cosmic-express/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 }
}

#cosmic-express-floating-island-01
{
    background-image: url('/images/cosmic-express/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;
}

#cosmic-express-floating-island-02
{
    background-image: url('/images/cosmic-express/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;
}

#cosmic-express-floating-island-03
{
    background-image: url('/images/cosmic-express/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;
}

#cosmic-express .button
{
    background-color: white;
    border: 2px solid white;
    color: #04090C;
    line-height: 37px;
}

#a-good-snowman
{
    background-color: #F0F0E7;
    color: #4E4E4E;
    overflow: hidden;
}
#a-good-snowman-demo
{
    background: url('/images/a-good-snowman/demo.gif') center no-repeat;
    background-size: 576px 276px;
    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: 37px;
}
#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; }
}

#sushi-snake
{
    background: #04090C url('/images/sushi-snake/background.png');
    /*background-attachment: fixed;*/
    background-size: auto;
    background-repeat: repeat;
    box-shadow: inset 0 -10px 10px -10px black;
    color: white;
}
#sushi-snake .button
{
    background-color: white;
    border: 2px solid white;
    color: #04090C;
    line-height: 37px;
}

#other-games .column
{
    margin-top: 8%;
    margin-bottom: 8%;
}
@media (min-width: 550px)
{
    #other-games .column
    {
        margin-top: 2%;
        margin-bottom: 2%;
    }
}
.thumbnail
{
    border-radius: 50%;
    float: left;
    margin: 0 4% 4% 0;
    width: 33%;
}
.column:nth-child(even) .thumbnail
{
    float: right;
    margin-left: 4%;
}
@media (min-width: 550px)
{
    .column:nth-child(even) .thumbnail
    {
        float: left;
        margin-left: 0;
    }
}

.buttons
{
    clear: both;
}

@media (min-width: 550px)
{
    .buttons
    {
        clear: none;
        display: inline-block;
    }
}

.grid .column:nth-child(odd)
{
    clear: left;
    margin-left: 0;
}

footer
{
    background-color: black;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer p
{
    color: white;
}

#email
{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

#subscribe
{
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    float: right;
}

@media (min-width: 750px)
{
    .sidebar
    {
        float: right;
        margin: 0 0 0 4%;
        width: 33%;
    }

    #benjamin-davis
    {
        background-image: url('/images/benjamin-davis.jpg');
        background-size: contain;
        float: right;
        padding: 0 0 100%;
        width: 100%;
    }
}

@-webkit-keyframes wobble
{
    0% { -webkit-transform: rotate(0deg) }
    25% { -webkit-transform: rotate(-20deg) }
    75% { -webkit-transform: rotate(20deg) }
}

@-moz-keyframes wobble
{
    0% { -moz-transform: rotate(0deg) }
    25% { -moz-transform: rotate(-20deg) }
    75% { -moz-transform: rotate(20deg) }
}

@-ms-keyframes wobble
{
    0% { -ms-transform: rotate(0deg) }
    25% { -ms-transform: rotate(-20deg) }
    75% { -ms-transform: rotate(20deg) }
}

@-o-keyframes wobble
{
    0% { -o-transform: rotate(0deg) }
    25% { -o-transform: rotate(-20deg) }
    75% { -o-transform: rotate(20deg) }
}

@keyframes wobble
{
    0% { transform: rotate(0deg) }
    25% { transform: rotate(-20deg) }
    75% { transform: rotate(20deg) }
}

button:hover i.fa, .button:hover i.fa
{
    -webkit-animation: wobble 500ms ease-in-out infinite;
    -moz-animation: wobble 500ms ease-in-out infinite;
    -o-animation: wobble 500ms ease-in-out infinite;
    animation: wobble 500ms ease-in-out infinite;
    transform-origin: center;
}