@charset "utf-8"; 
/* 
Title: Estilo de "Haikuema"
Version: 1.0.1 
media: screen 
*/

body {
     background-color: #F1F1F1;
     margin: 0;
     padding: 0;
     font-family: helvetica, sans-serif;
     height: 100%;
     color: #333;
     transition: color linear 1s;
}

h1 {
     background-color: #000;
     color: #FFF;
     font-size: 120%;
     margin: 0;
     text-align: center;
     padding: 1ex;
}

#content {
     width: 15em;
     max-width: 90%;
     margin: 0 auto;
}

     #haiku {
          margin: 4em 0;
          text-align: center;
          font-size: 120%;
          font-style: italic;
          font-family:serif;
          transition: color linear 2s;
     }

     .btns {
          text-align: center;
          margin-bottom: 4em;
     }
          #boton {
               color:#666;
               background-color:#F1F1F1;
               border:1px solid #666;
               padding:1ex 2ex;
               font-size:1em;
               border-radius:1ex;
          }

     #lastwords {
          text-align: right;
          font-size: 90%;
          font-style: italic;
          color: #666;
          padding: 0;
          margin: 2em 1em 1em 0;
     }
          #lastwords a {
               color: #666; 
          }

body.primavera {
     transition: color linear 1s;
     color: #587009;
     background-color: #e3f5c9;
}
     body.primavera h1 {
          transition: all linear 1s;
          background-color: #587009;
     }

     body.primavera #boton {
          transition: all linear 1s;
          color: #587009 ;
          border-color: #587009;
          background-color: #e3f5c9;
     }
     body.primavera #boton:active {
          background-color:#F1F1F1;
          color: #333;
     }

body.verano {
     transition: color linear 1s;
     color: #135dca;
     background-color: #ffeac5;
}
     body.verano h1 {
          transition: all linear 1s;
          background-color: #135dca;
     }

     body.verano #boton {
          transition: all linear 1s;
          color: #135dca;
          border-color: #135dca;
          background-color: #ffeac5;
     }
     body.verano #boton:active {
          background-color:#F1F1F1;
          color: #333;
     }


body.otonio {
     transition: color linear 1s;
     color: #A30D0E;
     background-color: #ffe191;
}
     body.otonio h1 {
          transition: all linear 1s;
          background-color: #A30D0E;
     }

     body.otonio #boton {
          transition: all linear 1s;
          color: #A30D0E ;
          border-color: #A30D0E;
          background-color: #ffe191;
     }
     body.otonio #boton:active {
          background-color:#F1F1F1;
          color: #333;
     }


body.invierno {
     transition: color linear 1s;
     color: #65727A;
     background-color: #E6E8E3;
}
     body.invierno h1 {
          transition: all linear 1s;
          background-color: #65727A ;
     }

     body.invierno #boton {
          transition: all linear 1s;
          color: #65727A;
          border-color: #65727A;
          background-color: #E6E8E3;
     }
     body.invierno #boton:active {
          background-color:#F1F1F1;
          color: #333;
     }