@charset "UTF-8";

:root {
    --font-family: basic-sans, sans-serif;
    --font-weight: 300;
    --font-weight-bold: 400;
    --font-weight-heavy: 700;
    --color-dark: #28328c;
    --color-light: #dceeee;
    --color-positive: #8ce6d2;
    --color-positive-light: #a3ebdb;
    --color-negative: #e12323;
    --color-negative-light: #e12323;
    --color-black: #000;
    --color-white: #fff;
    --color-gr-light: #595959;
    --color-gr-dark: #2e2e2e;

    --text-color: var(--color-black);
    --head-text-color: var(--color-white);
    --head-bg-color: var(--color-dark);
    --hover-text-color: var(--text-color);
    --hover-bg-color: #f3f3f3;
    --border-color: #dddddd;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul,
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    min-width: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

button, input, select {
    min-width: 0;
    font: inherit;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-size: 100%;
    margin: 0.2rem;
    mix-blend-mode: overlay;
}

* {
    transition: all .25s ease;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
}

div {
    background: none;
}

.flex {
    display: flex;
    flex-direction: row;
}

.flex.col {
    flex-direction: column;
}

.flex > .fg1 {
    flex-grow: 1;
}

.flex > .fg2 {
    flex-grow: 2;
}

.flex > .fg3 {
    flex-grow: 3;
}

.flex > .fg4 {
    flex-grow: 4;
}

.hidden {
    display: none;
}

img {
    margin: 0;
    padding: 0;
    border: none;
    max-width: none;
}

.blend-burn {
    mix-blend-mode: color-burn;
}

.fw {
    width: 100%;
}

.fh {
    height: 100%;
}

/* Background */

@keyframes gradient-animation {
    0% { background-position: 0% 0%; }
    10% { background-position: 30% 25%; }
    20% { background-position: 40% 30%; }
    30% { background-position: 45% 50%; }
    40% { background-position: 60% 75%; }
    50% { background-position: 80% 90%; }
    60% { background-position: 100% 100%; }
    70% { background-position: 50% 80%; }
    80% { background-position: 0% 100%; }
    90% { background-position: 100% 90%; }
    100% { background-position: 0% 0%; }
}

#main {
    padding: 0.3rem;
    height: 100vh;
    background: radial-gradient(circle at 25%, #00bfff 0%, #9400d3 30%, #070725 50%, #cc5d18 75%);
    background-size: 200% 200%;
    animation: gradient-animation 22s linear infinite;
}

@keyframes bgvisual {
    from {
        transform: scale(0) translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    to {
        transform: scale(8) translate(1vw, 2vh) rotate(1440deg) translateY(1px);
        opacity: 0;
    }
}

#bgvisual {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: none;
    overflow: hidden;
}

#bgvisual li {
    position: absolute;
    top: 80vh;
    left: 45vw;
    width: 10px;
    height: 10px;
    color: #fff;
    list-style: none;
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MDBweCIgaGVpZ2h0PSI1MDBweCIgdmlld0JveD0iMCAwIDUwMCA1MDAiPjxkZWZzPjxzdHlsZT4KcGF0aHtmaWxsOmxpZ2h0LWRhcmsocmdiYSgyNTUsMjU1LDI1NSwwLjcpLHJnYmEoMjU1LDI1NSwyNTUsMC43KSk7c3Ryb2tlOmxpZ2h0LWRhcmsocmdiYSgxMDAsMTAwLDIwLDAuOCkscmdiYSgxMDAsMTAwLDIwLDAuOCkpO30KPC9zdHlsZT48L2RlZnM+PGc+PHBhdGggZD0iTSAwIDI1MCBMIDIwMCAyMDAgTCAyNTAgMCBMIDMwMCAyMDAgTCA1MDAgMjUwIEwgMzAwIDMwMCBMIDI1MCA1MDAgTCAyMDAgMzAwIFoiPjwvcGF0aD48cGF0aCBkPSJNIDcwIDI1MCBMIDIxNCAyMTYgTCAyNTAgODAgTCAyODYgMjE2IEwgNDMwIDI1MCBMIDI4NiAyODQgTCAyNTAgNDIwIEwgMjE0IDI4NCBaIiB0cmFuc2Zvcm09InJvdGF0ZSg0NSwyNTAsMjUwKSI+PC9wYXRoPjwvZz48L3N2Zz4=');
    transform-origin: center;
    transform: scale(0) rotate(0deg);
    animation: bgvisual 8s ease-in infinite;
}

#bgvisual li:nth-child(1) {
    animation-delay: 0s;
    left: 6vw;
    top: 9vh;
}

#bgvisual li:nth-child(2) {
    animation-delay: 0s;
    left: 46vw;
    top: 18vh;
}

#bgvisual li:nth-child(3) {
    animation-delay: 0s;
    left: 20vw;
    top: 40vh;
}

#bgvisual li:nth-child(4) {
    animation-delay: 2s;
    left: 60vw;
    top: 28vh;
}

#bgvisual li:nth-child(5) {
    animation-delay: 4s;
    left: 32vw;
    top: 62vh;
}

#bgvisual li:nth-child(6) {
    animation-delay: 6s;
    left: 50vw;
    top: 88vh;
}

#bgvisual li:nth-child(7) {
    animation-delay: 8s;
    left: 90vw;
    top: 48vh;
}

#bgvisual li:nth-child(8) {
    animation-delay: 10s;
    left: 68vw;
    top: 78vh;
}