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 { color: #0000009f; background-color: rgba(255, 255, 255, 0.705); transition: color 0.5s ease-in-out; border-radius: 3px; } a:hover { background-color: #00000091; transition: color 0.5s ease-in-out; color: #ffffff9f; } #hero { display: flex; flex-wrap: wrap; flex-direction: row; background-color: transparent; position: relative; height: 100vh; width: 100%; // background: linear-gradient(230deg, rgba(218, 159, 142, 0.8), rgba(236, 0, 228, 0.8), rgba(0, 212, 236, 0.8), rgba(0, 236, 173, 0.8), rgba(110, 0, 236, 0.8)); // background-size: 1000% 1000%; background-image: url('/assets/img/header.svg'); -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-repeat: repeat; background-attachment: fixed; flex: wrap; margin: auto; letter-spacing: -.05em; line-height: .95em; padding: 20px; flex: 0 0 300px;; } .pivot { border-radius: 3px; } h1 { font-size: 3em; line-height: .3em; } h2 { font-size: 1em; line-height: .8em; } a { background: linear-gradient(230deg, #ff00ff7f, #426a007f); 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%} } } .fullscreen-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } .fullscreen-bg__video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (min-aspect-ratio: 16/9) { .fullscreen-bg__video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .fullscreen-bg__video { width: 300%; left: -100%; } } @media (max-width: 767px) { .fullscreen-bg { background: url('/assets/img/sakrecoer-logo.svg') center center / cover no-repeat; } // .fullscreen-bg__video { // display: none; // } } } /* MUSIC INDEX */ .musiflex { display: flex; flex-wrap: wrap; margin: 0; padding: 0; background-color: #ffffffc9; background-image: url('/assets/img/body.png'); background-repeat: repeat; } .trackcontainer { flex: 1 1 360px; padding: 10px; margin: 0; // background: linear-gradient(230deg, rgba(218, 159, 142, 0.1), rgba(236, 0, 228, 0.1), rgba(0, 212, 236, 0.1), rgba(0, 236, 173, 0.1), rgba(110, 0, 236, 0.1)); 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%} } h1, h2, h3, p { padding: 5px; 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; box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2); } } .track { width: 100%; background-size: cover; background-position: 50% 50%; min-height: 300px; padding: 0; margin: 0; border-radius: 3px; box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2); } /* Music Template */ #player { display: flex; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; height: 100vh; } #controls { a { background-color: transparent; } display: flex; flex: 0 0 200px; flex-wrap: wrap; position: fixed; top: 0px; left: 0px; padding: 15px; margin: 0 auto; .container { box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2); 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: #fff; -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%; -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; box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2); } img { box-shadow: 5px 10px 10px rgba(61, 0, 102, 0.2); border-radius: 3px; } } #tracktime { margin-bottom: auto; } #navigation { position: fixed; bottom: 10px; right: 10px; opacity: 0; a { background-color: transparent; } } .aboutflex { display: flex; flex-wrap: wrap; flex-direction: row; margin: 0; padding: 0; background-color: #ffffffc9; background-image: url('/assets/img/body.png'); background-repeat: repeat; } .logo { flex: 1 0 300px; background-size: 100%; background-repeat: repeat; max-width: 300px; max-height: 300px; }