@font-face {
    font-family: 'Resolide';
    src: url(./fonts/ResolideSerif.woff2);
}@font-face {
    font-family: 'Caviar + Jeomsim';
    src: url(./fonts/CaviarJeomsim.woff2);
}

@keyframes fade_out {
    from { opacity: 100%; }
    to { opacity: 0; visibility: hidden; }
}
@keyframes fade_out_blur {
    from { opacity: 100%; }
    to { opacity: 0; filter: blur(20px); transform: scale(200%); visibility: hidden; }
}
@keyframes shine {
    from { opacity: 100%; }
    to { opacity: 50%; }
}
@keyframes breathe {
    from { transform: scale(100%); }
    to { transform: scale(102%); }
}
@keyframes appear_bottom {
    from { left: 50%; bottom: 0px; transform: translate(-50%, 100%) scale(80%); opacity: 0; filter: blur(20px); }
    to { left: 50%; bottom: 20px; transform: translate(-50%, 0) scale(100%); opacity: 100%; filter: blur(0); }
}
@keyframes message_appear {
    from { opacity: 0; transform: translate(-50%, -50%) scale(80%); filter: blur(10px); }
    to { opacity: 100%; transform: translate(-50%, -50%) scale(100%); filter: blur(0); }
}
@keyframes message_disappear {
    from { opacity: 100%; transform: translate(-50%, -50%) scale(100%); filter: blur(0); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(120%); filter: blur(10px); }
}

:root {
    --text-colour: #f0edfa;
    --text-font: 'Caviar + Jeomsim';
    --timer-colour: #5d5d84;
    overflow: hidden;
}
body {
    margin: 0;
    background-color: black;
}
canvas {
    width: 100vw; height: 100vh;
    display: block;
}

#welcome_background {
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    display: grid; justify-content: center; align-items: center;
    background-color: #060520;
}
#welcome_box {
    width: fit-content; height: fit-content;
    display: grid; justify-items: left; align-items: center;
    padding: 30px;

    border: 2px solid #a69bd1; border-radius: 40px;
    background: linear-gradient(60deg, #2952708f, #52417592);
    box-shadow: 0 0 70px #a69bd1c6;

    cursor: pointer;
    text-align: left;
}
#welcome_box div {
    width: fit-content;
}
#welcome_box hr {
    width: 110px;
    margin-left: 4px;
    margin-top: 4px;
    margin-bottom: 20px;
    border-color: #dad0f7;
}
#welcome_title {
    background: linear-gradient(60deg, rgb(185, 168, 253) 0%, rgba(244,244,254,1) 100%);
    background-clip: text; -webkit-background-clip: text;
    color: transparent;
    font-family: 'Resolide'; font-size: 38px;
}
#welcome_text {
    color: var(--text-colour);
    font-family: var(--text-font); font-size: 20px;
}
#welcome_action {
    justify-self: center;
    margin-top: 15px;
    color: var(--text-colour);
    font-family: var(--text-font); font-size: 14px; font-style: italic;
}
#timer {
    position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%);
    color: var(--timer-colour);
    text-shadow: 0 0 5px white;
    opacity: 0;
    font-family: 'Caviar + Jeomsim'; font-size: 27px;
}
#message {
    width: fit-content;
    position: absolute; top: 100px; left: 50%; transform: translate(-50%, -50%);
    color: #a0a0cc;
    text-shadow: 0 0 10px white;
    opacity: 0;
    font-family: 'Caviar + Jeomsim'; font-size: 30px;
    white-space: nowrap;
}

.noselect {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.fade_out {
    animation-name: fade_out;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}
.fade_out_blur {
    animation-name: fade_out_blur;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}
.shine {
    animation-name: shine;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
.breathe {
    animation-name: breathe;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
.appear_bottom {
    animation-name: appear_bottom;
    animation-duration: 2.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
.message_appear {
    animation-name: message_appear;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
.message_disappear {
    animation-name: message_disappear;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}