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;
      }

      .tr-even {
        background-color: #428a01;
      }

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

      pre {
        font-size: 4.0vw;
      }      

      .download-from-play {
        max-width: 100%;
      }

      .li-phase {
        margin-bottom: 2vh;
        color: #ffffff;
      }
      
      #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: 60vw;
      }

      #main-content {
        display: flex;
        flex-direction: column;  
        justify-content: center;
      }
      
      #ws_link {
        font-family: 'DynaPuff', sans-serif;
        font-size: medium;
        color:white; 
        height: 85px; 
        text-align: center; 
        margin-top: 70px; 
      }

      #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;
      }

       #game-lab {
          width: 76vw;
          height: 76vw;
          display: flex;
          flex-direction: row;
       }

       #game-desc {
          width: 100%;
          display: flex;
          flex-direction: column;
       }

       #card-game {
          display:flex; 
          flex-direction: column;
       }

      .card-odd {
        margin-top: 4vh;
        overflow: hidden;
        justify-content: space-between;
        align-self: center;
        background-color: #428a01;
        padding: 2vw;
        border-radius: 2vw;
      }

      .card-even {
        margin-top: 4vh;
        overflow: hidden;
        justify-content: space-between;
        align-self: center;
        padding: 2vw;
        border-radius: 2vw;
        background-color: #004a00;
      }

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

      .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:#ffcc00;
        font-size: 4.5vw;
        font-family: 'DynaPuff', sans-serif;
      }

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

      .d-text-small {
        font-size: 2.5vw;
        color: #ffffff;
        font-weight: bold;
        font-family: 'DynaPuff', sans-serif;
      }

      .d-text, li {
        color:#ffffff;
        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;
      }

      .example {
            display: block; margin-top: 6px;
            font-family: monospace; font-size: 14px;
            color: #a2ca71;
            padding: 16px 16px; background: rgba(0, 0, 0, 0.2);
            border-radius: 8px; margin-top: 8px;
      }

      .example-mistake {
            border-left: 6px solid #ff5555;
            display: block; margin-top: 6px;
            font-family: monospace; font-size: 14px;
            color: #a2ca71;
            padding: 16px 16px; background: rgba(0, 0, 0, 0.2);
            border-radius: 8px; margin-top: 8px;
      }

      .tables-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 12px; margin: 20px 0;
      }

      .table-card {
            background-color: #006a00;
            border: 1px solid rgba(162, 202, 113, 0.3);
            border-radius: 10px; padding: 18px 16px;
            text-align: center; text-decoration: none;
            color: #e8f0ea; transition: all 0.2s;
      }

      .table-card:hover {
            background: rgba(30, 90, 45, 0.8);
            border-color: #a2ca71;
            transform: translateY(-2px);
      }
      .table-card .table-num {
            font-size: 38px; font-weight: 700;
            color: #ffcc00; display: block;
      }

      .table-cell {
            font-family: 'DynaPuff', sans-serif;     
            font-size: 28px; font-weight: 700;
            color: #ffffff; display: block;
      }

      .table-card .table-label {
            font-size: 14px; margin-top: 4px;
      }

      .table-card .table-preview {
            font-size: 12px; color: #a2ca71;
            margin-top: 8px; font-family: monospace;
      }

      .table-card.difficulty-easy { border-left: 6px solid #55ff55; }
      .table-card.difficulty-medium { border-left: 6px solid #ffff22; }
      .table-card.difficulty-hard { border-left: 6px solid #ff5555; }


        #maze {
            display: grid;
            width: 100%;
            height: 100%;
        }

        .cell-wall {
            background-color: #333333;
            color: #333333;
            cursor: crosshair;
        }

        .cell-wall-yellow {
            background-color: #ffcc00;
            color: #ffcc00;
            cursor: crosshair;
        }

        .cell-snake {
            background-color: #b99300;
            cursor: pointer;
        }

        .cell-snake-head-e {
            background-image: url('./snake-face-e.svg');
            background-size: cover;
        }

        .cell-snake-head-n {
            background-image: url('./snake-face-n.svg');
            background-size: cover;
        }

        .cell-snake-head-w{
            background-image: url('./snake-face-w.svg');
            background-size: cover;            
        }

        .cell-snake-head-s {
            background-image: url('./snake-face-s.svg');
            background-size: cover;
        }

        .cell-path-odd {
            background-color: #cccccc;
            color: #333333;
            cursor: pointer;
        }

        .cell-path-even {
            background-color: #eeeeee;
            color: #333333;
            cursor: pointer;
        }

        .cell-trap {
            background-color: #ff4444;
            color: #ffffff;
        }

        .cell-path-nr {
            font-size: small;
            font-family: 'DynaPuff', sans-serif;
            background-color: transparent;
            color: inherit;
            display: block;
            margin-top: 30%;
            text-align: center;
            pointer-events: none;
        }

        .cell-ent {
            background-color: #99ff77;            
        }

        .cell-ext {
            background-color: #99ff77;
            cursor: pointer;
        }

        .cell-path-sol {
            background-color: #ff3333;

        }

        #game-start {
            font-size: large;
            font-family: 'DynaPuff', sans-serif;
            background-color: #ffcc00;
            color: #003300;
            width: 50%;
            align-self: right;
            margin-bottom: 25px;
        }


      @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-small {
          font-size: 1.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: 24vw;
        }

        #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;
        }

        #game-lab {
          width: 25vw;
          height: 25vw;
          display: flex;
          flex-direction: row;
         }

         #game-desc {
          width: 22vw;
          height: 100%;
          display: flex;
          flex-direction: column;
         }

         #card-game {
            display:flex; 
            flex-direction: row;
         }

        .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;
        }

        .example {
            font-family: monospace; font-size: 24px;
        }

        .example-mistake {
            font-family: monospace; font-size: 24px;
        }

        .table-cell {
            font-size: 38px; font-weight: 700;
        }

        .tables-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
      }