/* Import fonts from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Inter:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap');

/* Define the Branding colors and spacing system */
:root {
    --deep-purple: #22113E;
    --gray-green: #CAD8D8;
    --pink: #EA7DFF;
    --turquoise: #08F2DB;

    /* Spacing system */
    --space-xs: 0.5rem;  /* Small space */
    --space-sm: 1rem;    /* Medium space */
    --space-md: 2rem;    /* Large space */
    --space-lg: 3rem;    /* Extra-large space */
    --space-xl: 4rem;    /* Extra-extra-large space */

    /* Font sizes */
    --font-size-base: 1rem;
    --font-size-large: 1.25rem;
    --font-size-xlarge: 1.5rem;
}

body {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: var(--font-size-base);
    color: var(--deep-purple);
    text-align: center;
    margin: var(--space-md);
}

h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    margin-bottom: var(--space-sm);
}

h2 {
    font-family: 'Courier Prime', monospace;
    font-weight: 400;
    font-size: var(--font-size-xlarge);
    margin-bottom: var(--space-xs);
}

h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-large);
    margin-bottom: var(--space-sm);
}

p, ul, li, ol {
    line-height: 1.8;
    margin-bottom: var(--space-sm);
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

a { 
    color: var(--pink);
    transition: color 0.3s;
}

a:hover {
    color: var(--turquoise);
}

div {
    margin: var(--space-xs) 0;
}

button {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-base);
    cursor: pointer;
    background-color: var(--pink);
    color: var(--deep-purple);
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.2s;
}

button:hover {
    background-color: var(--turquoise);
    color: var(--deep-purple);
    transform: scale(1.05);
}

#rapBattleResult {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background-color: var(--gray-green);
    color: var(--deep-purple);
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-large);
    line-height: 1.8;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    white-space: pre-wrap;
}

/* Font styles */
.font-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
}

.font-highlight {
    font-family: 'Courier Prime', monospace;
    font-weight: 400;
}

.font-text {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
}

/* Font-size classes */
.fs-1 {
    font-size: 1rem; 
}

.fs-2 {
    font-size: 1.25rem;
}

.fs-3 {
    font-size: 1.5rem;
}

/* Colors */
.deep-purple {
    color: var(--deep-purple);
}

.bg-deep-purple {
    background-color: var(--deep-purple);
}

.gray-green {
    color: var(--gray-green);
}

.bg-gray-green {
    background-color: var(--gray-green);
}

.pink {
    color: var(--pink);
}

.bg-pink {
    background-color: var(--pink);
}

.turquoise {
    color: var(--turquoise);
}

.bg-turquoise {
    background-color: var(--turquoise);
}

/* Image width and height classes */
.w-100 {
    width: 100%;
}

.w-75 {
    width: 75%;
}

.w-50 {
    width: 50%;
}

.w-25 {
    width: 25%;
}

.h-100 {
    height: 100%;
}

.h-75 {
    height: 75%;
}

.h-50 {
    height: 50%;
}

.h-25 {
    height: 25%;
}

/* Gradients */
.discreet-gradient {
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* Padding classes using the spacing system */
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: var(--space-xs) !important;
}

.p-2 {
    padding: var(--space-sm) !important;
}

.p-3 {
    padding: var(--space-md) !important;
}

.p-4 {
    padding: var(--space-lg) !important;
}

.p-5 {
    padding: var(--space-xl) !important;
}

/* Margin classes using the spacing system */
.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: var(--space-xs) !important;
}

.m-2 {
    margin: var(--space-sm) !important;
}

.m-3 {
    margin: var(--space-md) !important;
}

.m-4 {
    margin: var(--space-lg) !important;
}

.m-5 {
    margin: var(--space-xl) !important;
}

/* More specific padding/margin utility classes */
.py-1 {
    padding-top: var(--space-xs) !important;
    padding-bottom: var(--space-xs) !important;
}

.py-2 {
    padding-top: var(--space-sm) !important;
    padding-bottom: var(--space-sm) !important;
}

.py-3 {
    padding-top: var(--space-md) !important;
    padding-bottom: var(--space-md) !important;
}

.py-4 {
    padding-top: var(--space-lg) !important;
    padding-bottom: var(--space-lg) !important;
}

.pb-2 {
    padding-bottom: var(--space-sm) !important;
}

.pb-3 {
    padding-bottom: var(--space-md) !important;
}

.pb-4 {
    padding-bottom: var(--space-lg) !important;
}

.pt-1 {
    padding-top: var(--space-xs) !important;
}

.pt-2 {
    padding-top: var(--space-sm) !important;
}

.pt-3 {
    padding-top: var(--space-md) !important;
}

/* Consistent media queries for small devices */
@media (max-width: 768px) {
    body {
        padding: var(--space-sm);
    }

    h1, h2, h3 {
        font-size: var(--font-size-base);
    }

    #rapBattleResult {
        font-size: var(--font-size-base);
    }
}