main.css

body {
    background-color: #37474F;
    color: white;
}

.section {
    text-align: center;
}

.gameHeading {
    margin-bottom: 1em;
}

.section img {
    width: 80%;
    box-shadow: 1px 1px 30px -7px rgba(0,0,0,0.7);
}

.ruleHeading {
    margin-bottom: 3em;
    font-family: 'Raleway', sans-serif;
}

@media (max-width: 1000px) {
    .ruleHeading {
        margin-bottom: 2em;
    }
}

.wrapLines::before,
.wrapLines::after {
    font-family: 'Helvetica Neue', Helvetica, Arial;
    color: #A0A0A0;
    content: "__________";
    position: relative;
    top: -0.4em;
    padding: 0 0.5em;
}

.beta {
    position: absolute;
    right: 1em;
    top: 1em;
    font-size: 0.8em;
    opacity: 0.8;
}

.downArrow {
    display: none;
    position: absolute;
    bottom: 1em;
    font-size: 1.4em;
}

.flipCard {
    padding-bottom: 30em;
}

.flipCard:hover {
    cursor: pointer;
}

.flipCard ul {
    font-size: 1.5em;
    width: 45%;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.version {
    position: absolute;
    left: 2em;
    top: 1.6em;
    color: white;
    font-size: 0.7em;
}

.avatar {
    position: absolute;
    border: none;
    right: 2em;
    top: 0.7em;
    background-color: transparent;
}

.avatar span {
    color: white;
    font-size: 2em;
}

.row {
    box-sizing: border-box;
    margin: 0 auto;
}

.statsColumn {
    position: relative;
    display: inline-block;
    margin: 0 1%;
    padding: 2em;
    width: 28%;
    border-radius: 0.5em;
    background-color: #EFEFEF;
    color: black;
}

.statsColumn.column-1 {
    left: -20em;
}

.statsColumn.column-3 {
    right: -20em;
}

.statsLogos {
    font-size: 2em;
}

span.value {
    display: block;
    margin-top: 1em;
    font-size: 3em;
}

.initialButtons {
    color: #fff;
    display: none;
    font-size: 2em;
}

.initialButton {
    padding: 0 0.5em;
}

.initialButton:hover {
    cursor: pointer;
}

.loginOptions {
    font-size: 4em;
}

.loginOptions .option {
    padding: 0.5em;
}

.loginOptions .option:hover {
    cursor: pointer;
}

.profile {
    display: inline-block;
    padding: 5em;
    width: 100%;
    border-radius: 0.5em;
    font-size: 1em;
}

@media (max-width: 1000px) {
    .profile {
        padding: 0 5em;
    }
}

.profile div {
    display: inline-block;
    vertical-align: middle;
}

.profile .picture {
    width: 20%;
    padding-right: 5em;
    border-right: solid 3px #9E9E9E;
}

.profile .picture>:not(.signOut) {
    left: -30em;
    position: relative;
}

.profile .picture p {
    color: white;
}


.profile .picture img {
    width: 10em;
    border-radius: 50%;
}

@media (max-width: 1000px) {
    .profile .picture img {
        width: 80%;
    }
}

.profile .name {
    display: inline-block;
    font-size: 1.5em;
    margin-top: 1em;
}

.signOut {
    font-size: 1.4em;
    opacity: 0.2;
    position: absolute;
    left: 100%;
    top: 55%;
}

.signOut:hover {
    opacity: 0.8;
    cursor: pointer;
}

.profile .rank {
    color: #D4D4D4;
    font-size: 2.5em;
}

.profile .infoCard {
    padding-left: 5em;
    color: white;
    text-align: -webkit-center;
}

.profile .infoCard .quadrants td {
    padding: 0 1em;
    width: 13em;
    text-align: center;
    border-radius: 5px;
}

/*.profile .infoCard .quadrants td:first-child {
    text-align: left;
}

.profile .infoCard .quadrants td:nth-child(2) {
    text-align: right;
}*/

.profile .infoCard .customPadding {
    padding: 1.1em 0em;
}

.profile .infoCard .quadrants .infoValue {
    font-size: 3em;
    padding: 0px 0.4em;
}

.profile .infoCard .quadrant .infoLabel {
    font-size: 1.5em;
    padding: 0px 0.4em;
}

.profile .infoCard .bestScore {
    background-color: #1976D2;
}

.profile .infoCard .total_correct {
    background-color: #43A047;
}

.profile .infoCard .total_incorrect {
    background-color: #d32f2f;
}

.profile .infoCard .numGames {
    background-color: #FFB300;
}

.lastGameCard {
    background-color: #DCDCDC;
    margin-top: 2em;
    color: black;
    text-align: center;
}

.lastGame {
    display: inherit;
    background-color: #DCDCDC;
}

.lastGame th {
    padding: 0 2em;
}

.red {
    color: #FF9100;
    font-weight: bolder;
}

.green {
    color: #00CC02;
    font-weight: bolder;
}

.timer {
    width: 100px;
    height: auto;
    position: fixed;
    right: 3%;
}

.score {
    position: fixed;
    font-size: 3vw;
    left: 3%;
}

@media (max-width: 800px) {
    .timer {
        width: 50px;
        position: relative;
        left: 40%;
    }
}

.gameTable {
    display: block;
    padding: 1em 0;
    width: 70%;
    margin: 5em auto;
    color: black;
    background-color: #D8D8D8;
    box-shadow: 0px 0px 25px 2.5px rgba(0,0,0,0.5);
    border-radius: 0.5em;
}

.gameTable th {
    text-align: center;
    font-size: 2.5vw;
}

.gameTable th:first-child {
    width: 35%;
}

.gameTable td:first-child {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-left: 2em;
}

.gameTable td:nth-child(2) {
    padding-left: 10% !important;
    padding-right: 2em;
}

.userCard, .tweetCard {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #f3f3f3;
    padding: 3%;
    margin-bottom: 3%;
    background: #FBFBFB;
}

.userCard>div {
    display: inline-table;
}

.followButton {
    display: inline-grid;
    float: right;
    box-sizing: border-box;
    padding: 6px;
    border-radius: 6px;
    text-decoration: none;
}

.followButton:hover {
    color: white;
    background-color: #337ab7;
    text-decoration: none;
}

.followButton>* {
    display: inline;
}


.userImg {
    width: 4vw;
    height: 4vw;
}

.userImg img {
    width: 4vw;
    height: 4vw;
}

.userInfo {
    vertical-align: top;
    margin-left: 2vw;
}

.userInfo div {
    display: block;
}

.userName {
    font-size: 1em;
    font-weight: bolder;
    color: black;
}

.userHandle {
    font-size: 0.9em;
    margin-top: 5px;
    color: rgba(0,0,0,0.6);
}

.tweetCard p {
    word-break: break-word;
}

.emoji {
    width: 1.3em;
}

.imgLink {
    color: #9C0000;
    cursor: pointer;
    display: inline;
}

.imgLink:hover {
    color: #337AB9;
}

.fa-caret-down {
    padding-left: 0.5em;
    color: #C5C4C4;
}

.tweetImg {
    width: 100%;
}

.selectedCard {
    box-shadow: 0px 0px 0px 4px #66CCFF;
}

.correctSelection {
    box-shadow: 0px 0px 0px 4px #2EB82E;
    opacity: 0.3;
}

.correctSelectionAnimation {
    -webkit-animation: growAndShrink 0.5s ease-in-out;
            animation: growAndShrink 0.5s ease-in-out;
}

@-webkit-keyframes growAndShrink{
    0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes growAndShrink{
    0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.incorrectSelection {
    box-shadow: 0px 0px 0px 4px #CC0000;
}

/* End Review */
.endInfo {
    padding-top: 5em;
}

.endInfo>div {
    text-align: center;
    font-family: 'PT Sans', sans-serif;
}

.attempts {
    margin: 0 auto;
}

.attempts div {
    margin-right: 2em;
    display: inline-block;
    font-size: 2em;
}

.finalScore {
    font-size: 3em;
}

.finalScore span {
    padding-left: 0.5em;
}

.survey {
    padding-top: 2em;
}

.surver a {
    color: #337ab7;
}

.surver a:hover {
    color: #337ab7;
}

.buttons {
    padding-bottom: 1em;
}

.buttons>button:not(:last-of-type) {
    margin-right: 1em;
}

.buttons>button {
    border: none;
    border-radius: 5px;
    opacity: 0.8;
    font-size: 1.2em;
    color: white;
    background-color: #0084B4;
}

.buttons>button {
    opacity: 1;
}

.answerTable {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    width: 100%;
    height: 100%;
}

.answerTable .tweetCard,
.answerTable .userCard {
    text-align: left;
}

/* Leaderboard */

.leaderboardTable {
    width: 50%;
    margin: 0 auto 2em;
    border-radius: 0.6em;
    color: black;
    background-color: #f8f8f8;
    box-shadow: 0 0 20px -5px rgba(0,0,0,0.2);
}

.leaderboard thead th {
    text-align: center;
}

.leaderboardTable tr:hover:not(.highlightPlayerRow) {
    background-color: #F3F3F3;
}

.leaderboardTable td {
    padding: 0.7em 0;
}

.leaderboardTable .hasLink:hover {
    cursor: pointer;
    color: #5E5EF9;
}

.rank {
    display: inline;
    font-size: 1.5em;
    font-weight: 900;
}

.playerImage {
    width: 3.572em;
    height: 3.572em;
    border-radius: 50%;
}

.highlightPlayerRow {
    background-color: #9391E0;
}

.fa-trophy {
    position: relative;
    margin-left: -1.3em;
    padding-right: 0.2em;
    font-size: 2em;
    opacity: 0.5;
    color: yellow;
}