@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

:root {
    --primary-color: #6B54EB;

    --secondary-color: #202244;

    --tertiary-color: #343661;

    --light-color: #F1F7FE;

    --dark-color: #161730;

    --border: #37385C;

    --orange: #E9A658;
}

*,
html {
    scroll-behavior: smooth;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

body {
    /* background: #161730;
    background: linear-gradient(135deg, rgba(68, 70, 117, 1) 0%, rgba(22, 23, 48, 1) 83%); */
    background: rgba(22, 23, 48, 1);
    /* background: linear-gradient(135deg, rgba(68, 70, 117, 1) 0%, rgba(22, 23, 48, 1) 83%); */
    margin: auto;
    max-width: 430px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0px 0px 2px var(--border);
    color: var(--light-color);
}

@media (max-width: 430px) {
    body {
        max-width: 100vw;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.bg-secondary {
    background-color: var(--secondary-color);
}

.bg-primary {
    background-color: var(--primary-color);
}

.bg-tertiary {
    background-color: var(--tertiary-color);
}

.bg-light {
    background-color: var(--light-color);
}

.bg-dark {
    background-color: var(--dark-color);
}

.bg-orange {
    background-color: var(--orange);
}

.text-primary {
    color: var(--primary-color);
}

.text-secondary {
    color: var(--secondary-color);
}

.color-border {
    color: var(--border);
}

.shadow-primary {
    box-shadow: 0px 2px 5px var(--primary-color);
}

.shadow-secondary {
    box-shadow: 0px 2px 5px var(--secondary-color);
}

.bg-gradient {
    background: #C979FF;
    background: linear-gradient(145deg, rgba(201, 121, 255, 1) 0%, rgba(105, 86, 229, 1) 100%);
}

.bg-gradient-2 {
    background: #C979FF;
    background: linear-gradient(-145deg, rgba(201, 121, 255, 1) 0%, rgba(105, 86, 229, 1) 100%);
}

.bg-gradient-3 {
    background: #6956E5;
    background: radial-gradient(circle, rgba(105, 86, 229, 1) 55%, rgba(201, 121, 255, 1) 28%);
}

#menu {
    transition: opacity 0.2s;
    opacity: 0;
    pointer-events: none;
}

#menu.active {
    opacity: 1;
    pointer-events: auto;
}

#reward {
    transition: opacity 0.25s, transform 0.25s;
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
    pointer-events: none;
}

#reward.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

#buy-section {
    transition: opacity 0.2s;
    opacity: 0;
    pointer-events: none;
}

#buy-section.active {
    opacity: 1;
    pointer-events: auto;
}

#buy-token {
    transition: opacity 0.25s, transform 0.25s;
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
    pointer-events: none;
}

#buy-token.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}