html,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      div,
      body {
        padding: 0;
        margin: 0;
        color: #fff;

      }
      a {
        color: white;
        text-decoration: none;
      }
      b {
        color:#b2da91;
      }
      body {
        font-size: 10px;
        font-family: "Lato", Helvetica, Arial, sans-serif;
      }
      * {
        box-sizing: border-box;
      }
      .center {
        text-align: center;
      }

      th, td {
        text-align: left;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        vertical-align: top;
        font-size: 2.0vh;
      }

      @font-face {
        font-family: 'DynaPuff';
        src: url('../../fonts/DynaPuff-Medium.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
      }

      pre {
        font-size: 4.0vw;
      }      

      #home {
        display:flex; flex-direction: column;        
        background-size: contain;
        background: url('../../imgs/other/bkg_green03.svg') repeat;
        background-position-y: -200px;
      }

      #menu {
        width: 80vw;
        height: 5vh;
        display: flex;
        flex-direction: row-reverse;        
        align-self: center;
     
      }

      #top-menu {        
        height: 7vw;
        border-color: #a2ca71;
        border-bottom-style: solid;
        border-bottom-left-radius: 1vw;
        border-bottom-right-radius: 1vw;
        border-top-left-radius: 0vw;
        border-top-right-radius: 0vw;
        background-color: #003100;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .menu-item-text {
        font-size: 3vw;
        font-weight: bolder;
        color: #a2ca71;
      }

      .menu-item-text-selected {
        font-size: 3vw;
        font-weight: bolder;
        color: white;
        text-decoration: underline;
        text-underline-offset: 0.6vw;
      }

      #footer {
        margin-top: 5vh; 
        height: 20vh; 
        display: flex; flex-direction: column;
        background-color: #003100;
      }

      #footer-content {
        margin-top: 2.5vh;
        display: flex; flex-direction: row;
      }

      .download-from-play {
        width: 40vw;
      }

      #main-content {
        display: flex;
        flex-direction: column;  
        justify-content: center;
      }

      #game-title {        
        font-size: 4.4vh;
        font-family: 'DynaPuff', sans-serif;
      }

      #game-subtitle {        
        font-size: 2.4vh;
        font-family: 'DynaPuff', sans-serif;
        color: #b2da91;
        margin-top: 1vw;
      }

      #main-content > #area-title {
        width: 80vw;
        margin-top: 8vh;
        margin-bottom: 1vh;
        align-self: center;
        height:auto;
      }

      #core-content {
        width: 80vw;
        display: flex;
        flex-direction: column;  
        justify-content: center;
        align-self: center;
      }

      .card-odd {
        margin-top: 4vh;
        overflow: hidden;
        position: relative;
        align-self: center;
        background-color: #628a01;
        padding: 2vw;
        border-radius: 2vw;
      }

      .card-note {
        margin-top: 1.5vh;
        margin-bottom: 1.5vh;
        font-weight: bold;
        font-size: 4.5vw;
        color: #003300;
      }

      .card-even {
        margin-top: 4vh;
        overflow: hidden;
        position: relative;
        align-self: center;
        padding: 2vw;
        border-radius: 2vw;
        background-color: #426a01;
      }

      .article {
        display: flex;
        flex-direction: column;  
        justify-content: center;
        align-self: center;
      }

      .article > .art-header {
        display: flex;
        flex-direction: column;  
        justify-content: center;
        background-color: #a2ca71;
        border-style: none; border-radius: 20px;
        margin-top: 2vw;
      }

      .article > .art-header > .art-title {
        width: 100%;
        overflow: hidden;
        position: relative;
        align-self: center;
        padding: 2vw;
      }

      .article > .art-header > .art-title > * {
        font-size: 7vw;
        font-family: 'DynaPuff', sans-serif;
        color: #003300;
        align-self: center; 
      }

      .article > .art-header > .art-synopsis {
        width: 100%;
        position: relative;
        align-self: left;
        padding: 2vw;
      }

      .article > .art-body {
        overflow: hidden;
        position: relative;
        align-self: center;
        margin-top: 4vw;
      }

      .table-row, .table-row-head {
        display: flex;
        flex-direction: row;
      }

      .table-row-head {
        background-color: #a2ca71;
      }

      .d-text-h4 {
        color:#ffffff;
        font-size: 5.5vw;
        font-family: 'DynaPuff', sans-serif;        
      }

      .d-text-h5 {
        margin-top: 2vh;
        color:#b2da91;
        font-size: 4.5vw;
        font-family: 'DynaPuff', sans-serif;        
      }

      .d-text-syn {
        font-size: 4.5vw;
        color: #005500;
        font-weight: bold;
      }

      .d-text, li {
        color:#a2ca71;
        font-size: 4.5vw;
      }

      .d-text-block {
        color:#a2ca71;
        font-size: 4.5vw;
        border-left: 4px #ffcc00 solid;
        border-radius: 4px;
        padding: 1.5vw;
      }

      .d-table-header {
        color:#005500;
        background-color: #a2ca71;
        font-size: 4.5vw;
      }

      .link {
        font-size: 1.9vh;
        color: white;
        text-decoration: none;
      }

      .other-apps {
        display: flex; 
        flex-direction: row;
        justify-content: center; 
        height: 10vh;
      }

      .other-apps-logo {
        height: 8vh;
        width: 8vh;
        margin: 1vh;
      }

      .other-apps-large-text {
        font-size: 6vw;
        font-weight: bolder;
        color: white;
      }

      .other-apps-mail {
        font-size: 1.5vw;
        color: white;
        text-decoration: none;
      }

      .playstore-link {          
        color: white;
        text-decoration: none;
      }

      @media (min-aspect-ratio: 6/5) {

        html {
           height: 100%;
        }

        pre {
          font-size: 2.0vh;
        }        

        #top-menu {          
          height: 3vw;
        }

        .menu-item-text {
          font-size: 3vh;         
        }

        .menu-item-text-selected {
          font-size: 3vh;
          text-decoration: underline;
          text-underline-offset: 0.6vh;
        }

        .d-text-h5 {
          margin-top: 3vh;
          font-size: 2.6vh;
          font-family: 'DynaPuff', sans-serif;
        }

        .d-text-h4 {
          color:#ffffff;
          font-size: 3.6vh;
          font-family: 'DynaPuff', sans-serif;        
        }

        .card-note {
          margin-top: 1.5vh;
          margin-bottom: 1.5vh;
          font-weight: bold;
          font-size: 2.6vh;
          color: #003300;
        }

        .d-text-syn {
          font-size: 2.6vh;
          color: #005500;
          font-weight: bold;
        }

        .d-text, li {
          font-size: 2.6vh;
        }

        .d-text-block {
          color:#a2ca71;
          font-size: 2.6vh;
          border-left: 4px #ffcc00 solid;
          border-radius: 4px;
          padding: 1.5vh;
        }

        .d-table-header {
          color:#005500;
          background-color: #a2ca71;
          font-size: 2.6vh;
        }

        .download-from-play {
          margin-top: 1vw;
          width: 16vw;
        }

        #game-title {
          font-size: 4.8vh;
          font-family: 'DynaPuff', sans-serif;
        }

        #game-subtitle {
          font-size: 2.8vh;
          font-family: 'DynaPuff', sans-serif;
          color: #b2da91;
          margin-top: 0vw;
        }

        #main-content > #area-title {
          width: 60vw;
          height:auto;
          margin-bottom: 0vh;
        }

        #core-content {
          display: flex;
          width: 60vw;          
          overflow: hidden;
          flex-direction: row;  
          justify-content: space-between;
          align-self: center;
        }

        .article {
          display: flex;
          flex-direction: column;  
          justify-content: flex-start;
        }

        .article > .art-header {
          display: flex;
          flex-direction: row;  
          justify-content: flex-start;
          margin-top: 2vw;
        }

        .article > .art-header > .art-title {
          width: 49%;
          overflow: hidden;
          position: relative;
          align-self: center;
          padding: 1vw;
        }

        .article > .art-header > .art-title > * {
           font-size: 5vh;
           align-self: center;
           height: 100%;
           color: #003300;
        }

        .article > .art-header > .art-synopsis {
          width: 100%;
          overflow: hidden;
          position: relative;
          align-self: center;
          padding: 1vw;
        }

        .article > .art-body {
          /*border-style: solid; border-width: 3px; border-radius: 10px; border-color: #ffffff;*/
          margin-top: 2vh;
          margin-bottom: 2vh;
          overflow: hidden;
          position: relative;
          align-self: center;
          justify-content: center;
        }

        #footer {
          margin-top: 5vh; 
          height: 20vh; 
          display: flex; flex-direction: column;
          background-color: #003100;
        }

        #footer-content { 
          margin-top: 2.5vh;
          display: flex; flex-direction: row;
        }

        .other-apps-large-text {
          font-size: 6vh;
          font-weight: bolder;
          color: white;
        }
      }