/* --- START OF FILE skilline.css --- */

/* 
   BACKGROUND 
   Changed from yellow-cream to a clean off-white/minty-white 
   to make the Green and Red logo colors stand out.
*/
.bg-cream {
    background-color: #ffdbe2;
}

/* FONT */
body {
    font-family: 'Poppins', sans-serif;
}

/* 
   PRIMARY ACCENT COLORS 
   Replaced the old Yellow (#F48C06) with the Vibrant Pink/Red (#FF4F70)
   extracted from the "Grade" and "X" in your logo.
   We keep the class name 'yellow-500' so you don't have to edit the HTML.
*/
.bg-yellow-500 {
    background-color: #FF4F70;
}

.text-yellow-500 {
    color: #FF4F70;
}

/* 
   SECONDARY ACCENT (Optional)
   If you want to use the Green from "Auto" specifically, 
   you can use these new classes in your HTML.
*/
.bg-brand-green {
    background-color: #00C590;
}
.text-brand-green {
    color: #00C590;
}

/* 
   DARK TEXT
   Changed from purple-blue to a Dark Slate/Black 
   to match the professional look of the "Auto" text.
*/
.text-darken {
    color: #1F2937;
}

/* ANIMATIONS (Kept mostly the same) */
.floating { 
    animation-name: floating; 
    animation-duration: 3s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out;
} 

@keyframes floating { 
    0% { transform: translate(0, 0px); } 
    50% { transform: translate(0, 8px); } 
    100% { transform: translate(0, -0px); }  
} 

.floating-4 { 
    animation-name: floating; 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out;
} 

@keyframes floating-4 { 
    0% { transform: translate(0, 0px); } 
    50% { transform: translate(0, 8px); } 
    100% { transform: translate(0, -0px); }  
}