html { font-family: "Ubuntu", "Helvetica", Sans-serif; } @-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%} } body{ margin: 0; padding: 0; background-color: $color1; color: $color4; background: linear-gradient(230deg, $color1, $color3); background-position: center; background-repeat: repeat; -webkit-animation: AnimationName 60s ease infinite; -moz-animation: AnimationName 60s ease infinite; animation: AnimationName 60s ease infinite; } a { color: $color4; transition: all 0.5s ease-in-out; border-radius: 3px; } a:hover { transition: color 0.5s ease-in-out; color: $color5; } #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/world.svg'); -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; div { background-repeat: repeat; flex: wrap; margin: auto; letter-spacing: -.05em; line-height: .95em; padding: 20px; flex: 0 0 250px;; } .pivot { border-radius: 3px; background: linear-gradient(230deg, $color1, $color3); box-shadow: 5px 10px 100px $color4; } h1 { font-size: 2.5em; line-height: .3em; } h2 { font-size: 1em; line-height: .8em; } .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: 100vw; height: 100%; background: linear-gradient(230deg, $color1, $color3); margin:0; padding: 0; } @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; } .pivot { flex: 0 0 250px; } h1 { font-size: 2.25em; } // .fullscreen-bg__video { // display: none; // } } } /* MUSIC INDEX */ .musiflex { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; background-repeat: repeat; } .trackcontainer { flex: 1 1 360px; width: 250px; 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; h1, h2, h3, p { padding: 5px; background: linear-gradient(230deg, $color1, $color3); background-size: 1000% 1000%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; padding: 10px; border-radius: 3px; box-shadow: 5px 10px 100px $color4; } } .track { width: 100%; background-size: cover; background-position: 50% 50%; min-height: 250px; padding: 0; margin: 0; border-radius: 3px; box-shadow: 5px 10px 100px $color4; } /* 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 100px $color4; background: linear-gradient(230deg, $color1, $color3); background-size: 1000% 1000%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; margin: 0 auto 0 0; text-align: center; border-radius: 20px; padding: 10px; } } button { background: linear-gradient(230deg, $color1, $color3); background-size: 1000% 1000%; color: #fff; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; width: 100px; height: 100px; border-radius: 100px; transition: background-color 0.5s ease-in-out; } button:hover { background-color: $color2; } #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, $color1, $color3); background-size: 1000% 1000%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; padding: 15px; p { background-color: $color1; padding: 10px; border-radius: 3px; box-shadow: 5px 10px 100px $color4; } img { box-shadow: 5px 10px 100px $color4; border-radius: 3px; } } #tracktime { margin-bottom: auto; } #navigation { z-index: 10000; 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: linear-gradient(230deg, $color1, $color2, $color3, $color4, $color5); background-position: center; background-repeat: repeat; -webkit-animation: AnimationName 60s ease infinite; -moz-animation: AnimationName 60s ease infinite; animation: AnimationName 60s ease infinite; background-repeat: repeat; } .logo { flex: 1 0 300px; background-size: 100%; background-repeat: repeat; max-width: 300px; max-height: 300px; } #privacy { position: fixed; bottom:0; left:0; z-index:77777; margin: 0; padding: 0; img { margin: 0; padding: 0; position: fixed; bottom: 0; } }