@font-face {
    font-family: 'Rubik';
    src: url('/assets/fonts/Rubik/Rubik-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --primary: #936ca6;
    --primary-fg: #1e151e;
    --shinoa-hair: #9e8da6;
    --color-body: #d2d8de;
    --bg-body: #1e151e;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

@property --position {
    syntax: '<percentage>';
    initial-value: 37%;
    inherits: false;
}

@property --position-2 {
    syntax: '<percentage>';
    initial-value: 44%;
    inherits: false;
}

@property --position-3 {
    syntax: '<percentage>';
    initial-value: 43%;
    inherits: false;
}

body {
    margin: 0;
    font-family: var(--font-sans), sans-serif;
    color: var(--color-body);
    font-weight: 400;
    background-color: var(--bg-body);
    background-image:
            radial-gradient(at 70% var(--position), #7f3036 0px, transparent 50%),
            radial-gradient(at var(--position-2) 58%, #9c914177 0px, transparent 50%),
            radial-gradient(at var(--position-3) 33%, hsla(302,100%,45%,0.53) 0px, transparent 50%);
    animation-name: wave;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes wave {
    0% {
        --position: 37%;
        --position-2: 58%;
        --position-3: 33%;
    }
    50% {
        --position: 55%;
        --position-2: 30%;
        --position-3: 55%;
    }
    100% {
        --position: 37%;
        --position-2: 58%;
        --position-3: 33%;
    }
}


h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h1 { font-size: calc(2.5rem + 1.5vw); }
h2 { font-size: calc(1.325rem + 0.9vw); }
h3 { font-size: calc(1.3rem + 0.6vw); }
h4 { font-size: calc(1.275rem + 0.3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

@media (min-width: 1200px) {
    h1 { font-size: 4rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.how-to-center-a-div {
    display: grid;
    place-items: center;
    block-size: 100dvb;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    max-inline-size: 27.5rem;
    margin-inline: 0.5rem;
    background-color: rgb(0 0 0 / 50%);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgb(0 0 0 / 50%);
}

.img {
    align-self: center;
    block-size: 15rem;
    inline-size: 15rem;
    object-fit: cover;
    border-radius: 2rem;
}

.title {
    background: -webkit-linear-gradient(70deg, var(--primary), var(--shinoa-hair), #de894d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn {
    background-color: var(--primary);
    padding: 1rem 2rem;
    border-radius: 2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--primary-fg);
    font-size: 1.25rem;
    font-weight: 600;
    transition: background-color 150ms ease-in-out;
}

.btn:hover {
    background-color: var(--shinoa-hair);
}