#mobile-score { display: none; height: auto; } #mobile-score .title-image { height: 80px; margin: 0 auto 0 auto; display: block; position: relative; bottom: -100px; } #mobile-score .score-container { margin: 0 auto 0 auto; display: block; bottom: -85px; position: relative; } #top-bar-score { display: inline-flex; position: fixed; right: 0; } #top-bar-score .title-image { height: 40px; margin: 0; } #main-score { display: block; } #main-score .title-image { display: none; } .score-container { background: none; border-radius: 10px; display: inline-flex; vertical-align: center; font-family: Harry-P, sans-serif; font-size: 50px; margin: 0; } .score-container a { display: inline-flex; vertical-align: middle; align-items: center; text-shadow: -1px 1px 2px #000, 1px 1px 2px #000, 1px -1px 0 #000, -1px -1px 0 #000; } .score-container a:hover { text-shadow: 0 0 10px #bd8a39; } .winning { font-size: 23px; } .score-gli { color: #ff5f5f; background-size: auto 100%; margin: 0 10px; } .score-pek { color: #7ffd78; background-size: auto 100%; margin: 0 10px; } .score-boo { color: #fafd78; background-size: auto 100%; margin: 0 10px; } .score-ver { color: #60bdff; background-size: auto 100%; margin: 0 10px; } .score-separator { background-color: #d9d9d9; width: 5px; height: 5px; } #main-score .score-logo { height: 60px; margin: 0 5px 0 5px; } @media screen and (max-width: 768px) { #top-bar-score { display: none; } #mobile-score { display: block; } #main-score .score-container { display: block; } }