@font-face { font-family: 'Old London'; src: url('Olondon.otf'); } :root{ --tekstfarge: #027bff; } a{ color: var(--tekstfarge); } .landing{ height: 100vh; background-color: lightblue; } .skrift{ position: absolute; top: 0%; margin-left: auto; margin-right: auto; left: 0; right: 0; height: 80vh; max-width: 800px; font-family: 'Old London'; font-size: clamp(1.5rem, 1rem + 9vw, 5rem); color: var(--tekstfarge); text-align: center; } span{ opacity: 50; transform: translateY(250px); transition: all 1.5s; display: inline-block; } .tekst span:nth-child(even){ transform: translateY(200px); rotate: 50deg; } .tekst span:nth-child(2n+3){ transform: translateX(-120px); rotate: -30deg; } .tekst span:nth-child(3n+2){ transform: translateX(120px); } .tekst span.stilig{ opacity: 100; transform: translateY(0px); rotate: 0deg; } .bio{ font-size: 1.5rem; } .stable{ width: 100vw; height: 100vh; } #hest1{ margin-top: 2em; margin-left: 4em; display: inline-block; width: 300px; transform: scaleX(-1); animation: hest1 10s infinite; } .moved{ animation: hest1 4s infinite; } @keyframes hest1 { 0%{ translate: 0 0; rotate: 0deg; } 10%{ translate: 400px 150px; rotate: -80deg; } 20%{ translate: 500px 450px; rotate: 20deg; } 30%{ translate: 180px 150px; rotate: 20deg; } 40%{ translate: 80px 30px; rotate: 20deg; } 50%{ translate: 0 0; rotate: 0deg; } 60%{ translate: 0 0; rotate: 0deg; } 70%{ translate: 0 0; rotate: 0deg; } 80%{ translate: 0 0; rotate: 0deg; } 90%{ translate: 0 0; rotate: 0deg; } 100%{ translate: 0 0; rotate: 0deg; } } .sjekk:checked~label>#hest1{ filter: invert(88%) sepia(89%) saturate(3221%) hue-rotate(-134deg) brightness(99%) contrast(101%); }