/* Basic Reset */
* {
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

/* Body styles */
body {
    font-family: 'Roboto', sans-serif; /* Embedded Font */
}

/* Header styles with gradient */
header {
    padding: 15px 20px; /* Padding for header */
    background: linear-gradient(90deg, #ff6b6b, #dbdbdb); /* Gradient for header */
    color: white; /* Text color for header */
}

/* Container styles */
.container {
    display: flex; /* Use flexbox for layout */
    flex-direction: row; /* Align children in a row */
    padding: 20px; /* Padding for the container */
}

/* Main content styles */
.main-content {
    flex: 3; /* Take up 3 parts of the flex container */
    padding: 20px; /* Padding for the main content */
    background-color: rgba(255, 255, 255, 0.8); /* Light background */
    border-radius: 8px; /* Rounded corners */
}

/* Sidebar styles */
.sidebar {
    flex: 1; /* Take up 1 part of the flex container */
    padding: 20px; /* Padding for the sidebar */
    background-color: rgba(220, 220, 220, 0.8); /* Slightly darker background */
    border-radius: 8px; /* Rounded corners */
}

/* Floated image styles */
.content-with-image {
    overflow: auto; /* Clear floats */
}

.floated-image {
    float: left; /* Float image to the left */
    margin-right: 15px; /* Space between image and text */
    width: 150px; /* Set image width */
}


footer {
    text-align: center; /* Center text in footer */
    padding: 15px 20px; /* Padding for footer */
    background: linear-gradient(90deg, #f888c0, #ff6b6b); /* Gradient for footer */
    color: white; /* Text color for footer */
}
/* Base styles (applies to all screen sizes) */
.content-with-image img {
    max-width: 100%;
    height: auto;
}

/* Extra small devices (portrait phones, less than 576px) */
@media only screen and (max-width: 575.98px) {
    .main-content, .sidebar {
        padding: 1rem;
    }

    /* Stack the layout in one column */
    .main-content {
        margin-bottom: 2rem;
    }

    .sidebar {
        margin-top: 0;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
    .main-content, .sidebar {
        padding: 1.5rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .main-content, .sidebar {
        padding: 2rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .main-content, .sidebar {
        padding: 2.5rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .main-content, .sidebar {
        padding: 3rem;
    }
}