html { font-family: "Helvetica", Sans-serif; } body{ background: url(/assets/img/pattern.png); } a { font-weight: normal; } #hero { height: 100vh; width: 100vw; -webkit-transition: background .5s ease-in-out; transition: background .5s ease-in-out; background-image: url({{}}); } /* MUSIC INDEX */ .musiflex { display: flex; flex-wrap: wrap; margin: 0; padding: 0; } .trackcontainer { flex: 1 1 300px; padding: 10px; margin: 0; h1, h3, p { padding: 5px; color: rgb(249, 234, 214); } } .track { width: 100%; background-size: cover; background-position: 50% 50%; min-height: 300px; padding: 0; margin: 0; } /* Music Template */ #player { display: flex; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; height: 100vh; } #controls { display: flex; flex: 0 0 200px; flex-wrap: wrap; border: #000 solid 1px; box-shadow: 5px 10px rgba(61, 0, 102, 0.5); border-radius: 3px; padding: 15px; margin: 0 auto; background-color: rgba(61, 0, 102, 0.884); .container { border-radius: 3px; margin: 0 auto 0 0; width: 10em; text-align: center; border-radius: 3px; padding: 10px; } } button { background-color: #f00; width: 100px; height: 100px; border-radius: 100px; transition: background-color 0.5s ease-in-out; } button:hover { background-color: rgb(253, 83, 83); } #info { flex: 1 1 500px; min-height: 80vh; padding: 15px; background-color: rgba(61, 0, 102, 0.884); background-size: cover; background-position: center; background-repeat: no-repeat; } #timer { flex: 1 1 200px; background-color: rgba(60, 0, 100, 0.856); padding: 15px; background-size: cover; background-position: center; p { background-color: rgba(60, 0, 100, 0.664); padding: 10px; border-radius: 3px; color: #fff; box-shadow: 5px 10px rgba(61, 0, 102, 0.5); border: #000 solid 1px; } img { box-shadow: 5px 10px rgba(61, 0, 102, 0.5); } } #tracktime { margin-bottom: auto; } #navigation { position: fixed; bottom: 10px; right: 10px; }