@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Figtree:ital,wght@0,300..900;1,300..900&family=Lexend:wght@100..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    font-size: 16px;
    
    --assistant-ff: "Assistant", sans-serif;;
    --figtree-ff: "Figtree", sans-serif;;
    --libre-ff: "Libre Baskerville", serif;
    --lexend-ff: "Lexend", sans-serif;;

    --body-bg: hsl(0, 0%, 10%);

    --bannana-yellow: #ffe28e;
    --dk-purple: #7059f3;
    --lt-purple: #ada0f8;
}
*::before, *::after {
    box-sizing: border-box;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--assistant-ff);
    color: #fff;
}
body {
    background: var(--body-bg);
}
h1,h2,h3,h4,h5,h6 {
    text-transform: uppercase;
    font-family: var(--figree-ff);
}
p, a {
    word-wrap: break-word;
    white-space: pre-wrap;
    text-wrap: pretty;
}
p, li {
    line-height: 1.5;
}
li {
    list-style-position: inside;
}
img {
    max-width: 100%;
    display: block;
}
button {
    border: none;
    cursor: pointer;
    font-size: 1rem;
    background: none;
}
input {
    border: none;
}
/* Keyframes */
.animate-onView {
    visibility: hidden;
}
@keyframes onView {
    0% {
        transform: scale(0);
        opacity: .5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/*---- Scrollbar ----*/
::-webkit-scrollbar {
   display: none;
}
::-webkit-scrollbar-track {
    display: none;
}
::-webkit-scrollbar-thumb {
    display: none;
}
/*---- Layout ----*/
.grid-auto-fill {
    --grid-min-col-size: 300px;
    
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min-col-size), 100%), 1fr));
    gap: 1rem;
}
/*---- Line Clamp ----*/
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* height: 7.5ex;
    line-height: 2.5ex; */
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
/*---- Hard Coded Styling ----*/
.all-sides-mask {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 50%, black calc(100% - 50%), transparent 100%), linear-gradient(to top, transparent 0, black 50%, black calc(100% - 50%), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 50%, black calc(100% - 50%), transparent 100%), linear-gradient(to top, transparent 0, black 50%, black calc(100% - 50%), transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mask-composite: intersect;
}
.js__modal-b {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    max-width: 30rem;
    width: calc(100% - 2rem);
    background: var(--surface-bg);
    border: 1px solid var(--surface-highlight);
    z-index: 2;
}
.js__modal-b.is-open {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    pointer-events: auto !important;
}
.js__modal-b__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(5px);
    z-index: 1;
    display: none;
}