:root{--color-1: yellow;--color-2: green;--color-3: violet;--color-4: yellow}#color-choser{position:fixed;top:0;right:0;width:120px;height:100%;background:#000;border-left:2px solid var(--color-1)}#palette{padding:10px}#palette .color{margin-bottom:1em}input[type=color]{width:100%;height:100%;aspect-ratio:1/1;border:0;outline:0;padding:0;box-shadow:0;background-color:inherit}.save-colors-wrapper{margin:10px;color:#fff}#btn-save-colors{text-align:center;border:solid .5px;padding:.35em .5em .25em;margin-bottom:10px;cursor:pointer}#saved-colors div{display:grid;grid-template-columns:repeat(5, 1fr);gap:5px;margin-bottom:5px}#saved-colors span{aspect-ratio:1/1;background:red;margin-bottom:.5em}#saved-colors i{aspect-ratio:1/1;text-align:center;cursor:pointer}.dot-container-1,.dot-container-2{width:60vw;padding-bottom:-2vw;margin-left:16vw;display:flex;justify-content:space-around;flex-wrap:wrap}#visual-1{width:100vw;height:100vh;border-bottom:2px solid var(--color-1);padding-bottom:-2vw;overflow:hidden}#visual-1 .visual-color-1{width:20vw;height:20vw;border-radius:50%;-webkit-animation:top-to-bottom 2s linear infinite;animation:top-to-bottom 2s linear infinite}#visual-1 .visual-color-2{width:20vw;height:20vw;border-radius:50%;-webkit-animation:bottom-to-top 4s linear infinite;animation:bottom-to-top 4s linear infinite}#visual-1 .visual-color-3{width:20vw;height:20vw;border-radius:50%;-webkit-animation:top-to-bottom 4s linear infinite;animation:top-to-bottom 4s linear infinite}#visual-1 .visual-color-4{width:20vw;height:20vw;border-radius:50%;-webkit-animation:bottom-to-top 2s linear infinite;animation:bottom-to-top 2s linear infinite}@-webkit-keyframes top-to-bottom{0%{transform:translateY(0%);background-color:var(--color-1)}50%{transform:translateY(100%);background-color:var(--color-3)}100%{transform:translateY(0%);background-color:var(--color-1)}}@keyframes top-to-bottom{0%{transform:translateY(0%);background-color:var(--color-1)}50%{transform:translateY(100%);background-color:var(--color-3)}100%{transform:translateY(0%);background-color:var(--color-1)}}@-webkit-keyframes bottom-to-top{0%{transform:translateY(100%);background-color:var(--color-2)}50%{transform:translateY(0%);background-color:var(--color-4)}100%{transform:translateY(100%);background-color:var(--color-2)}}@keyframes bottom-to-top{0%{transform:translateY(100%);background-color:var(--color-2)}50%{transform:translateY(0%);background-color:var(--color-4)}100%{transform:translateY(100%);background-color:var(--color-2)}}#visual-2{width:100%;height:100vh;display:flex;justify-content:space-around;align-items:center;border-bottom:2px solid var(--color-1)}#visual-2 .visual-color-1{overflow:hidden;width:40vw;height:50vw;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:20vw;color:var(--color-1);background-color:transparent}#visual-2 .visual-color-2{overflow:hidden;width:40vw;height:50vw;font-family:"Times New Roman",Times,serif;font-size:20vw;color:var(--color-2);background-color:transparent;transform:rotate(180deg)}.scrolling{-webkit-animation:scrolling 6s linear infinite;animation:scrolling 6s linear infinite}@-webkit-keyframes scrolling{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}@keyframes scrolling{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}@font-face{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;src:url("Assets/Impact.ttf") format("ttf")}@font-face{font-family:"Times New Roman",Times,serif;src:url("Times New Roman.ttf") format("ttf")}svg{background-color:transparent;height:100vh;margin-left:-3vw}path{transform-origin:center}#visual-3{width:100vw;margin:0 auto;border-bottom:2px solid var(--color-1)}#visual-3 .st0{height:600vh;fill:none;stroke:var(--color-1);stroke-width:20;stroke-miterlimit:10}#visual-3 .st1{height:600vh;fill:none;stroke:var(--color-2);stroke-width:20;stroke-miterlimit:10}#visual-3 .st2{height:600vh;fill:none;stroke:var(--color-3);stroke-width:20;stroke-miterlimit:10}#visual-3 .st3{height:600vh;fill:none;stroke:var(--color-4);stroke-width:20;stroke-miterlimit:10}.st0{-webkit-animation:rotation 16s infinite linear;animation:rotation 16s infinite linear}@-webkit-keyframes rotation{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes rotation{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.st1{-webkit-animation:rotation 12s infinite linear;animation:rotation 12s infinite linear}@keyframes rotation{from{transform:rotate(-360deg)}to{transform:rotate(0deg)}}.st2{-webkit-animation:rotation 8s infinite linear;animation:rotation 8s infinite linear}@keyframes rotation{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.st3{-webkit-animation:rotation 4s infinite linear;animation:rotation 4s infinite linear}@keyframes rotation{from{transform:rotate(-360deg)}to{transform:rotate(0deg)}}#visual-4{width:100%;height:100vh;border-bottom:2px solid var(--color-1);display:flex;justify-content:space-between;overflow:hidden}.string-container-1{width:100%;display:flex;justify-content:space-between}.string-container-1 .string-1{background:var(--color-1);width:10vw;height:100vh;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-1 .string-2{background:var(--color-2);width:5vw;height:100vh;margin-top:auto;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-1 .string-3{background:var(--color-3);width:2vw;height:100vh;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-1 .string-4{background:var(--color-4);width:7vw;height:100vh;margin-top:auto;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-2{width:100%;display:flex;justify-content:space-between}.string-container-2 .string-5{background:var(--color-1);width:10vw;height:100vh;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-2 .string-6{background:var(--color-3);width:1vw;height:100vh;margin-top:auto;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-2 .string-7{background:var(--color-2);width:8vw;height:100vh;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-2 .string-8{background:var(--color-4);width:11vw;height:100vh;margin-top:auto;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-3{width:100%;display:flex;justify-content:space-between}.string-container-3 .string-1{background:var(--color-1);width:10vw;height:100vh;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-3 .string-2{background:var(--color-2);width:5vw;height:100vh;margin-top:auto;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-3 .string-3{background:var(--color-3);width:2vw;height:100vh;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-3 .string-4{background:var(--color-4);width:7vw;height:100vh;margin-top:auto;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-4{width:100%;display:flex;justify-content:space-between}.string-container-4 .string-5{background:var(--color-1);width:10vw;height:100vh;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-4 .string-6{background:var(--color-3);width:1vw;height:0;margin-top:auto;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-4 .string-7{background:var(--color-2);width:8vw;height:100vh;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}.string-container-4 .string-8{background:var(--color-4);width:11vw;height:100vh;margin-top:auto;-webkit-animation:height-animation 3s linear alternate infinite;animation:height-animation 3s linear alternate infinite}@-webkit-keyframes height-animation{from{height:0vh}to{height:100vh}}@keyframes height-animation{from{height:0vh}to{height:100vh}}#visual-5{width:100%;height:100vh;border-bottom:2px solid var(--color-1);display:flex;justify-content:center;flex-wrap:wrap}.bild-1,.bild-2,.bild-3,.bild-4{width:50%;flex-basis:40%;height:50%;background-image:url(../IMG/DSC_7880.jpg);background-position:center;background-size:cover;background-blend-mode:difference}.bild-1{background-color:var(--color-1)}.bild-1:hover{background-color:var(--color-4);transition:all .8s}.bild-2{background-color:var(--color-2)}.bild-2:hover{background-color:var(--color-3);transition:all .8s}.bild-3{background-color:var(--color-3)}.bild-3:hover{background-color:var(--color-2);transition:all .8s}.bild-4{background-color:var(--color-4)}.bild-4:hover{background-color:var(--color-1);transition:all .8s}#visual-6{width:100vw;height:100vh;border-bottom:2px solid var(--color-1);overflow:hidden}#container-1{width:100%;margin-top:-10vh;display:flex;background-color:transparent}#container-2{width:100%;margin-top:-100vh;display:flex;background-color:transparent}#container-3{width:60%;position:absolute;margin-top:-750px;gap:-20vw;display:flex;background-color:transparent}circle{fill:rgba(0,0,0,0);stroke-dasharray:0,0,0,100;stroke-dashoffset:25;-webkit-animation:pie1 6s infinite ease both;animation:pie1 6s infinite ease both}.colorweel-1{width:60vw;height:60vh;-webkit-animation:rotation-right 5s infinite;animation:rotation-right 5s infinite}.colorweel-2{margin:-10vh 0 0 5vw;-webkit-animation:rotation-left 7s infinite;animation:rotation-left 7s infinite;width:120vw;height:120vh}.colorweel-3{margin-top:-20vh;-webkit-animation:rotation-right 9s infinite;animation:rotation-right 9s infinite}.colorweel-4{margin-top:20vh;-webkit-animation:rotation-left 1s infinite;animation:rotation-left 1s infinite}.colorweel-5{-webkit-animation:rotation-right 1s infinite;animation:rotation-right 1s infinite}.colorweel-6{-webkit-animation:rotation-left 3s infinite;animation:rotation-left 3s infinite}.pie1{stroke:var(--color-1)}.pie2{stroke:var(--color-2);-webkit-animation-name:pie2;animation-name:pie2}.pie3{stroke:var(--color-3);-webkit-animation-name:pie3;animation-name:pie3}.pie4{stroke:var(--color-4);-webkit-animation-name:pie4;animation-name:pie4}@-webkit-keyframes rotation-right{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes rotation-right{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-webkit-keyframes rotation-left{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}@keyframes rotation-left{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}@-webkit-keyframes pie1{50%,100%{stroke-dasharray:40,60,0,0}}@keyframes pie1{50%,100%{stroke-dasharray:40,60,0,0}}@-webkit-keyframes pie2{50%,100%{stroke-dasharray:0,40,30,30}}@keyframes pie2{50%,100%{stroke-dasharray:0,40,30,30}}@-webkit-keyframes pie3{50%,100%{stroke-dasharray:0,70,20,10}}@keyframes pie3{50%,100%{stroke-dasharray:0,70,20,10}}@-webkit-keyframes pie4{50%,100%{stroke-dasharray:0,90,10,0}}@keyframes pie4{50%,100%{stroke-dasharray:0,90,10,0}}#visual-7{width:100vw;height:40vh;background-color:var(--color-1)}.finish{font-size:200px;margin-left:22vw;color:#000;font-family:"Times New Roman",Times,serif}body{background-color:#000}.container{width:100vw;height:100vh}#visuals{width:calc(100% - 120px);min-height:100vh}.visual-color-1{background:var(--color-1);width:50px;height:50px}.visual-color-2{background:var(--color-2);width:50px;height:50px}.visual-color-3{background:var(--color-3);width:50px;height:50px}.visual-color-4{background:var(--color-4);width:50px;height:50px}