/* Section Styles */
#emojiStats {
    background-color: #1987ff;
    font-family: "Avenir Next";
    font-weight: bold;
    color: white;
    text-align: center;
}

.emoji {
    font-family: fantasy !important;
}

/* Header Styles */
.emojiHeader {
    font-size: 2.1em;
    padding: 67px 0;
}

/* Body Styles */
.emojiBody {
}

.emojiRank {
    font-size: 2.1em;
    padding-left: 20px;
    padding-top: 20px;
    position: absolute;
}

.emojiSquare {
    float: left;
    width: 20%;
}
.emojiSquare:first-child {
    background-color: rgb(18,78,177);
}
.emojiSquare:nth-child(2) {
    background-color: rgb(19,84,192);
}
.emojiSquare:nth-child(3) {
    background-color: rgb(20,90,208);
}
.emojiSquare:nth-child(4) {
    background-color: rgb(21,97,223);
}
.emojiSquare:nth-child(5) {
    background-color: rgb(22,103,239);
}

.emojiSquare > .emoji {
    font-size: 100px;
    padding-bottom: 20px;
    padding-top: 65px;
}

/* Footer Styles */
.emojiFooter {

}

.extraStats {
    float: left;
    height: 225px;
}

.extraStats.left {
    width: 40%;
}

.extraStats.right {
    width: 50%;
}

.extraStats:first-of-type {
    margin-left: 10%;
}

.statEmoji {
    float: left;
    padding-top: 85px;
    text-align: right;
    width: 30%;
}

.statEmoji > .emoji{
    font-size: 80px;
}

.statDetails {
    float: left;
    padding-left: 20px;
    padding-top: 60px;
    text-align: left;
    width: 70%;
}

.detailsHeader {
    color: rgb(13,49,107);
}

.detailsStat {
    font-size: 70px;
}

.timeStat {
    text-transform: uppercase;
}

/*Styling from here down is intended for the real-time emoji updater */
#emojiList {
    float: left;
}

.emojiRow {
    border: 1px solid black;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px;
    text-align: center;
    width: 400px;
}

.emojiRow:first-child {
    background-color: red;
}
.emojiRow:nth-child(2) {
    background-color: orange;
}
.emojiRow:nth-child(3) {
    background-color: yellow;
}
.emojiRow:nth-child(4) {
    background-color: green;
}
.emojiRow:nth-child(5) {
    background-color: lightblue;
}
/*Probably don't need this, but just in case the JS lags in removing the element*/
.emojiRow:nth-child(6) {
    display: none;
}

@media (max-width: 1500px) {
    .detailsStat.locationStat {
        font-size: 50px;
    }

    .detailsStat.timeStat {
        font-size: 50px;
    }
}

@media (max-width: 880px) {
    .emojiSquare {
        float: none;
        width: 100%
    }
    .extraStats {
        float: none;
        width: 100% !important;
    }
    .extraStats {
        margin-left: 0 !important;
    }
    .detailsStat {
        font-size: 50px;
    }
    .extraStats.right > .statDetails {
        padding-bottom: 30px;
    }
}

@media (min-width: 1300px) {
    .emojiSquare > .emoji {
        font-size: 100px;
        padding-bottom: 40px;
        padding-top: 80px;
    }
}