@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --bg: #0c0818;
    --fg: #e2dcf0;
    --panel: #332a4e35;
    --primary: #9f84e2;
    --secondary: #3b179365;
    --primary-hover: #8164ca;
    --secondary-hover: #4f2ba865;
    --accent: #6d39ee;
    --accent-invisible: #6d39ee00;
    --primary-text: #0c0818;
    --secondary-text: #e2dcf0;
    --accent-text: #e2dcf0; /* don't put text on accent, contrast is worse than the taste of a llama's spit */
}

/* mobile-first design is used */

/* rubik is old, WE USE NOTO NOW
@font-face {
    font-family: 'Noto Sans';
    src: url(/font);
}*/

/* if you don't like profanity, don't look through these comments */
/* that is your first and last warning */
/* yes i am using individual /* for consecutive lines */
body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Noto Sans';
    font-weight: 400;
    overflow: hidden;
}

/* glowing text*/
.text-glow {
    color: var(--fg);
    text-shadow: 0px 0px 32px var(--fg);
}

/* im fucking addicted to panel style shit i swear */
.panel {
    border-radius: .75rem; /* ==: sleek and modern :== */
    text-align: center;
    margin: .5rem; /* i heard somewhere that there needs to be a leading 0, but i dont get a warning so fuck it */
    padding: .375rem;
    background: var(--panel);
    backdrop-filter: blur(1rem) saturate(65%);
}
.panel-invisible {
    text-align: center;
    margin: .5rem;
    padding: .375rem;
    background: none;
}
.panel-invis-full {
    text-align: center;
    margin: .5rem;
    padding: .375rem;
    background: none;
    height: 100vh;
    position: relative;
    z-index: 40;
    vertical-align: middle;
}
.panel-login {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: .375rem;
    background: var(--panel);
    width: 12rem;
    border-radius: .75rem;

    backdrop-filter: blur(16px) saturate(65%);
    -webkit-backdroup-filter: blur(16px) saturate(65%); /* am pro backwards compatibility */
}
.centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.panel-text {
    width: min(50rem, 100%);
}

/* haha whats h1 */
.header {
    margin: .1rem;
    padding: 0;
    font-weight: 700;
    font-size: 2.25rem;
    text-align: center;
    margin-bottom: 5rem;
}

/* inputs */
input {
    background: var(--secondary);
    border-radius: .625rem;
    margin: 0;
    padding: .125rem;
    width: calc(100% - .5rem);
    color: var(--fg);
    font-family: 'Noto Sans';
    font-weight: 400;
    height: 2rem;
    border: none;
}
button {
    background: var(--secondary);
    border-radius: .625rem;
    margin: 0;
    padding: .125rem;
    width: calc(100% - .5rem);
    color: var(--fg);
    font-family: 'Noto Sans';
    font-weight: 600;
    height: 2rem;
    border: none;
    cursor: pointer;
    transition: background-color linear .15s;
}
button:hover {
    background-color: var(--secondary-hover);
}
.btn-primary {
    background-color: var(--primary-hover);
}
.btn-primary:hover {
    background-color: var(--secondary-hover);
}

/* text */
p {
    margin: .125rem 0;
}
h1 {
    margin: .25rem 0;
    font-size: 1.75rem;
    font-weight: 700;
}
h4 {
    margin: .125rem 0;
    font-size: 1.125rem;
    font-weight: 700;
}

/* desktop design shit goes here */
@media (min-width: 601px) {
    .header {
        font-size: 5rem;
    }
}