/* ================================================
   Project: Carnation Joy Website
   Author: [Galen Yuan]
   Date: [06/06/2024]
   File: general.css
   Description: General styles and resets for base styling.
   ================================================= */
/* === RESET STYLES === */
* {
    box-sizing: border-box; /* Ensures padding and border are included in width calculations */
    margin: 0;
    padding: 0;
}

html, body {
    font-family: 'Lato', sans-serif;
    height: 100%;
    width: 100%;
    background-color: #ffffff; /* Ensure background color is white */
}

/* === MAKE TEXT SCALABLE === */
body {
    font-size: 16px; /* Default for desktop */
    line-height: 1.6;
}

/* Adjust font size for smaller screens */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Make text slightly smaller */
    }
}

/* === IMAGES SHOULD SCALE PROPERLY === */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === ENSURE CONTAINERS ADJUST RESPONSIVELY === */
.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* === LIMIT CONTENT WIDTH TO PREVENT OVERFLOW === */
.main-content {
    max-width: 100%;
    overflow: hidden;
}

/* === MAKE BUTTONS FLEXIBLE === */
.btn-primary {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    text-align: center;
    border-radius: 5px;
}

/* Adjust buttons for smaller screens */
@media (max-width: 480px) {
    .btn-primary {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}