/* css para páginas de DMC
probando mobile first*/
@charset "UTF-8";
/* ======================================================= */
/* 1. BASE STYLES (MOBILE-FIRST - APPLIES TO ALL SCREENS) */
/* ======================================================= */
/* .box elemennts NNOT USED so far */
body {
  background-color: #E4E4AC;
}
.container {
    padding: 10px;
    background-color: #E4E4AC;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
.container h1 {
	font-family: Georgia, "Times New Roman", Times, "serif";
}
.box {
    /* Mobile-first: Boxes stack vertically with full width */
    width: 100%;
    margin-bottom: 10px;
    padding: 20px;
/*    background-color: #3498db;
    color: white;
    text-align: center; */
    border-radius: 5px;
    box-sizing: border-box; /* Important for padding/width calculation */
}

/* ======================================================= */
/* 2. MEDIA QUERY (TABLET/SMALL DESKTOP - >= 600px wide)   */
/* ======================================================= */

/* Styles inside this block OVERRIDE the mobile styles */
/* and only apply when the screen is at least 600px wide. */
@media screen and (min-width: 600px) {
    .container {
        /* Tablet: Use Flexbox to put boxes side-by-side */
/*        display: flex;
        flex-wrap: wrap; /* Allows wrapping if necessary */
        justify-content: space-between;
		border: thin solid #141474;
    }

    .box {
        /* Tablet: */
        width: 80%; 
        margin-bottom: 20px;
    }
}

/* ======================================================= */
/* 3. MEDIA QUERY (LARGER DESKTOP - >= 1024px wide)        */
/* ======================================================= */

/* Styles inside this block OVERRIDE all previous styles */
/* and only apply when the screen is at least 1024px wide. */
@media screen and (min-width: 1024px) {
    .container {
    /* Desktop */
    width: 70%;
    /*        display: flex; */
  /*      flex-wrap: wrap; /* Allows wrapping if necessary */
    justify-content: space-between;
    border: thin solid #141474;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    }
    .box {
        /* Desktop: No Boxes take up about 32% of the width (three per row) */
        width: 70%;
    }
}