@charset "UTF-8";

@font-face {
    font-family: Comfortaa;
    src: url('assets/fonts/comfortaa.ttf');
}

/* @formatter:off */
:root {
    --base        : 0, 0, 0;
    --mantle      : 0, 0, 0;
    --crust       : 0, 0, 0;
    --text        : 0, 0, 0;
    --pink        : 0, 0, 0;
    --purple      : 0, 0, 0;
    --red         : 0, 0, 0;
    --light_red   : 0, 0, 0;
    --orange      : 0, 0, 0;
    --yellow      : 0, 0, 0;
    --green       : 0, 0, 0;
    --light_green : 0, 0, 0;
    --blue        : 0, 0, 0;
    --light_blue  : 0, 0, 0;
}
/* @formatter:on */

html * {
    font-family: Comfortaa, 'Verdana Pro', 'Verdana', 'Courier New', Courier, monospace;
    color: rgb(var(--text));
    scrollbar-color: rgb(var(--purple)) rgb(var(--mantle));
    scrollbar-width: auto;
    z-index: 1 !important;
}

.profile-bio {
    text-align: left;
}

canvas {
    background-color: var(--base);
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 0 !important;
}

rect {
    shape-rendering: geometricPrecision;
    fill-opacity: 0.1;
    stroke: black;
    stroke-width: 2px;
    stroke-opacity: 1.0;
}

::-webkit-scrollbar-track {
    background-color: rgb(var(--mantle));
    border-radius: 50%;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(var(--purple));
    border-radius: 50%;
}

body {
    background-color: rgba(var(--base), 1.0);
    z-index: -1;
}

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    height: max-content;
}

::-moz-selection {
    background: rgba(var(--purple), 0.3125);
    color: rgb(var(--text));
}

::selection {
    background: rgba(var(--purple), 0.3125);
    color: rgb(var(--text));
}

/* @formatter:off */
.no-break 	{ white-space: nowrap; }
.no-break * { display:     inline; }
/* @formatter:on */

.flexbox {
    display: inline-block;
    align-items: center;
    width: fit-content;
    height: fit-content;

    text-align: center;

    align-content: center;

    background-color: rgba(var(--mantle), 0.3125);
    filter: drop-shadow(0 0 2px rgba(var(--crust), 1.0));

    border-style: wave;
    border-radius: 4px;
    animation: header_hover_in 0.3125s forwards;
}

.header:before {
    animation: none;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: rgb(var(--mantle));

    border-style: wave;
    border-radius: 4px;
    animation: header_hover_in 0.3125s forwards;
}

.header:hover {
    animation: header_hover_out 0.6125s forwards;
}

@keyframes header_hover_in {
    from {
        box-shadow: -1px -1px 2px rgba(var(--purple), 0.45),
        1px -1px 2px rgba(var(--purple), 0.45),
        -1px 1px 2px rgba(var(--purple), 0.45),
        1px 1px 2px rgba(var(--purple), 0.45);
    }
    to {
        box-shadow: -1px -1px 2px rgba(var(--crust), 1.0),
        1px -1px 2px rgba(var(--crust), 1.0),
        -1px 1px 2px rgba(var(--crust), 1.0),
        1px 1px 2px rgba(var(--crust), 1.0);
    }
}

@keyframes header_hover_out {
    from {
        box-shadow: -1px -1px 2px rgba(var(--crust), 1.0),
        1px -1px 2px rgba(var(--crust), 1.0),
        -1px 1px 2px rgba(var(--crust), 1.0),
        1px 1px 2px rgba(var(--crust), 1.0);
    }
    to {
        box-shadow: -1px -1px 2px rgba(var(--purple), 0.45),
        1px -1px 2px rgba(var(--purple), 0.45),
        -1px 1px 2px rgba(var(--purple), 0.45),
        1px 1px 2px rgba(var(--purple), 0.45);
    }
}

.header_logo {
    margin-left: 12px;
}

.header_buttons {
    margin-right: 12px;
}

.header_buttons button {
    border-radius: 4%;
    background-color: rgb(var(--base));
    border: 2px solid rgb(var(--crust));
    animation: header_buttons_hover_out 0.45s forwards;
}

.header_buttons button:hover {
    box-shadow: -1px -1px 2px rgba(var(--purple), 0.45),
    1px -1px 2px rgba(var(--purple), 0.45),
    -1px 1px 2px rgba(var(--purple), 0.45),
    1px 1px 2px rgba(var(--purple), 0.45);
    animation: header_buttons_hover_in 0.45s forwards;
}

@keyframes header_buttons_hover_in {
    from {
        box-shadow: -1px -1px 2px rgba(var(--purple), 0.0),
        1px -1px 2px rgba(var(--purple), 0.0),
        -1px 1px 2px rgba(var(--purple), 0.0),
        1px 1px 2px rgba(var(--purple), 0.0);
    }
    to {
        box-shadow: -1px -1px 2px rgba(var(--purple), 0.45),
        1px -1px 2px rgba(var(--purple), 0.45),
        -1px 1px 2px rgba(var(--purple), 0.45),
        1px 1px 2px rgba(var(--purple), 0.45);
    }
}

@keyframes header_buttons_hover_out {
    from {
        box-shadow: -1px -1px 2px rgba(var(--purple), 0.45),
        1px -1px 2px rgba(var(--purple), 0.45),
        -1px 1px 2px rgba(var(--purple), 0.45),
        1px 1px 2px rgba(var(--purple), 0.45);
    }
    to {
        box-shadow: -1px -1px 2px rgba(var(--purple), 0.0),
        1px -1px 2px rgba(var(--purple), 0.0),
        -1px 1px 2px rgba(var(--purple), 0.0),
        1px 1px 2px rgba(var(--purple), 0.0);
    }
}

.footer:before {
    animation: none;
}

.footer {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;

    background-color: rgb(var(--mantle));

    left: 8px;
    bottom: 8px;
    width: calc(100% - 16px);
    max-width: 100%;
    height: 48px;

    border-style: wave;
    border-radius: 4px;
    animation: header_hover_in 0.3125s forwards;
}

.footer:hover {
    animation: header_hover_out 0.6125s forwards;
}

.socials {
    image-rendering: auto;
}

.socials img {
    margin: auto;
    padding: 4px;
    image-rendering: high-quality;
    image-resolution: from-image;
    filter: invert(100%); /* TODO: ... | better workaround */
}

.socials i {
    margin: auto;
    padding: 4px;
    image-rendering: high-quality;
    image-resolution: from-image;
    font-size: x-large;
    animation: image_buttons_hover_in 0.3125s forwards;
}

.socials i:hover {
    animation: image_buttons_hover_out 0.3125s forwards;
}

/* @formatter:off */
@keyframes image_buttons_hover_in {
    from { color: rgb(var(--blue)); }
    to   { color: rgb(var(--text)); }
}

@keyframes image_buttons_hover_out {
    from { color: rgb(var(--text)); }
    to   { color: rgb(var(--blue)); }
}
/* @formatter:on */
