@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-color { syntax: "<color>"; initial-value: white; inherits: true; }
@property --gradient-blur  { syntax: "<length>"; initial-value: 0; inherits: true; }
@keyframes rotation { 0% { --gradient-angle: 0deg; } 100% { --gradient-angle: 360deg; } }

:root {
    font-family: 'Ubuntu', 'sans-serif';
    --background: black;
    --foreground: white;
}

html {
    background: var(--background);
    color: var(--foreground);
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

body::before {
    content: '';
    flex-grow: 4;
}

body::after {
    content: '';
    flex-grow: 5;
}

.content {
    padding: 1rem;
    width: calc(100% - 2rem);
    max-width: 35rem;
}

.title {
    font-size: 300%;
    user-select: none;
    margin: 0 0 2rem;
}

.links {
    font-size: 150%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.link {
    --border-width: .25rem;
    --border-radius: .5rem;
    --gradient-color: var(--foreground);

    display: block;
    text-decoration: none;
    padding: var(--border-width);
}

.link:is(:hover, :active) {
    --gradient-color: red;
    --gradient-blur: .25rem;
}

.link-content {
    padding: .75rem;
    border-radius: var(--border-radius);
    background: var(--background);
    color: var(--foreground);
    display: flex;
    align-items: center;
    position: relative;
}

.link-content::before, .link-content::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--border-width));
    z-index: -1;
    border-radius: calc(var(--border-width) + var(--border-radius));
    animation: rotation 5s linear infinite;
    background: conic-gradient(from var(--gradient-angle) in hsl longer hue, var(--gradient-color) 0 0);
    transition: --gradient-color .125s linear, --gradient-blur .125s linear;
}

.link-content::after {
    filter: blur(var(--gradient-blur));
}

.icon {
    fill: var(--foreground);
    height: 1.5rem;
    width: 1.5rem;
    margin-right: 0.5rem;
}