:root {
    --rosewater: #f5e0dc;
    --flamingo: #f2cdcd;
    --pink: #f5c2e7;
    --mauve: #cba6f7;
    --red: #f38ba8;
    --maroon: #eba0ac;
    --peach: #fab387;
    --yellow: #f9e2af;
    --green: #a6e3a1;
    --teal: #94e2d5;
    --sky: #89dceb;
    --sapphire: #74c7ec;
    --blue: #89b4fa;
    --lavender: #b4befe;
    --text: #cad3f5;
    --subtext1: #b8c0e0;
    --subtext0: #a6adc8;
    --overlay2: #9399b2;
    --overlay1: #7f849c;
    --overlay0: #6c7086;
    --surface2: #585b70;
    --surface1: #45475a;
    --surface0: #313244;
    --base: #24273a;
    --mantle: #1e1e2e;
    --crust: #181825;
}

body {
    background-color: var(--base);
    color: var(--text);
    font-family: 'Georgia', 'Times New Roman', Times, serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.frame {
    background-color: var(--mantle);
    border: 10px solid var(--surface1);
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    width: 60%;
    max-width: 800px;
    text-align: center;
}

#quote-container {
    min-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#quote-text {
    font-size: 2em;
    font-style: italic;
    opacity: 1;
    transition: opacity 1.5s ease-in-out;
}

#quote-text.fade-out {
    opacity: 0;
}