@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    color: var(--primary);
    font-family: Poppins;
    font-weight: 300;
    font-size: 24px;
    margin: 0;
    padding: 0;
    scrollbar-width: 0px;
}

:root {
    --primary: #dddddd;
    --secondary: #cccccc;
    --tertiary: #777777;

    --profile-bg: linear-gradient(#080808, #121212);
    --profile-popout: linear-gradient(#121212, #1b1b1b);
    --profile-border: linear-gradient(#949494, #2b2b2b);
    --profile-shadow: #4f4f4f;
    --page-bg: linear-gradient(#010101, #0e0e0e);

    --width: min(86vw, max(30vw, 450px));
    --height: min(85vh, 900px);

    --corner-radius: calc(var(--width) * 0.03);
}

#backdrop {
    background-image: var(--page-bg);
    inset: 0;
    position: fixed;
    top: 0;
}

#backdrop-image {
    opacity: 10%;
    position: fixed;
    inset: 0;
    background-image: url(assets/backdrop.png);
    background-size: cover;
}

#container {
    width: 100vw;
    height: auto;
    overflow: hidden;
    padding-top: calc(100vh - var(--height) - 1px);
}

#card {
    margin: auto;
    background-image: var(--profile-border);
    box-shadow: 0 0 160px var(--profile-shadow);
    width: var(--width);
    height: var(--height);
    border-radius: calc(var(--corner-radius) * 2.1);
    transform: translateY(calc(var(--corner-radius) + 8px));
}

#card-container {
    overflow: hidden;
    background-image: var(--profile-bg);
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    transform: translate(1px, 1px);
    background-color: black;
    border-radius: calc(var(--corner-radius) * 2.1);
}

#banner {
    background-image: url("assets/banner.png");
    background-size: cover;
    width: 100%;
    aspect-ratio: 2.7;
}

#icon {
    width: 28%;
    aspect-ratio: 1;
    border-radius: 9999px;
    background-position-y: calc(var(--width) * -0.25);
    background-image: var(--profile-bg);
    background-size: var(--width) var(--height);
    transform: translate(10%, calc(-1 * var(--width) * 0.13));
}

#icon-container {
    width: calc(100% - calc(var(--width) * 0.04));
    transform: translateY(calc(var(--width) * 0.02));
    aspect-ratio: 1;
    margin: auto;
    background-size: cover;
    background-image: url(assets/profile.png);
    border-radius: 9999px;
}

#idle, #idle-container, #idle-clip {
    aspect-ratio: 1;
    background-color: white;
    border-radius: 9999px;

    margin-left: auto;
}

#quote {
    width: 54%;
    transform: translate(55%, calc(var(--width) * -0.32));
    font-size: calc(var(--width) * 0.03);
    font-weight: 500;
    padding: calc(var(--width) * 0.025) calc(var(--width) * 0.03);
    background-image: var(--profile-popout);
    border-radius: var(--corner-radius);
    box-shadow: 0 0 16px black;
}

#quote-bubble {
    width: 3%;
    aspect-ratio: 1;
    border-radius: 9999px;
    background-image: var(--profile-popout);
    box-shadow: 0 0 16px black;
    transform: translate(calc(var(--width) * 0.31), calc(var(--width) * -0.31));
}

#username {
    transform: translate(-6%, calc(var(--width) * -0.33));
    font-size: calc(var(--width) * 0.03);
    color: var(--tertiary);
    text-align: right;
}
#username b {
    font-size: calc(var(--width) * 0.04);
    font-weight: 400;
}

#bio {
    font-size: calc(var(--width) * 0.028);
    color: var(--secondary);
    transform: translate(6%, calc(var(--width) * -0.28));
}

#section {
    padding: calc(var(--width) * 0.02) calc(var(--width) * 0.04);
    background-image: var(--profile-popout);
    border-radius: var(--corner-radius);
    box-shadow: 0 0 16px black;
    padding-bottom: calc(var(--width) * 0.03);
    margin: 0 5%;
    transform: translateY(calc(var(--width) * -0.22));
    margin-bottom: calc(var(--width) * 0.02);
}

#section h4, #section span {
    font-size: calc(var(--width) * 0.028);
    color: var(--secondary);
}

#section > #title {
    font-size: calc(var(--width) * 0.03);
    font-weight: 500;
    margin-bottom: calc(var(--width) * 0.02);
}

#dot {
    width: 2px;
    height: 2px;
    background-color: var(--secondary);
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
}

#dash {
    width: 4px;
    height: 1px;
    background-color: var(--secondary);
    display: inline-block;
    margin-right: 6px;
}

a {
    font-size: calc(var(--width) * 0.028);
    color: var(--tertiary);
}

h5 {
    margin: 0 6%;
    transform: translateY(calc(var(--width) * -0.2));
}

h5 span {
    font-size: calc(var(--width) * 0.028);
    color: var(--secondary);
    margin-right: 12px;
}

a:hover {
    color: var(--secondary);
}