:root {
    --text-50: #f9ecf0;
    --text-100: #f2d9e1;
    --text-200: #e6b3c3;
    --text-300: #d98ca6;
    --text-400: #cc6688;
    --text-500: #bf406a;
    --text-600: #993355;
    --text-700: #732640;
    --text-800: #4d192a;
    --text-900: #260d15;
    --text-950: #13060b;

    --background-50: #faebee;
    --background-100: #f5d6dd;
    --background-200: #ebadbb;
    --background-300: #e08598;
    --background-400: #d65c76;
    --background-500: #cc3354;
    --background-600: #a32943;
    --background-700: #7a1f32;
    --background-800: #521422;
    --background-900: #290a11;
    --background-950: #140508;

    --primary-50: #faeaef;
    --primary-100: #f6d5df;
    --primary-200: #edabbf;
    --primary-300: #e3829f;
    --primary-400: #da587f;
    --primary-500: #d12e5f;
    --primary-600: #a7254c;
    --primary-700: #7d1c39;
    --primary-800: #541226;
    --primary-900: #2a0913;
    --primary-950: #150509;

    --secondary-50: #fbe9ef;
    --secondary-100: #f8d3de;
    --secondary-200: #f1a7bd;
    --secondary-300: #ea7b9c;
    --secondary-400: #e2507c;
    --secondary-500: #db245b;
    --secondary-600: #af1d49;
    --secondary-700: #841536;
    --secondary-800: #580e24;
    --secondary-900: #2c0712;
    --secondary-950: #160409;

    --accent-50: #fce8ee;
    --accent-100: #fad1dd;
    --accent-200: #f5a3bc;
    --accent-300: #f0759a;
    --accent-400: #eb4778;
    --accent-500: #e61957;
    --accent-600: #b81445;
    --accent-700: #8a0f34;
    --accent-800: #5c0a23;
    --accent-900: #2e0511;
    --accent-950: #170309;
}

body {
    background-color: var(--background-50);
    font-family: 'ClashDisplay-Variable';
}

#logo-front {
    width: 124px;
    height: 124px;
    filter: drop-shadow(0 0 0.75rem var(--accent-200));
}

#front {
    width: 100%;
    display: flex;
    padding-top: 200px;
    justify-content: flex-start;
    align-items: center;
    height: 50vh;
    flex-direction: column;
    font-size: 24px;
    gap: 24px;
}

#front-text {
    max-width: 50%;
    text-align: justify;
    text-align-last: justify;
    background: linear-gradient(45deg, #b93d46, #f60040);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; 
    display: inline-block;
}

#front-subtext {
    color: var(--text-700);
    max-width: 50%;
}

#front-download {
    border: none;
    background-color: var(--accent-500);
    padding: 8px 16px;
    color: var(--text-50);
    border-radius: 18px;
    font-size: 18px;
    cursor: pointer;
}

#front-download-subtext {
    font-size: 14px;
    color: var(--text-700);
}