@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
/* icones */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
/* font-family: "Roboto Mono", monospace; */

@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap");
/* font-family: "Public Sans", sans-serif; */

@import url("https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&display=swap");
/* font-family: "Special Gothic Expanded One", sans-serif; */

:root {
    --blackglass: #0000007a;
    --font: #a4a5a6;
    --bg-dark: #0a0b0d;
    --bg-light: #2d3540;
    --btn: #84e9ff;
    --btn-dark: #1c2026;
    --against-color: #84e9ffa7;
}

::-webkit-scrollbar {
    display: none;
}

* {
    margin: 0;
    padding: 0;
    font-family: "Roboto Mono", monospace;
    color: var(--font);
    list-style: none;
    text-decoration: none;
}

body {
    overflow-x: hidden;
    background: linear-gradient(
        130deg,
        var(--bg-dark) 50%,
        var(--bg-light) 200%
    );
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 100vh;
}

#btn,
.btn {
    cursor: pointer;
    background-color: var(--btn);
    padding: 1.5dvh;
    font-size: 1.2em;
    border-radius: 10dvw;
    transition: 0.3s;
}

#btn:hover,
.btn:hover {
    background-color: var(--btn-dark);
}