css

/*HEADER BEGIN*/
html,
body {
    background: url("../img/blue-background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-y: hidden;
    overflow-x: hidden;
    font-family: 'Open Sans', sans-serif;
    color: white;
    padding: 0 auto;
    margin: 0 auto;
}

.header {
    padding: 0.5% 3%;
    border-top: 2px solid #ffe200;
    border-bottom: 2px solid #ffe200;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffae3a+0,f25f0a+49,ee4d09+50,d00000+100 */
    background: #ffae3a;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffae3a 0%, #f25f0a 49%, #ee4d09 50%, #d00000 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffae3a), color-stop(49%, #f25f0a), color-stop(50%, #ee4d09), color-stop(100%, #d00000));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffae3a 0%, #f25f0a 49%, #ee4d09 50%, #d00000 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffae3a 0%, #f25f0a 49%, #ee4d09 50%, #d00000 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffae3a 0%, #f25f0a 49%, #ee4d09 50%, #d00000 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #ffae3a 0%, #f25f0a 49%, #ee4d09 50%, #d00000 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffae3a', endColorstr='#d00000', GradientType=0);
    /* IE6-9 */
}

.field-background {
    background: url("../img/field.png") no-repeat center center;
    background-size: contain;
    padding: 1%;
}

.left-pic {
    background-size: auto 100%;
    padding: 7%;
    text-align: center;
}

.right-pic {
    position: absolute;
    background: url("../img/star.png") no-repeat center center;
    background-size: auto 100%;
    padding: 14%;
    margin-left: 25%;
    text-align: center;
}

#star {
    background: url("../img/star.png") no-repeat center center;
    background-size: auto 100%;
}

#diamond {
    background: url("../img/diamond.png") no-repeat center center;
    background-size: auto 100%;
}

#coin {
    background: url("../img/coin.png") no-repeat center center;
    background-size: auto 100%;
}

#plus {
    background: url("../img/plus.png") no-repeat center center;
    background-size: auto 100%;
}

.text-in-three {
    position: relative;
    right: 19%;
    margin-top: 4%;
    text-align: left;
    font-weight: bold;
}

#coins-text {
    position: relative;
    margin-top: 8%;
    right: 41%;
}

.three-small {
    padding: 5%;
}

#ticket {
    background: url("../img/ticket-notification.png") no-repeat center center;
    background-size: auto 100%;
    padding: 2.75%;
}

#store {
    background: url("../img/store.png") no-repeat center center;
    background-size: auto 100%;
    padding: 2.75%;
}

#settings {
    background: url("../img/settings.png") no-repeat center center;
    background-size: auto 100%;
    padding: 2.75%;
}

/*HEADER END*/

/*CONTENT BEGIN*/
.contents {
    padding: 10% 3% 2% 3%;
}

.btn-pic {
    background: url("../img/button.png") no-repeat center center;
    background-size: contain;
    padding: 10%;
    z-index: 1;
}

.text-in-btn {
    position: relative;
    right: 50%;
    margin-top: 5.5%;
    text-align: center;
    font-size: 0.75em;
    font-weight: bold;
    z-index: 1;
    white-space: nowrap;
}

.character-image {
    padding: 20%;
    margin-right: 5%;
    margin-top: -50%;
    z-index: 0;
}

.character-box {
}

#girl-image {
    position: relative;
    background: url("../img/img01.png") no-repeat center center;
    background-size: auto 100%;
}

#whale-image {
    position: relative;
    background: url("../img/img02.png") no-repeat center center;
    background-size: auto 100%;
}

#princess-image {
    position: relative;
    background: url("../img/img03.png") no-repeat center center;
    background-size: auto 100%;
}

#treasure-image {
    position: relative;
    background: url("../img/img04.png") no-repeat center center;
    background-size: auto 100%;
}

#pharaoh-image {
    position: relative;
    background: url("../img/img05.png") no-repeat center center;
    background-size: auto 100%;
}

#dragon-image {
    position: relative;
    background: url("../img/img06.png") no-repeat center center;
    background-size: auto 100%;
}

#bison-image {
    position: relative;
    background: url("../img/img07.png") no-repeat center center;
    background-size: auto 100%;
}

#stallion-image {
    position: relative;
    background: url("../img/img08.png") no-repeat center center;
    background-size: auto 100%;
}

.content-row-1 {
    background: #eee;
    display: flex;
    justify-content: space-around;
}

.content-row-2 {
    background: #ee7e00;
}

/*CONTENT END*/

/*FOOTER BEGIN*/
.footer {
    z-index: 3;
    position: absolute;
    border-top-left-radius: 5em;
    border-top-right-radius: 5em;
    height: 10%;
    padding: 1%;
    bottom: 0;
    border-top: 2px solid #ffe200;
    width: 100%;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffa11d+0,fe9201+49,f87701+50,f66c03+100 */
    background: #ffa11d;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffa11d 0%, #fe9201 49%, #f87701 50%, #f66c03 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffa11d), color-stop(49%, #fe9201), color-stop(50%, #f87701), color-stop(100%, #f66c03));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffa11d 0%, #fe9201 49%, #f87701 50%, #f66c03 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffa11d 0%, #fe9201 49%, #f87701 50%, #f66c03 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffa11d 0%, #fe9201 49%, #f87701 50%, #f66c03 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #ffa11d 0%, #fe9201 49%, #f87701 50%, #f66c03 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa11d', endColorstr='#f66c03', GradientType=0);
    /* IE6-9 */
}

/*FOOTER END*/