@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700&display=swap&subset=cyrillic);body {background-color: #1c1d1f;color: #e4e3df;font-family: Ubuntu, sans-serif;font-size: 16px;font-weight: 300;text-align: center }a {color: #fed535;font-weight: 700;text-decoration: none;transition: color 0.5s;outline: none }a:hover {color: #e4e3df }h1 {font-size: 4em;padding: 5px }h2 {font-size: 1.85em;padding-top: 5px }.accent {color: #fed535;font-weight: 700 }body>header {display: table;position: fixed;table-layout: fixed;top: 0;left: 0;width: 100%;height: 80px;z-index: 2 }.header-row {display: table-row }.header-cell {display: table-cell;vertical-align: middle;width: 100% }ul {float: right }li {float: left;transition: background 0.25s }li a {display: block;padding: 32px 20px }li:hover {background: #fed535 }li a:hover {color: #1c1d1f }body {background: linear-gradient(-15deg, #1c1d1f, #4b5665) fixed;background-size: cover }main {height: 100vh;min-width: 768px;min-height: 480px }.flex {display: flex;flex-direction: column;justify-content: center;align-items: center }.upload-box {margin-top: 20px;height: 315px;width: 100%;display: flex;flex-direction: row;justify-content: center;align-items: center }.bottom-tip {padding: 6px;font-size: 2em;line-height: 1.5em;transition: opacity 1s }body>footer {display: table;position: fixed;table-layout: fixed;bottom: 0;left: 0;width: 100%;height: 72px }.footer-row {display: table-row }.footer-cell {display: table-cell;vertical-align: middle;color: #333942;transition: color 0.5s;width: 100% }.footer-cell a {color: #333942 }.footer-cell a:hover {color: #4b5665 }@keyframes dance {from, to {transform: scale(1, 1);}25% {transform: translateX(3px) rotate(2deg) scale(1, 1.1);}50% {transform: scale(1, 1);}75% {transform: scale(1, 1.05);}}.whatbpm {animation: dance 0.46875s infinite;color: #fff;}.whatbpm > span {color: #02fe94;}.whatbpm:hover {color: #000;}.whatbpm:hover > span {color: #000;}