/* Global Styles & Colors */
    :root {
      --color-background: #ffffff;
      --color-absent: #787c7e;
      --color-present: #c9b458;
      --color-absent: #787c7e;
      --color-correct: #6aaa64;
      --color-empty: #ffffff;
      --color-empty-border: #d3d6da;
      --color-selected-border: #aaaaaa;
    }

      html {
        height: 100%;
      }

      body {
        height: 100%;
        background-color: var(--color-background);
        margin: 0;
        padding: 0;
        /* Prevent scrollbar appearing on page transition */
        overflow-y: hidden;
        
      }


    #header {
      background-color: #6aaa64;
      display:block;
      width: 100%;
      height:2.7rem;
    }

    #header_left{
      float:left;
      padding-left:3px;
      height:2.7rem;

    }
    #header_right{
      float:right;
      height:2.7rem;

      
    }



    #title{
      font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
      color:white;
      font-size:2.1rem;
    }
    

    #buttonscontainer {
      float:right;
      vertical-align:middle;
      height:2.7rem;
    }

    #buttonscontainer img {
      height:2.6rem;
      cursor:pointer;

    }

    #languageselectcontainer {
      float:right;
      vertical-align:middle;
      height:2.7rem;
      padding-top:9px;
      padding-right:3px;
      margin: auto;

    }


    #instructioncontainer {
      font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
      font-size: 0.8rem;
      background-color: rgb(175, 204, 214);
      padding:3px;
      cursor:pointer;
      


    }

    #instructions {

    }

    #instructions ul {
      margin:0px;
    }

    #instructionstitle{
      font-size: 1rem;
      font-weight:bold;
    }


    #gridcontainer {
      float:left;
      /*border:solid 1px red;*/
      margin-left:10px;

    }


    #grid {   
      display: grid;
      grid: repeat(6, 62px) / auto-flow 62px;
      grid-gap: 5px;
 
      font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
    }

    
    #wordlistcontainer {
     
      /*border:solid 1px blue;*/
      padding:6px;
      font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
      font-size: 0.7rem;
      background-color:#dbdbdb;

    }

    #wordlistscroll {
      overflow-y: scroll;
      overflow-x: hidden;
      height:140px;

      background-color:white;
      border:solid 1px gray;
    }


    #wordlist {
      direction:ltr;
      column-count: 5;
      padding:3px;
          
    }

    #wordlist h2 {
        column-span: all;
        text-align:left;
        font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
        font-size: 0.7rem;
        line-height:0.7rem;
        padding:0px;
        margin:0px;
    }


    .tile {
        display: inline-flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        text-align: center;
        box-sizing: border-box;

        background: none;
        box-shadow: none;
        border-radius: 0px;
        border:0px;

        height:62px;
        width:62px;


        font-weight:bold;
        font-size: 2rem;
        line-height: 2rem;
        text-transform: uppercase;
        color: #ffffff;

        caret-color: transparent;

    }


    .tile_empty {
      background-color: var(--color-empty);
      border: 2px solid var(--color-empty-border);
    }

    .tile_absent {
      background-color: var(--color-absent);
      transform: scaleY(-1) rotateX(-180deg);
      -webkit-transform: scaleY(-1) rotateX(-180deg);
       -moz-transform: scaleY(-1) rotateX(-180deg);
      -ms-transform: scaleY(-1) rotateX(-180deg);
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .tile_present {
      background-color: var(--color-present);
      transform: scaleY(1) rotateX(0deg);
      -webkit-transform:  scaleY(1) rotateX(0deg);
      -moz-transform:  scaleY(1) rotateX(0deg);
     -ms-transform:  scaleY(1) rotateX(0deg);


      transition: transform 0.8s;
      transform-style: preserve-3d;
      animation: colorchange_present 1s;

   }


    .tile_correct {
      background-color: var(--color-correct);
      transform: scaleY(-1) rotateX(180deg);

      -webkit-transform:  scaleY(-1) rotateX(180deg);
      -moz-transform: scaleY(-1) rotateX(180deg);
     -ms-transform: scaleY(-1) rotateX(180deg);


      transition: transform 0.8s;
      transform-style: preserve-3d;
      animation: colorchange_tocorrect 1s;
    }

    .tile_selected {
      border: 2px solid var(--color-selected-border);
    }

    /* colour change during transitions */
    @keyframes colorchange_tocorrect {
      0% { background: var(--color-present); }
      100% { background: var(--color-correct); }
    }

    @keyframes colorchange_present {
      0% { background: var(--color-absent); }
      100% { background: var(--color-present);}
    }


    .input_notpresent {
      font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
      font-size: 16px;


    }

    #problems {
      width: auto;
      font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
      font-size: 0.8rem;
      color: #fca503;
      padding:5px;
    }



    #footer{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      color: white;
      text-align: center;
      padding:3px;
    }

    #footer a{
      text-decoration:none;
      font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
      font-size: 0.7rem;
      color:black;
    }

    #footer a:hover{
      text-decoration:underline;
    }