/*
Classic diner red: #D32F2F
Retro yellow: #FBC02D
Dark diner countertop: #37474F
White: #FFFFFF
Black: #000000
*/

/* Import a retro diner-style font */
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Luckiest+Guy&family=Roboto:wght@300;400;700&display=swap');

/* Importing Poppins font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

body {
    background-color: #F8E9A1; /* Warm, vintage cream background */
    color: #4A0908; /* Deep red-brown text */
    font-family: 'Poppins', sans-serif; /* Using Poppins font */
    margin: 0;
    padding: 20px;
}

li {
    font-family: 'Poppins', sans-serif; /* Using Poppins font */
    color: 37#474F;
}

h1 {
    font-family: 'Luckiest Guy', cursive; /* Playful retro font */
    font-size: 5rem;
    color: #D32F2F;
    text-shadow: 2px 2px #F4A261; /* Slight shadow for pop */
    text-align: center;
    letter-spacing: 0.05em; /* Adjusts the tracking slightly */
}

h2 {
    font-family: 'Lobster', cursive; /* Classic diner-style script */
    font-size: 2.5rem;
    color: #D72638; /* Bold retro red */
    text-shadow: 2px 2px #F4A261; /* Slight shadow for pop */
    margin-bottom: 10px;
}

h3 {
    font-family: 'Luckiest Guy', cursive; /* Playful retro font */
    font-size: 2rem;
    color: #3E92CC; /* Vibrant blue for contrast */
    margin-top: 20px;
}

/* Change background color of inactive tabs */
.ui-tabs .ui-tabs-nav li {
    background: #D32F2F; /* Classic diner red */
    border: 2px solid #FBC02D; /* Retro yellow border */
    border-radius: 5px 5px 0 0;
    padding: 8px;
}

/* Change text color of inactive tabs */
.ui-tabs .ui-tabs-nav li a {
    color: #FFFFFF; /* White text for contrast */
    font-family: 'Poppins', sans-serif; /* Stylish sans-serif font */
    text-transform: uppercase;
}

/* Change background color of active tab */
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background: #FBC02D; /* Retro yellow */
    border-bottom: none;
}

/* Change text color of active tab */
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    color: #000000; /* Black text for contrast */
}

/* Add a subtle shadow for a vintage touch */
.ui-tabs .ui-tabs-nav {
    background: #37474F; /* Dark diner countertop */
    padding: 5px;
    border-radius: 10px 10px 0 0;
}