/*
Theme Name: UniversoIA
Author: Admin_Luis
Version: 1.0
*/

@font-face {
    font-family: 'Bicubik';
    src: url('assets/fonts/Bicubik.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora Variable';
    src: url('assets/fonts/Sora-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-dark: #120d23;
    --color-light: #161c39;
    --text-color: #ffffff;
    --bordercolor: #432a5e;
    --input-bg-light: #fff;
    --outline-primary: #09aec6;
    --placeholder-primary: hsl(254, 50%, 30%);
    --placeholder-secondary: hsla(254, 50%, 30%, 0.5);
    --btn-bg-primary: #0d2c4a;
    --btn-border: #c80afe;
    --btn-bg-hover: var(--btn-border);
    --sidelink-bg-hover: hsl(230, 50%, 30%);
    --header-bg: hsl(250, 50%, 15%);
    --navlink-hover: hsl(250, 50%, 40%);
    --btn-bg: hsl(250, 75%, 30%);
    --btn-hover: hsl(250, 75%, 50%);
    --footer-bg: #111;
    --footer-text: #fff;
    --light-border: hsl(230, 45%, 75%);
}

body {
    font-family: 'Sora Variable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    user-select: none;
}

button,
label,
input[type="checkbox"],
select {
    cursor: pointer;
}

hr {
    width: 100%;
}

img,
label {
    user-select: none;
}

nav {
    display: flex;
    font-size: 1.25rem;
}

button {
    border-radius: 10rem;
    padding: 0.5rem 1rem;
    border: none;
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s, scale 0.2s;
}

button:active {
    scale: 0.98;
}

input,
textarea {
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s ease-in-out;
}

input::placeholder {
    color: var(--placeholder-primary);
    transition: color 0.2s;
}

input:focus-visible::placeholder {
    color: var(--placeholder-secondary);
}

input.inperror {
    border: solid calc(1rem/16) red;
    background-color: #ff000033;
}

input.inperror:focus-visible {
    box-shadow: 0 0 0.5rem red;
}

input.inperror::placeholder {
    color: darkred;
}

textarea {
    resize: vertical;
}

footer {
    text-align: center;
    padding: 1.5rem;
    user-select: none;
}

pre {
    position: fixed;
    top: 0;
    right: 0;
    background-color: #fff;
    color: #000;
    padding: 2rem;
    z-index: 9999;
}

.error {
    color: red;
    background-color: #ff000033;
    border-radius: 0.5rem;
    padding: 0.5em;
    align-self: center;
}

.ok {
    color: lime;
    background-color: hsla(120, 100%, 25%, 0.5);
}

/* eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkZXZlbG9wZXIiOiJMb3VpZSBBbC1DaGFsYWJpIiwid3BfdXNlcm5hbWUiOiJBZG1pbl9MdWlzIiwid3BfdGhlbWUiOiJ1bnZlcnNvaWEiLCJhZG1pbiI6dHJ1ZX0.r9opBYHU9Mjny5GtZTnLSWTqzEHuh3RZWKVDfGMDjCs */