caaard/assets/style.css

:root {
    --background: #13092b;
    --background-transparent: #13092baa;
    --background-2: #090f2b;
    --foreground: #ddd;
    --foreground-bright: #fff;
    --foreground-dim: #aaa;
    --error: orange;
    --accent: #f9027a;
    --accent-dim: hsl(331, 50%, 49%);
}

body {
    font-family: 'Ubuntu', sans-serif;
    color: var(--foreground);
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    text-align: center;
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.background-container {
    z-index: -100;
    position: absolute;
    top: 0vh;
    left: 0vw;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#background {
    position: absolute;
}

.background {
    position: relative;
    top: -5vh;
    left: -5vw;
    width: 110vw;
    height: 110vh;
    background: url(https://ashhhleyyy.dev/assets-gen/background.svg);
    background-size: 1024px;
}

.container {
    margin: 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bubble {
    width: 95vw;
    height: 95vw;
    max-width: 512px;
    max-height: 512px;
    display: grid;
    place-content: center;
    border-radius: 999999px;
    border: 2px solid var(--accent);
    backdrop-filter: blur(4px);
    padding: 16px;
    text-align: center;
    margin-bottom: 16px;
}

.about {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
}

.avatar {
    border-radius: 999999px;
    width: 30vw;
    height: 30vw;
    max-width: 196px;
    max-height: 196px;
}

.icons > * {
    position: relative;
    transition: color 200ms ease;
}

.icons > *:hover {
    text-decoration: none;
}

.icons > :nth-child(2) {
    margin-left: min(3.665vw, 26.5px);
}

.icons > :nth-child(3) {
    margin: 0 min(7.33vw, 53px);
}

.icons > :nth-child(4) {
    margin-right: min(3.665vw, 26.5px);
}

.icons-top {
    margin-bottom: 8px;
    display: flex;
    flex-direction: row;
}

.icons-top > :nth-child(1) {
    top: min(49px, 7.5vw);
}

.icons-top > :nth-child(3) {
    top: max(-24.5px, -3.75vw);
}

.icons-top > :nth-child(5) {
    top: min(49px, 7.5vw);
}

.icons-bottom > :nth-child(1) {
    top: max(-49px, -7.5vw);
}

.icons-bottom > :nth-child(3) {
    top: min(24.5px, 3.75vw);
}

.icons-bottom > :nth-child(5) {
    top: max(-49px, -7.5vw);
}

.hover-accent:hover {
    color: var(--accent);
}

.hover-matrix:hover {
    color: #0DBD8B;
}

.hover-github:hover {
    color: #24292f;
}

.hover-mastodon:hover {
    color: #3c99dc;
}

.hover-reddit:hover {
    color: #ff4500;
}

.hover-twitch:hover {
    color: #6441a5;
}

.hover-gitea:hover {
    color: #609926;
}

.hover-modrinth:hover {
    color: #00af5c;
}

.hover-signal:hover {
    color: #3a76f0;
}

.hover-nucleoid {
    filter: saturate(0);
    transition: filter 200ms ease;
}

.hover-nucleoid:hover {
    filter: saturate(1);
}

.nucleoid {
    width: 2.5em;
    height: 2.5em;
}