/* =========================
   RESET / GLOBAL
========================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
}

body{

    font-family:Arial,sans-serif;

    background:
        radial-gradient(
            circle at top left,
            rgba(56,239,125,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(59,130,246,.10),
            transparent 30%
        ),
        #020617;

    color:white;

    min-height:100vh;

    overflow-x:hidden;
}

a{

    text-decoration:none;

    color:inherit;
}

button{

    font-family:inherit;
}

/* =========================
   TYPOGRAPHY
========================= */

h1{

    color:#38ef7d;

    line-height:1;
}

h2,
h3,
h4,
h5{

    color:white;
}

p{

    color:#cbd5e1;

    line-height:1.6;
}

/* =========================
   GLOBAL LAYOUT
========================= */

.container{

    width:min(1400px,92%);

    margin:auto;
}

.main-layout{

    display:flex;

    min-height:100vh;
}

.main-content{

    flex:1;

    padding:34px;
}

/* =========================
   GLOBAL BUTTONS
========================= */

.btn{

    border:none;

    cursor:pointer;

    transition:.25s ease;

    font-weight:bold;
}

.btn:hover{

    transform:
        translateY(-2px);
}

/* =========================
   TOAST
========================= */

.toast{

    position:fixed;

    right:30px;

    bottom:30px;

    padding:18px 24px;

    border-radius:18px;

    color:white;

    font-weight:bold;

    z-index:99999;

    opacity:0;

    transform:
        translateY(20px);

    transition:.3s;
}

.toast.show{

    opacity:1;

    transform:
        translateY(0);
}

.toast.success{

    background:#16a34a;
}

.toast.error{

    background:#dc2626;
}

/* =========================
   SPINNER
========================= */

.spinner{

    width:18px;

    height:18px;

    border:
        2px solid rgba(255,255,255,.3);

    border-top:
        2px solid white;

    border-radius:50%;

    animation:spin 1s linear infinite;
}

@keyframes spin{

    to{

        transform:rotate(360deg);
    }
}

/* =========================
   UTILITIES
========================= */

.text-center{

    text-align:center;
}

.hidden{

    display:none;
}

.fade{

    opacity:.7;
}