main {
    background-image: url("/images/background_splash.png");
    background-size: 100% 100%;

    width: 100%;
    height: 100%;
}

.title {
    background-image: url("/images/title.png");
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    left:10%;
    top:5%;

    width: 80%;
    height: 20%;
}

#playContainer {
    position: absolute;
    left: 38%;
    top: 30%;

    width: 24%;
    height: 40%;
}

#play {
    outline: none;
    border: none;
    background-color: transparent;

    background-image: url("/images/start.png");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;

    width: 100%;
    height: 100%;

    margin: 0;
}
#playContainer:hover > #play {
    background-image: url("/images/start_hover.png");
    cursor: pointer;
}

#stats {
    left:24%;
    bottom:2%;

    width:52%;
}
#statPlayerCount::after {
    content: " players online right now";
}
#statPlayingCount::after {
    content: " games are being played right now";
}
#statPlayedCount::after {
    content: " games have been played";
}

#rules {
    background-image: url("/images/button_rules.png");
    background-size: 100% 100%;

    margin: 0;

    right: 1%;
    bottom: 2%;
}
#rules:hover {
    background-image: url("/images/button_rules_hover.png");
    background-size: 100% 100%;

    cursor:pointer;
}