:root {
     --color1: rgb(178, 190, 178);
     --color2: rgb(95, 146, 95);
     --color3: green;
     --color4: rgb(6, 69, 6);
     --color5: rgb(0, 8, 0);
     --altos: 85px;
     --padding10: 10px;
 }

 * {
     box-sizing: border-box;
 }

 body {
     padding: 0px;
     margin: 0px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     background-color: var(--color1);
     display: grid;
     grid-template-rows: var(--altos) auto 120px;
 }

 header {
     background-color: var(--color5);
     color: var(--color1);
     padding-top: calc((var(--altos) - 1.2em) / 2);
     width: 100%;
 }

 header ul {
     list-style: none;
     margin: 0px;
     padding: 0px;
     text-align: center;
 }

 header ul li {
     display: inline-block;
 }

 header ul li a {
     color: var(--color1);
     text-decoration: none;
     display: inline-block;
     margin-right: 50px;
     font-size: 1.2em;
 }

 header nav ul li a:hover {
     color: var(--color3);
 }

 main {
     display: grid;
     grid-template-columns: 4fr 1fr;
     max-width: 1300px;
     margin: auto;
     gap: var(--padding10);
     background-color: var(--color3);
 }


 main>nav {
     background-color: var(--color2);
     color: var(--color0);
 }


 main>nav ul {
     list-style: none;
     text-align: center;
     margin: 5px;
     padding: 5px;

 }

 main>nav ul a {
     color: inherit;
     text-decoration: var(--color3);
     display: inline-block;
     margin: var(--padding10);
 }

 main>nav ul a:hover {
     color: var(--color3);
 }

 main form {
     text-align: center;
     padding: 30px;
 }

 #principal>section {
     padding: calc(var(--padding10) * 2);
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--padding10);
 }

 #principal>section>article {
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto auto auto;
     gap: var(--padding10);
     grid-template-areas: "titulo titulo"
         "texto imagen"
         "nada boton";
     background-color: var(--color1a);
     padding: var(--padding10);
     border-radius: 4px;
     align-items: center;
 }

 #principal>section>article>h2 {
     grid-area: titulo;
     margin-top: 4px;
     margin-bottom: 4px;
 }


 #principal>section>article>p {
     grid-area: texto;
 }

 #principal>section>article>img {
     grid-area: imagen;
     max-width: 100%;
     border-radius: 4px;
 }

 #principal>section>article>div {
     grid-area: boton;
     text-align: right;
 }


 #principal>section>article>div a {
     display: inline-block;
     background-color: var(--color2);
     color: var(--color0);
     padding: var(--padding10);
     text-decoration: none;
     border-radius: 3px;
 }

 #principal>section>article>div a:hover {
     color: var(--color3);
 }

 footer {
     margin: 0px;
     padding: 0px;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     background-color: var(--color4);
     color: var(--color1);
 }

 footer ul {
     list-style: none;
     text-align: center;
 }

 footer ul li a {
     color: var(--color1);
     text-decoration: none;
 }

 footer ul li a:hover {
     color: var(--color5);
 }

 #boton {
     text-decoration: none;
     text-align: center;
     justify-items: center;
     background-color: var(--color5);
     color: var(--color1);
 }

 #boton:hover {
     color: var(--color4);
 }



 @media (max-width: 480px) {
     body {
         padding: 0px;
         margin: 0px;
         font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
         background-color: var(--color1);
         display: grid;
         grid-template-rows: auto auto auto;
         max-width: 480px;
     }

     header {
         background-color: var(--color5);
         color: var(--color1);
         padding-top: 0px;
         width: 100%;
         text-align: center;
     }

     header ul li {
         display: inline-flex;
         font-size: small;
     }

     main {
         display: grid;
         grid-template-columns: 1fr;
         max-width: 480px;
         margin: auto;
         gap: 5px;
         background-color: var(--color3);
     }

     main form {
         text-align: center;
         padding: 10px;
     }

     #principal>section {
         padding: 0px;
         display: grid;
         grid-template-columns: 1fr;
         gap: var(--padding10);
     }

     main>nav {
         display: none;
     }

     #principal>section>article>div a:hover {
         color: var(--color3);
     }
 }