@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

:root {
    --bg-color: hsl(0, 0%, 100%); /* White */
    --card-bg: hsl(0, 0%, 94%); /* Light Gray for card */
    --text-color: hsl(0, 0%, 20%); /* Dark Gray text */
    --point-blue: hsl(200, 80%, 55%); /* Bright Blue */
    --point-purple: hsl(260, 60%, 65%); /* Bright Purple */
    --toggle-bg: hsl(0, 0%, 85%); /* Lighter gray for toggles */
    --toggle-shadow: 0 2px 5px rgba(0,0,0,0.1);
    --card-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Dark mode styles */
body.dark-mode {
    --bg-color: hsl(0, 0%, 0%);
    --card-bg: hsl(0, 0%, 16%);
    --text-color: hsl(0, 0%, 100%);
    --point-blue: hsl(200, 70%, 60%);
    --point-purple: hsl(260, 50%, 70%);
    --toggle-bg: hsl(0, 0%, 25%);
    --toggle-shadow: 0 2px 5px rgba(0,0,0,0.5);
    --card-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 0 40px;
    transition: background 0.3s, color 0.3s;
}

/* --- Toggle Buttons --- */
#theme-toggle, #lang-toggle {
    position: fixed;
    top: 20px;
    background: var(--toggle-bg);
    border: none;
    color: var(--text-color);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    box-shadow: var(--toggle-shadow);
    transition: all 0.3s;
    z-index: 1000;
}

#theme-toggle {
    right: 20px;
}

#lang-toggle {
    right: 75px; /* 20px (right of theme) + 45px (width of theme) + 10px (gap) = 75px */
    font-size: 14px;
    font-weight: bold;
}

#theme-toggle:hover, #lang-toggle:hover {
    transform: scale(1.1);
}

/* --- Main Card Layout --- */
.card {
    background-color: var(--card-bg);
    border-radius: 20px;
    padding: 50px;
    box-shadow: var(--card-shadow);
    max-width: 400px;
    width: 90%; /* Responsive width */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Space between h1 and dinner-roulette */
}

main {
    display: contents; /* Allows main's children to be directly flex items of .card */
}

h1 {
    font-size: 2.5rem; /* Adjusted size */
    font-weight: 700; /* Bold */
    margin: 0; /* Reset margin */
    color: var(--text-color); /* White */
    /* Screenshot implies a solid color, not gradient text for title now */
    /* Remove -webkit-background-clip and -webkit-text-fill-color if present in previous version */
}

/* --- Disqus Comments --- */
#disqus_thread {
    max-width: 500px;
    width: 90%;
    margin: 30px auto;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: var(--card-shadow);
}