@view-transition {
    navigation: auto;
}

:root {
    --dur: 1s;
    --ease: cubic-bezier(.22,.61,.36,1);
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--dur);
    animation-timing-function: var(--ease);
}

@keyframes vt-fade-out {
    from { opacity: 1 }
    to { opacity: 0 }
}

@keyframes vt-fade-in  {
    from { opacity: 0 }
    to { opacity: 1 }
}

::view-transition-old(root) {
    animation-name: vt-fade-out
}
::view-transition-new(root) {
    animation-name: vt-fade-in
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-group(*),
    ::view-transition-image-pair(*) { animation: none !important; }
}

#prompt-form {
    transition: transform 200ms var(--easing);
    view-transition-name: prompt-container;
}
::view-transition-group(prompt-container) {
    animation-duration: 200ms;
    animation-timing-function: var(--easing);
    z-index: 10;
}
::view-transition-image-pair(prompt-container) {
    isolation: isolate;
}

#jottre-background {
    background: radial-gradient(
    farthest-corner at 0% 0%,
    rgba(0, 0, 0, 0.2) 40%,
    rgba(0, 0, 0, 0.8) 100%
    ),
    radial-gradient(
    circle at 50% 0%,
    #2C2C2C 10%,
    #1E1E1E 25%,
    #121212 50%,
    #0A0A0A 75%,
    #000000 100%
    );
}

#work-experience-background {
    background: radial-gradient(
    farthest-corner at 0% 0%,
    rgba(0, 0, 0, 0.2) 40%,
    rgba(0, 0, 0, 0.8) 100%
    ),
    radial-gradient(
    circle at 50% 0%,
    #3d5a7d 10%,
    #2d4663 25%,
    #1a2d4a 50%,
    #0f1f35 75%,
    #071a2a 100%
    );
}

.we-subtile {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    transition: background 150ms ease, border-color 150ms ease;
}

.we-subtile:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

#colorize-background {
    background:
    radial-gradient(at 0% 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 254, 254, 0) 60%, rgba(255, 255, 255, 0) 100%), radial-gradient(circle at 50% 0%, rgba(200, 200, 200, 0.4) 10%, rgba(110, 85, 60, 0.4) 40%, rgba(200, 200, 200, 0) 100%)
}

#image { position: relative; z-index: -1; }
#image > img {
  position: absolute;
}

#webservices-background {
    background: linear-gradient(to bottom, #EF934C 0%, #EA3E32 100%);
}

#resonanz-background {
    background: linear-gradient(to bottom, #FCE9C8 0%, #F2A93B 100%);
}

#gabrus-background {
    background: #FFFFFF;
}

a {
    color: inherit;
}