/* styles for all modes */
body {
      font-family: sans-serif;
      font-size: 1.5vw;
      background: orange;
      color: green;
      margin: 0px;
      }

img.icon {
          height: 1em;
          top: 8px;
          right: 8px;
          position: fixed;
          }

img.carrot {
           height: 1em;
           }

div.menu {
          background: green;
          color: orange;
          padding: 8px;
          font-weight: bold;
          }

ul.menu {
         margin-top: 0px;
         margin-bottom: 0px;
         margin-left: -0.5em;
         background: green;
         color: orange;
         padding-top: 8px;
         padding-bottom: 8px;
         overflow: hidden;
         }

li.menu {
         float: left;
         margin-left: 24px;
         margin-right: 24px;
         }

a.menu {
        color: orange;
        float: left;
        text-decoration: none;
        font-weight: bold;
        }

a:hover.menu {
              text-decoration: underline;
              font-style: italic;
              }

div.content {
             padding: 8px; 
             }

div.content-text {
          padding: 4px 0px; 
          }

a.content {
           color: green;
           text-decoration: none;
           font-weight: bold;
           }

a:hover.content {
                 text-decoration: underline;
                 font-style: italic;
                 }

div.content-anchor {
                    margin: 1em 0px;
                    padding-left: 2em;
                    }

/* media query for portrait orientation */
@media only screen and (orientation: portrait) {

    /* media query for mobile phones */
    @media only screen and (max-width: 450px) {

        body {
              font-size: 4vw;
              }

        ul.menu {
                 margin-left: -1em;
                 }

        li.menu {
                 float: none;
                 margin: auto;
                 }

    }

}

/* media query for landscape orientation */
@media only screen and (orientation: landscape) {

    /* media query for mobile phones */
    @media only screen and (max-height: 450px) {

        body {
              font-size: 2.5vw;
              }

        ul.menu {
                 margin-left: -1em;
                 }

        li.menu {
                 float: none;
                 margin: auto;
                 }
       
    }

}