:root{
    color-scheme: light dark;
    --principal     :   #7e5ffb;
    --card          :   #111827
}
@font-face {
    font-family: 'Nacelle';
    src: url('/monkeytimes/resources/fonts/Nacelle-Regular.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Inter';
    src: url('/monkeytimes/resources/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
    font-family: Nacelle, sans-serif;
    border: none;
}
body{
    background-image: url(/monkeytimes/resources/images/page.svg);
    background-color: #030712;
    background-repeat: no-repeat;
    background-position: top right;
}
.d-none{
    display: none;
}
.flex{
    display: flex;
}
.justify-center{
    justify-content: center;
}
.w-50{
    width: 50%;
}
.w-100{
    width: 100%;
}
.max-w-1280{
    max-width: 1280px;
}
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}
.bg-card{
    background: var(--card);
}
.bg-principal{
    background: var(--principal);
}
.p-16{
    padding: 16px;
}
.text-principal{
    color: var(--principal);
}
.fixed {
    position: fixed;
}
.top-0 {
    top: 0;
}
.left-0 {
    left: 0;
}
.right-0{
    right: 0;
}
.justify-between{
    justify-content: space-between;
}
.align-center{
    align-items: center;
}
.bold{
    font-weight: 900;
}
.btn{
    padding: 8px 12px;
    background: var(--principal);
    border-radius: .5rem;
    color: white;
    font-size: 14px;
    font-family: Inter, sans-serif;
    font-weight: 500;
    cursor: pointer;
}
.text-h2{
    font-size: 24px;
}
.text-white{
    color: white;
}
.z-999{
    z-index: 999;
}
.column{
    flex-direction: column;
}
.gap-30{
    gap: 30px;
}
.text-center{
    text-align: center;
}
.w-content{
    width: max-content;
}
.text-right{
    text-align: right;
}
.title{
    font-size: 50px;
}
.p-32{
    padding: 32px;
}
.text-balance{
    text-wrap: balance;
}
.ml-auto{
    margin-left: auto;
}
.mt-200{
    margin-top: 200px;
}
.align-end{
    align-items: flex-end;
}
.mt-30{
    margin-top: 30px;
}

@media (min-width: 768px) {
    .md-flex{
        display: flex;
    }
    .md-w-50{
        width: 50%;
    }
    .mt-30{
        margin-top: 0px;
    }
    .md-text-center{
        text-align: center;
    }
    .md-ml-auto{
        margin-left: auto;
    }
    .md-align-end{
        align-items: flex-end;
    }
    .md-text-right{
        text-align: right;
    }
}