diff --git a/css/back.css b/css/back.css new file mode 100644 index 0000000..c5e5476 --- /dev/null +++ b/css/back.css @@ -0,0 +1,42 @@ +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.gradient { + --size: 250px; + --speed: 50s; + --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8); + + width: var(--size); + height: var(--size); + filter: blur(calc(var(--size) / 5)); + background-image: linear-gradient(hsl(158, 82, 57, 85%), hsl(252, 82, 57)); + animation: rotate var(--speed) var(--easing) alternate infinite; + border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; +} + +@media (min-width: 720px) { + .gradient { + --size: 500px; + } +} + +body { + background-color: #222; + position: absolute; + inset: 0; + display: flex; + place-content: center; + align-items: center; + overflow: hidden; +} + +/* This is just to transition when you change the viewport size. */ +* { + transition: all 0.25s ease-out; +} \ No newline at end of file