html { font-family: "Helvetica", Sans-serif; } body{ background: linear-gradient(230deg, rgba(218, 159, 142, 0.9), rgba(236, 0, 228, 0.9), rgba(0, 212, 236, 0.9), rgba(0, 236, 173, 0.9), rgba(110, 0, 236, 0.9)); background-position: center; background-repeat: repeat; -webkit-animation: AnimationName 60s ease infinite; -moz-animation: AnimationName 60s ease infinite; animation: AnimationName 60s ease infinite; @-webkit-keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } @-moz-keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } @keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } } a { font-weight: normal; } #hero { display: flex; flex-wrap: wrap; background-color: transparent; position: relative; height: 100vh; width: 100%; background: linear-gradient(230deg, rgba(218, 159, 142, 0.9), rgba(236, 0, 228, 0.9), rgba(0, 212, 236, 0.9), rgba(0, 236, 173, 0.9), rgba(110, 0, 236, 0.9)); background-size: 1000% 1000%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; @-webkit-keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } @-moz-keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } @keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } div { background-image: url('/assets/img/texture.png'); padding: 10px; border-radius: 3px; flex: 1 1 300px; flex-direction: column; display: flex; flex-wrap: wrap; } } /* MUSIC INDEX */ .musiflex { display: flex; flex-wrap: wrap; margin: 0; padding: 0; } .trackcontainer { flex: 1 1 300px; padding: 10px; margin: 0; h1, h2, h3, p { padding: 5px; color: rgb(0, 0, 0); background: linear-gradient(230deg, rgba(218, 159, 142, 0.9), rgba(236, 0, 228, 0.9), rgba(0, 212, 236, 0.9), rgba(0, 236, 173, 0.9), rgba(110, 0, 236, 0.9)); background-size: 1000% 1000%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; @-webkit-keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } @-moz-keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } @keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } padding: 10px; border-radius: 3px; color: #000; box-shadow: 5px 10px rgba(61, 0, 102, 0.5); border: #000 solid 1px; } } .track { width: 100%; background-size: cover; background-position: 50% 50%; min-height: 300px; padding: 0; margin: 0; border-radius: 3px; color: #000; box-shadow: 5px 10px rgba(61, 0, 102, 0.5); border: #000 solid 1px; } /* 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; position: fixed; top: 0px; left: 0px; padding: 15px; margin: 0 auto; .container { color: #000; box-shadow: 5px 10px rgba(61, 0, 102, 0.5); border: #000 solid 1px; background: linear-gradient(230deg, #ff7951, #ec00e3, #00d5ec, #00ecaf, #6d00ec); background-size: 1000% 1000%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; @-webkit-keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } @-moz-keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } @keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } margin: 0 auto 0 0; text-align: center; border-radius: 20px; padding: 10px; } } button { background: linear-gradient(230deg, rgba(218, 159, 142, 0.9), rgba(236, 0, 228, 0.9), rgba(0, 212, 236, 0.9), rgba(0, 236, 173, 0.9), rgba(110, 0, 236, 0.9)); background-size: 1000% 1000%; color: #000; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; @-webkit-keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } @-moz-keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } @keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } width: 100px; height: 100px; border-radius: 100px; transition: background-color 0.5s ease-in-out; } button:hover { background-color: rgba(117, 253, 83, 0.9); } #info { flex: 1 1 500px; min-height: 80vh; padding: 15px; background-size: cover; background-position: center; background-repeat: no-repeat; } #timer { flex: 1 1 200px; background: linear-gradient(230deg, rgba(218, 159, 142, 0.9), rgba(236, 0, 228, 0.9), rgba(0, 212, 236, 0.9), rgba(0, 236, 173, 0.9), rgba(110, 0, 236, 0.9)); background-size: 1000% 1000%; border: #000 solid 1px; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; @-webkit-keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } @-moz-keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } @keyframes AnimationName { 0%{background-position:0% 91%} 50%{background-position:100% 10%} 100%{background-position:0% 91%} } padding: 15px; p { background-color: rgba(151, 189, 146, 0.3); padding: 10px; border-radius: 3px; color: #000; 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); border: #000 solid 1px; border-radius: 3px; } } #tracktime { margin-bottom: auto; } #navigation { position: fixed; bottom: 10px; right: 10px; }