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/world2.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-logo2.svg') center center / cover no-repeat; } .pivot { flex: 0 0 250px; } h1 { font-size: 2.25em; } // .fullscreen-bg__video { // display: none; // } } }