BODY{FONT:12px Tahoma,Geneva,sans-serif;MARGIN:10px}
body {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
    color: black;
    background-color: #b6d7a8;
    /*background-color: #ffffff;*/
    margin: 20px;
    padding: 0;
    text-shadow: -1px 1px 1px #999;
}
h1 {
    color: #ffc;
    background-color: #900;
    font-size: 2em;
    margin: 0;
    margin-bottom: 7px;
    padding: 4px;
    font-style: italic;
    text-align: center;
    letter-spacing: 0.5em;
    border-bottom-style: solid;
    border-bottom-width: 0.5em;
    border-bottom-color: #c00;
    border-radius: 8px 8px 8px 8px;
    text-transform: uppercase;
    box-shadow: 2px 2px 2px 1px #999;
    margin: 15px 30px;
}
h2 {
    color: white;
    background-color: #8ABF73;
    font-size: 1.5 em;
    margin: 0;
    padding: 10px;
    padding-left: 14px;
    border-radius: 8px 8px 8px 8px;
    text-align: center;
    box-shadow: 2px 2px 2px 1px #999;
    margin: 15px 30px;
}
h3 {
    color: black;
    background-color: #b6d7a8;
    font-size: 1.5em;
    border-radius: 3px 3px 3px 3px;
    text-align: center;
    padding: 10px;
    padding-left: 14px;
    margin: 10px 250px;
    border: 2px solid grey;
    box-shadow: 3px 3px 2px 1px #999;
}
img {
    /*border-style: dashed;*/
    border-width: 2px;
    border-color: #ccc;
}
a {
    text-decoration: none;
}
a:link {
    color: hsl(36,50%,50%);
}
a:hover {
    color: hsl(36,100%,50%);
}
strong {
    font-style: italic;
    text-transform: uppercase;
}
li {
    color: #900;
    font-style: italic;
}
table {
    background-color: #f3f3f3;
    /*background-color: #a091b3;*/
    background: #8ABF73;
    padding: 2px;
    border: 2px solid #008F00;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 3px 3px 2px 1px #999;
    padding:10px 10px 10px 10px;
    text-decoration: blink;
}
form {
    background-color: #D4D4D4;
    background: #b6d7a8;
    padding: 2px;
    border: 2px solid grey;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 3px 3px 2px 1px #999;
    padding:10px 10px 10px 10px;
    margin: 30px 150px;
}
p {
    font: 16px/2.5 "Arial";
    padding: 1px 1px;
    border: 2px black solid;
    border-width: 2px 6px 6px 2px;
    border-radius: 15px 15px 15px 15px;
    border-color: black grey grey black;
    margin: 30px 250px;
    text-align: left;
    background-color: #FFFFFF;
}

p1 {
    font: 14px/1.5 "Times New Roman", times, serif;
    padding: 1px 1px;
    border: 2px black solid;
    border-width: 1px 5px 5px 1px;
    border-radius: 5px 5px 5px 5px;
    border-color: black grey grey black;
    margin: 30px 250px;
    text-align: left;
    background-color: #FFFFFF;
}

#contenedor {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
  
#contenedor > div {
    width: 50%;
}


#contenedor2 {
    text-align: left;
    width: 100%;
    margin: auto;
   }
   
#lateral {
    width: 20%;  /* Este será el ancho que tendrá tu columna */
    background-color: #CCCCCC;  /* Aquí pon el color del fondo que quieras para este lateral */
    float:right; /* Aquí determinas de lado quieres quede esta "columna" */
}
   
#principal {
    width: 75%;
    float: left;
    background-color: #FFFFFF;
    border:#000000 1px solid; /* ponemos un donde para que se vea bonito */
}
/* Para limpiar los floats */
.clearfix:after {
     content: "";
     display: table;
     clear: both;
}