body.gfx { background-color: $bg-gfx-on; > aside { &:hover, &:focus { background-color: $bg-gfx-on; nav ul li:first-child { background: $bg-gfx-on; } } } #krto img { float: left; padding-right: 2rem; margin-left: -6rem; } #cw { clear: both; position: relative; z-index: 0; a { z-index: 200; } #gfx { position: absolute; margin-top: -1.5rem; z-index: -1; opacity: 1; height: 22.5rem; width: 72rem; animation: fade-in 1s linear; svg { position: relative; margin-left: -7rem; /* Something is wrong with sine.js and reload */ height: 100%; } } &:hover #gfx { opacity: 0.2; animation: fade-out 1s linear; } } .sinewave{ &.w0 { fill: rgba(240, 40, 142, 0.5); } &.w1 { fill: rgba(140, 140, 42, 0.5); } &.w2 { fill: rgba(240, 142, 1, 0.5); } &.w3 { fill: rgba(0, 110, 12, 0.5); } } }