html {
    height: 100%;
  }
  
  body {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-family: sans-serif;
    align-items: center;
    /* font-family: "Liberation Serif"; */
  }
  
  
  
  
  
  
  /* 1. HEADER */
  header {
    display: flex;
    justify-content: space-between;
    width: 100%
  }
  
  /* 1.1 Title */
  h1 {
    /*font-family: sans-serif;*/
    text-align: center;
    font-size: 50px;
  }
  /* Small width than 350 */
  @media only screen and (max-width: 350px) {
    h1 { font-size: 14vw; }
  }
  
  /* 1.2 Side Buttons */
  header i {
    color: #bbbbbb;
    margin: 20px;
    transition: 0.2s;
  }
  .fa-cog:hover,
  .fa-cog:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s;
  }
  
  /* Something to do with header margins */
  /* Shorter than 580px */
  @media only screen and (max-height: 580px) {
    header {
      align-items: center;
      /* flex-shrink: 1; */
      flex-basis: 0;
    }
    header i {
      margin: 0px;
    }
  }
  
  
  
  
  
  
  
  /* 2. MAIN GAME GRID */
  .game {
    width: 100%;
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  /* Outer Border */
  .y1 {border-bottom-width: 2px;}
  .x1 {border-left-width:   2px;}
  .x9 {border-right-width:  2px;}
  .y9 {border-top-width:    2px;}
  
  /* Internal box borders */
  .x3, .x6 {border-right-width: 2px;}
  .y3, .y6 {border-top-width: 2px;}
  
  /* 2.1 Rows */
  .row {
    width: 80%;
    font-size: 0; /* To deal with text nodes error */
    display: flex;
    justify-content: center;
  }
  
  /* 2.1.1 Individual Cells */
  input {
    width: 100%;
    
    /* Responsive value */
    font-size: 40px;
  
    border-color: #000;
    border-style: solid;
    border-radius: 0px;
  
    /* Internal cell lines */
    border-top-width:    1px;
    border-right-width:  1px;
    border-left-width:   0px;
    border-bottom-width: 0px;
  
    /*display: inline-block;*/
  
    /* font-family: "Liberation Serif"; */
    text-align: center;
    color: transparent; /* Remove the cursor */
    text-shadow: 0 0 0 #0044aa;
  }
  
  /* Remove up/down number buttons */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input[type=number] {
    -moz-appearance:textfield; /* Firefox */
  }
  
  /* 2.1.2 Cell Highlights */
  .highlight {
    background-color: #ddd;
  }
  .vhighlight {
    background-color: #c0c0c0;
  }
  
  /* 2.1.3 Currently selected cell */
  .current {
    outline: none;
    background-color: #d5eeff;
  }
  
  /* 2.1.4 Clashing cell */
  .error {
    background-color: #ffc6c6;
    text-shadow: 0 0 0 #ce0000;
  }
  
  /* 2.1.5 Current + Clash */
  .error.current {
    background-color: #fcb3b3;
  }
  
  /* 2.1.6 Preloaded cells */
  .uneditable {
    text-shadow: 0 0 0 #000000;
  }
  
  /* 
  /* 2.1.7 * /
  .error.uneditable {
    background-color: #ffc6c6;
  } */
  
  
  
  /*.candidates {
    text-shadow: 0 0 0 #555;
    font-size: 10px;
    border-color: red;
  }*/
  
  
  
  
  
  
  
  /* 3. NUMBER BUTTONS */
  .numbers {
    /* flex-grow: 1; */
    width: 80%;
    font-size: 0px; /* Text nodes error fix */
    display: flex;
    /* justify-content: center; */
  }
  
  /* 3.1 Container */
  .num-buttons {
    width: 100%; /* Responsive value? */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* 3.1.1 Number buttons */
  .numbers p {
    text-align: center;
  
    /* Responsive values */
    width: 50px;
    font-size: 35px;
  
    border: 1px solid #707070; /**/
    border-radius: 4px;
  
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .numbers p:hover {
    background-color: #c6dcff;
  }
  
  .numbers .but-pencil {
    display: none;
  }
  
  
  
  
  
  
  /* 4. Settings Modal */
  .modal-background {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #00000066; /* Black w/ opacity */
  }
  
  .modal {
    background-color: #fefefe;
    margin: 10% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 60%; /* Could be more or less, depending on screen size */
  }
  
  /* The Close Button */
  .close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close-button:hover,
  .close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }