*, *::before,*::after {
    /* box-sizing: border-box;*/
    font-family: Gotham Rounded /*,*/, sans-serif;
    font-weight: normal;
    
  }

  
  body {
    padding: 0;
    margin: 0;
    background-color: hsl(0, 0%, 100%); /* bring % back to 60% for original grey background (here and in .tile) */
    display: flex;   
    flex-direction: column;
    font-size: clamp(1rem, 3vmin, 5rem); 
    min-height: 100vh;  
    
  }

 
  /*Trying to use the DIV with gameWidth  Class to limit the width of  everything in 
  game to assist with mobile phone accessibility */
  .gameContainer {
    display:flex;
    box-sizing: border-box;
    padding:18px;
    flex-direction:column; 
    max-width:495px;  /*This the max width that my game will take up, however changing this does not seem to actually impact my game width it seems.....*/
    min-height:520px; /* based on cell phone screen heights. If anybody reduces their screen below this I want a scroll bar introduced*/
    height: 100dvh;  /* this sets the height of my 'game box' to be 100% the height of the viewport that the user is looking
     through. The 'd' is supposed to introduce a dynamic element to this so that if the navigation bar is showing, then my display will be slightly smaller
     so that the whole game still fits into that slightly reduced windowsize.  i could also use an s (for smaller) in place of the d, 
     but neither of them seem to be having an affect at the moment  /*720px   height: 100%;*/
    width:100%;
    
    user-select: none;
    align-items: center;
    align-self:center;

  }  

  #title-bar {

    display: flex;
   
    white-space:nowrap;
    justify-content: space-between; 
    align-self: center;
    
    padding: 4.5px 4.5px 7.5px 4.5px;
    border-bottom:1px solid rgb(38, 106, 216);
    margin-bottom:18px;
    margin-top:9px;
    text-align: center;
    width:100%;      
    
  }
  #title {
     display:flex;
    
     justify-content:center;
     font-weight: 720;
     font-size: 1.2em;
     letter-spacing: 0.1rem;
     text-transform: uppercase; 
     
     width:288px; 
     height:40px;  
     position:relative;
     flex-wrap: wrap;
     color:rgb(38, 106, 216);
     
    }
    .tm-symbol {
      font-size:x-small;
      vertical-align: baseline;
      margin-left: 0.1em; 
    }
    .strapline{
      letter-spacing:normal;
      font-weight:500;
      text-transform:none;
      font-size:.4em;
      font-style:oblique;
    }
 /*  
these relate to the button icons at the top of my page*/
button.icon {
  background: none;
   border: none;
   cursor: pointer;
   padding: 0 4.5px;
   margin-bottom:0;
   position:relative;
   
   
   
}

.copyright{
  font-size:xx-small;
  color:rgb(38, 106, 216);
  margin-top:0%;
}

  .color{
    position:relative;
    font-size: inherit;
    top: 25px;
  
    
    padding-left: 1px;
    
    }

    .color.round1 {
      position: relative;
      background-color:hsl(0, 0%, 100%);
     
    border-color:  hsl(0, 0%, 60%);
    width: 10px;
    height: 10px;
    border: 0.9em;
    border-radius: .1em;
    left:26px;
 
     }
    
    .color.round2{
      position: relative;
      left:28px;
      background-color:hsl(0, 0%, 100%);
     
      border-color: rgb(112, 148, 240);
      width: 10px;
    height: 10px;
    border: 0.9em;
    border-radius: .1em;
    }
    .color.round3{
      position: relative;
      background-color: hsl(0, 0%, 100%);
      border-color: rgb(216, 211, 56);
    
      width: 10px;
    height: 10px;
    border: 0.9em;
    border-radius: .1em;
    left:30px;

    }

    .calculator-grid {
      /* position: relative; */
      font-size: inherit;
      display: grid;
      align-self: center;
      grid-template-columns: repeat(3,1fr); /*minmax(auto, 4.5em)*/
      grid-template-rows: repeat(3,1fr); /*minmax(auto, 4.5em)*/
      gap: 0.3em; /* Adjust this value to control the spacing between buttons */
      margin: 0;
      padding: 0;
    /*  height: %;*/
      width: 72%;
      aspect-ratio: 18/18;
      align-self: center;

     
    
  }


  .key{
    position: relative;
    border: 0.1em solid rgb(0, 0, 255);
    padding: 0;
    font-weight:405;
    justify-content: center;
    align-items: center;
    /* this variable background color is no longer in use as I'm using image gradients so this could be deleted*/
    background-color: hsl(
      var(--hue,200),
      var(--saturation, 1%),
      calc(var(--lightness-offset,0%) + var(--lightness,75%))
    );
   
    color: rgb(255, 254, 254);
    text-transform: uppercase;
    border-radius: .25em;
    cursor: pointer;
    user-select: none;
  /*  box-shadow: 0 0 4px rgb(86, 134, 150),0 0 6px rgb(159, 159, 159); */
    
  }
 

  .key.number {
    
    border:0.08em solid blue;
    color: blue;
     /* This background-image fades the colours on the butons from darker colour to a lighter colour*/
     background-color: grey; /*this is for older browsers that don't support the background linear gradient image */
     background-image: linear-gradient(rgb(110, 191, 248),rgb(206, 224, 248));
    
    grid-column: span 1;
    grid-row: span 1;
    font-size:1.8em;
    font-weight:525;
    min-width:90%;
    min-height:100%;
    margin: auto;
  
    
  }



  /*   THIS NEXT FUNCTION IS SUPPOSED TO GIVE A SORT OF REFLECTION TO MAKE THE NUMBER BUTTONS LOOK LIKE GLASS. */
  .key.number::after {
    content:'';
    position:absolute;
    top: 2px;
    left: 2px;
    width:95%; 
    height: 45%;
    background-image: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.25));
    opacity: 1;
    z-index: 0;

  }
 /*  The inactive state is the colour that the number keys turn once they've been used once*/
  .key[data-state="inactive"] {
    background-image:linear-gradient(rgb(73, 157, 253),rgb(66, 128, 253));
    border: 0.1em solid blue;
    opacity: 0.9;


  }
  
  
  
  .key.equalsTotal{
    text-transform:none;
    padding:0;
    grid-column: span 1;
    grid-row: span 1;
    transition: color 1s ease, border 1s ease, box-shadow 1s ease;
    color:green;
    border: 0.2em solid green;
    background-color: rgb(250, 251, 252);
    box-shadow: 0 0 4px rgb(124, 248, 175),0 0 4px rgb(159, 159, 159);
    min-height:75%;
    max-height:75%;
    min-width:95%;
    margin-left: auto;
    margin-right:auto;
    margin-top: auto;
    margin-bottom:auto;
    border-radius: 5%;



  }   
   
  
  .equalsText{
    font-size:2.2em;
    font-weight:bold;
  }
  .key.equalsTotal.dance{
    animation:dance 500ms ease-in-out;
  }

  .key.equalsTotal.shake-rotate {
    animation: shakeRotate 500ms ease-in-out;
  }
  .key.equalsTotal.shake-rotateY {
    animation: shakeRotateY 750ms ease-in-out;
  }

  @keyframes shake {
    10% {
      transform:translateX(-5%);
    }
    30% {
      transform: translateX(5%);
    }
    50% {
      transform: translateX(-7.5%);
    }
    70% {
      transform: translateX(7.5%);
    }
    90% {
      transform: translateX(-5%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes dance{
    20%{
      transform: translateY(-25%);    
    }
    40%{
      transform: translateY(3%);    
    }
    60%{
      transform: translateY(-15%);    
    }
    80%{
      transform: translateY(2%);    
    }
    90%{
      transform: translateY(-5%);    
    }
    100%{
      transform: translateY(0);    
    }
    
  }
  @keyframes shakeRotate {

    15% {
      transform: rotate(-22deg);
    }

    40% {
      transform: rotate(22deg);
    }

    55% {
      transform: rotate(-10deg);
    }
    65% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(10deg);
    }
    90% {
      transform: rotate(-5deg);
    }
    97% {
      transform: rotate(2deg);
    }
    100% {
      transform: rotate(0deg);
    }
    
  }

  @keyframes shakeRotateY {

    15% {
      transform: rotateY(-42deg);
    }

    40% {
      transform: rotateY(42deg);
    }

    55% {
      transform: rotateY(-20deg);
    }
    65% {
      transform: rotateY(0deg);
    }
    75% {
      transform: rotateY(20deg);
    }
    90% {
      transform: rotateY(-10deg);
    }
    97% {
      transform: rotateY(5deg);
    }
    100% {
      transform: rotateY(0deg);
    }
    
  }

 

  .deleteText{
    
    font-size:xx-small;
  }
  
  .key.operator {
  
    font-size:1.5em;
    grid-column: span 1;
    grid-row: span 1;
    background-color: white;
    font-weight:600;
    width:63%;
    height:63%;
    margin: auto;
    
  }

  .key.operator.times {
    color: blue;
    border-color: blue;

  }

  .key.operator.plus{
color: blue;
border-color: blue;

  }
.key.operator.minus{
  color: blue;
  border-color: blue;

}

 
  .key.cnum{
   
     /* font-size:1.2em; */
      grid-column: span 1;
      grid-row: span 1;
      color: white;
      background-color: rgb(38, 106, 216);
      border: 0.05em solid rgb(0, 0, 255);
      border-radius: 5%;
      
    
    
  }
  /* This is used when the NUMBER appears in this button*/
  .key.cnum.larger{
    
    font-size: 220%;
    
  }

  /* This is used when the words 'text' appears in this button*/
  .key.cnum.smaller{
    font-size: 75%;
    
  }
  

        /* Would like to make this next line conditional on the key being available to click on I think */
        .key:hover, .key:focus {
          
          --lightness-offset: 10%;
          
        }

        .key.number.used{
          --lightness: 33%;
        }

  .guess-grid {
    display:grid;
    
    justify-content: center; 
    align-content: center;
    flex-grow: 1;

    grid-auto-flow: column;   /*this keeps my calculator-grid close to my guess grid vertically */
    grid-template-rows: repeat(1, 4em);
    
    margin-bottom:5em;  
  
  }

  
  .tile{
    font-size: 3em; /*this font size seem to be having a big
     impact on the height of the operators relative to the numbers.
      the numbers at this size seem to be much bigger than the
       containers available for them*/
      
    color: rgb(38, 106, 216);
    
    border:0.05em solid white; /*this gives me a border around my tiles*/
    border-radius: 5%; /*this gives the tile's border a little curve*/
    
  /*  border: 0.05em solid hsl(240, 3%, 7%);  */
    background-color: hsl(0, 0%, 100%);   /* bring % back to 60% for original grey background (here and in body) */
    text-transform: uppercase;
    font-weight: bold;
    display: flex;

    user-select: none;
    gap: 0.01em;  

    transition: transform 250ms linear;
    
  }
 
  /*if the game times out, and there were numbers (and operators) in the guess-grid then 
  the game-over function will assign a class of hide to the guess grid and this next set of .css
  will select all of the children that are in guess-grid at this point in time and effectively 
  clear them out */
  div.guess-grid.hide > * {
    gap: 0;
    padding:0;
    width:0;
    display:none;
 }
  
  .tile.number{
  /*    I had been using twice the width for numbers as for operators in the display but changed the columns so that they get created dynamically from the centre at guess-grid level
  grid-column: span 2; 
  color:blue; */
  padding:0.1em; 
  
 
    
  }

  .tile.operator{
  /*  grid-column: span 1;
    
    color:blue;  */
    padding:0.1em;
    
  }
  .tile.shake{
    animation:shake 250ms ease-in-out;
  }
  .tile.dance{
    animation:dance 500ms ease-in-out;
  }
  @keyframes shake {
    10% {
      transform:translateX(-5%);
    }
    30% {
      transform: translateX(5%);
    }
    50% {
      transform: translateX(-7.5%);
    }
    70% {
      transform: translateX(7.5%);
    }
    90% {
      transform: translateX(-5%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes dance{
    20%{
      transform: translateY(-25%);    
    }
    40%{
      transform: translateY(3%);    
    }
    60%{
      transform: translateY(-15%);    
    }
    80%{
      transform: translateY(2%);    
    }
    90%{
      transform: translateY(-5%);    
    }
    100%{
      transform: translateY(0);    
    }
    
  }
  .tile.flip{
transform: rotateX(90deg);

  }
/* these next couple of styles  where I include 'game1' are put in there so that my guess grid width goes back to 
zero at the end of round 1 which means that round 2 will be perfectly centered when it gets displayed.
It seems that I will also need to repeat these lines for round 2,however because I am not adding any more
characters after round3, i will not need to have these lines with a round3 trigger on them.*/
  .tile.game1{
    gap: 0;
    padding:0;
    width:0;
    display:none;
  }

  .tile.game2{
    gap: 0;
    padding:0;
    width:0;
    display:none;
  }

  .tile.game3{
    gap: 0;
    padding:0;
    width:0;
    display:none;
  }



      /*this next one covers Google pixel 2XL, 3, 4, iphone 11, 11 pro max, 11 xr, 11 xs max, 12 pro max, 13 pro max, 14 plus, 14 pro max AND iphone 11 pro, 11 X, 11 Xs, X, 12, 12 pro, 13, 13 pro, 14, 14 pro, Google pixel 5 */
@media only screen and (min-device-width: 375px) and(max-device-width: 430px) and (min-device-height: 715px) and (max-device-height: 932px){
  .gameContainer{
    height: 90vh;
  }
  .calculator-grid {
    width: 82%;
    height: 42%;
  } 
  .guess-grid {
    margin-bottom: 9em;  
  }

}
 

/*this next one covers galaxy 8 8+ 9 9+, iphone 12 mini, 13 mini */
@media only screen and (min-device-width: 360px) and (min-device-height: 720px)and (max-device-height: 780px){
  .gameContainer{
    height: 90vh;
  }
  .calculator-grid {
    width: 82%;
    height: 42%;
  } 
  .guess-grid {
    margin-bottom: 7em; 
  }

}

/*This one is specific to the iphone 6,6s, 7 & 8, galaxy s7, s7 Edge*/
@media only screen and (min-device-width: 360px) and (max-device-height: 667px){
  .gameContainer{
    height: 90vh;
  }
  .calculator-grid {
    width: 72%;
    height: 42%;
  } 
  .guess-grid {
    margin-bottom: 7em;  
  }

}

/*this one covers iphone 5*/
@media (max-width: 321px) {
  .gameContainer{
    height: 90vh;
  }
 .calculator-grid {
    width: 80%;
    height: 42%;
  }  
  .guess-grid {
    margin-bottom: 3em;  
  }
  #title {

    font-size: 1.1em;
    letter-spacing: 0.05rem;
    width:210px; 
     
   }
   .tm-symbol {
       margin-left: 0.05em; /* Adjust the value to increase or decrease the space between the symbol and the word */
   }
   button.icon {
    padding: 0;
       
  }
}


 /* the timer container is the area where I currently have my 1 minute timer located*/

 .timer-container {
  /*  left:650px; */
  display: flex;
  flex-direction: row;
/* justify-content: left; */
  align-self: start; 
    font-size: small;
  /*  justify-content:center;
    align-content: center; */
    /* color: rgb(38, 106, 216); */
    color: rgb(255, 255, 255); 
    padding-left:0px;
    padding-top: 2px;
    padding-bottom:0px;
    user-select: none;
    
    
/*    position: relative;
    left: 50vw;
    transform: translateX(-50%); */
      
  }
 
  /*alert-container is the container that is 'permanently' set up in the html and new alerts append to this*/
.alert-container{
  position: absolute;  /*previously was absolute but I needed to change it to fixed to introduce a z-index so that my alerts would show up on top of my results modal May 23. Not sure why I did this, have changed it back to 
  absolute as a) when it was at fixed, they still weren't showing up on top of my modals and b) I can't remember why I needed them to do this and 
  c) have it in as fixed meant that my bottom navigation bar on my browser wouldn't ever disappear and so people were going to be dealing with a 
  reduced viewport always*/
  z-index: 9999;
  background-color: white;
  width:495px;
  /*left: 50vw;
  transform: translateX(-50%); */
  top: 25vh;
 /* z-index:1;*/
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
   

}
.openingAlert-container{
  position: absolute; 
  z-index: 1000;
  background-color: white;
  width:495px;
  /*left: 50vw;
  transform: translateX(-50%); */
  top: 15vh;
  z-index:1;
  display: flex;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
   

}

@media (max-width: 480px) {
  .alert-container {
    max-width: 90%;
  }
}
/* alert class get allocated to a new alert and is 'contained' by the alert-container. In here I am setting the alert to be a flex box
in the column direction (so that any buttons appear underneath any message), centered, colours etc.*/
.alert{
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: white;  /*hsl(204,7%,85%)*/
  padding:.5em;
  border-radius: .25em;
  opacity:1;
  transition:opacity 500ms ease-in-out;
  margin-bottom: .5em;
  box-shadow: 0 4px 23px 0 rgb(0 0 0 / 35%);
  font-size:1rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  
}
@media (max-width: 480px) {
  .alert {
    max-width: 90%;
  }
}

.alert:last-child{
margin-bottom: 0;

}

.alert.hide{
  opacity:0;
}

/* openingAlert class get allocated only to the first pop up alert as I want to format it slightly differently*/
.alert.openingAlert{
 
  /*justify-content: center;
  align-items: center;  */
  text-align: left;
 
  
}


/*The purpose of the buttons-container is to allow me to manipulate the positioning buttons within my alert container*/
.buttons-container {
  margin-top: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: right;
  gap: 1rem; /* Add space between the buttons */
}
  
/* the AlertButton class allows me to manipulate the font, colour etc. of the buttons themselves*/
.AlertButton{
  color: black;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
    border-radius:8%;
    border: 1px solid black;
    height: 1.8em;
    background-color: white;
 
    
  
}


        /* This whole next section relates to the output display where you are given your results and your score and your option to share*/

        /*The first part here sets the whole results div so that it doesn't appear until this 'display' is changed to block - then it will pop up*/
        .results_container{
          
          display:none;
          
        }
        h3{
          margin-bottom: 0.4em;
        }

        h5{
          margin-top:0.7em;
          margin-bottom: 0.1em;
        }

        .results_container.welcome{
          display:none;
          
          /* THE  DISPLAY HERE IS CURRENTLY SET TO NONE BY DEFAULT - THIS MEANS THAT THE INSTRUCTIONS SCREEN DOES NOT POP UP BY DEFAULT AT THE BEGINNING OF THE GAME
          INSTEAD YOU NEED TO CLICK THE ? BUTTON AT THE TOP TO GET THE INSTRUCTIONS - AS REQUESTED BY RACH, AL DIDN'T READ THE INSTRUCTIONS EITHER. WHO DOES? */
        }
        .results_container.instructionPopUp{
          display:none;
          
        }
        
        .result_container.menu{
          display:none;
        }

       

        .results_container.information{
          display:none;
        }
        .results_container.settings{
          display:none;
        }
/*This is the pop up that explain the 6/7 scores count towards you weekly total*/
         .weeklyScoreInfoPopup{ 
         display:none;
         }

         .weeklyScoreInfoPopup{

          position:absolute; 
          background-color: rgb(242, 246, 250);
          max-width:495px;
          width:90%;
          
          height: 100%;  /*note - you had tried to use svh and dvh in here as units but it broke your 
          results modal when viewed on the mobile phone (both mine and Rose's) so you have gone back to %. */
          max-height: 95%;
          overflow-y: auto; 
          box-shadow: 0 4px 23px 0 rgb(0 0 0 / 35%);
          padding:5px 10px 10px 10px;
          border-radius: 8px;
          font-size: 14px;
                   
          /*top 50%, sets the top to be half way down the page */
          top: 50%;
          /*left 50%, sets the left edge to be half across the page */
          left: 50%;  
          
          transform: translate(-50%,-50%); 
          user-select: none;
          z-index:900;

         }
       


        .results_container{
          position:absolute; 
          background-color: rgb(242, 246, 250);
          width:90%;
          max-width:495px;
          height: 100%;  /*note - you had tried to use svh and dvh in here as units but it broke your 
          results modal when viewed on the mobile phone (both mine and Rose's) so you have gone back to %. */
          max-height: 95%;
          overflow-y: auto; 
          box-shadow: 0 4px 23px 0 rgb(0 0 0 / 35%);
          padding:5px 10px 10px 10px;
          border-radius: 8px;
          font-size: 14px;
                   
          /*top 50%, sets the top to be half way down the page */
          top: 50%;
          /*left 50%, sets the left edge to be half across the page */
          left: 50%;  
          
          transform: translate(-50%,-50%); 
          user-select: none;
          z-index:900;
            
        }
/* the following header instructions ul & li are all relating to elements with in my instructions boxes (initial and ones explaining the how the results are generated)*/
.dictionary_style {
  font-size:1.3em;
  text-align: left;
  color: rgb(38, 106, 216);
  padding:40px 20px 80px 20px;
}
.bold_text {
font-weight: bold;

}

@media only screen and (max-device-width: 430px){
  .dictionary_style{
    font-size:.9em;
    padding:40px 20px 20px 20px
  }
}

        .header{
          font-size:1.8em;
          font-weight:500;
          padding-left:.63em;

        }
        .instructions{
          font-size:1.2em;
          padding-left:.63em;
           }

        .instructions.emphasise{
          font-size:1em;
          font-style:oblique;
          font-weight:450;
        }
        ul{
          padding-left:1.2em;
          padding-right:.51em;
        }
        li{
          
          margin-top:0.25em;
           font-size:1.2em;
          padding-left:.63em;

          }
        .custom-video{
          display:flex;
          align-items: centre;
          justify-content: center;
        width:70%;
        height:50%;
        margin: 3em;
        border:0.02em solid black; 


        }
        

        .results_header{
          font-size:1.7em;
          display:flex;
          justify-content:space-between;
          align-items: center;
        }

        /*this one covers iphone 5*/
@media (max-width: 321px) {

  .results_header{
    font-size:1.4em;
  }
  .instructions{
    font-size:1.0em;
  }
  li{
     font-size:1.0em;
  }
  .header{
    font-size:1.3em;
    font-weight:600;
    padding-left:.63em;

  }
}
      
        .scoring.information{
          background: transparent;
          border: 0;
          cursor:pointer;
          padding: none;
          

        }
        
        .results_close{
        

          background: transparent;
          border: 0;
          cursor:pointer;
          font-size:30px;
          color:#000;
          position:absolute;
          right:-1px;
          top:1px;
      
        }
       

      
        .results_content{
          position: absolute;
          top:7%;  /* You might need a way of limiting this as if the screen gets very small, the contents cover the close button top right
          left:0; */
          background-color: rgb(242, 246, 250);

          display:grid;
          
           
          grid-template-columns:repeat(12,1fr);
          /* I had the grid-template rows the same as the columns where there was a repeat, but instead, I went for individual rows which allowed
          me to specify how much of the grid each row gets. All of the 1fr's are rows that always have data presentd. the 0.5fr is a row of space 
          while the 'auto's are rows where the reveal buttons appear, so they only appear sometimes and sometimes they are blank*/
          grid-template-rows: 1fr 0.5fr 1fr 1fr auto 1fr 1fr auto 1fr 1fr auto 1fr 1fr 1fr 1fr .8fr .8fr .8fr;
          
          max-width:95%;
          max-height:95%;
          width:95%;
          overflow-y: auto;
          /*line-height: 100%;
           flex-direction: column;*/
          align-items:center;
          justify-content:center;
          /*background-color: rgb(255, 255, 255);
          border-radius: 8px; */
          font-size:100%;
                          
        }
        .boxes{
          font-size:75%;
         }

          /*this part is just clearing out default browers buttons settings and giving giving my buttons a particular style that should appear 
     consistant across devices. NOTE: I'm not sure why I didn't just use .reveal{} to identify the buttons*/
       
         .results_content > .reveal{
            
          height: 95%;
          width: 95%;
          font-size:78%;
          grid-column:span 1.25;
          grid-row: span 1;
          color: black;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
            border-radius:8%;
            border: 1px solid rgb(136, 136, 136);
            background-color: rgb(242,246,250);
            cursor:pointer;
          
        } 

        .dayOfWeek {
          height: 90%;
          width: 90%;
          font-size:69%;
          grid-column:span 1;
         /* grid-row: span 1; */
          color: rgb(155, 155, 155);
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
            border-radius:2%;
            border: 1px solid rgb(242,246,250);
            background-color: rgb(242,246,250); 
            

        }

        .raise {
          width:90%;
          color: white;
          border-color: white;
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
          background-color: rgb(155, 155, 155); 
          cursor: pointer;
        /*  margin-right: 4px; */
        }

        .dayOfWeek.Tot{
          padding-top:10%;

        }

        .dailyAverageScore{
          height: 90%;
          width: 90%;
          font-size:72%;
          color:rgb(99, 99, 99); 
          grid-column: span 7;
        }

        .averageScore{
          padding-top:10%;
          height: 90%;
          width: 90%;
          font-size:72%;
          color:rgb(99, 99, 99); 
        }


        @media (min-width: 490px) {
          .results_content {
            grid-template-rows: 1fr 1fr 1fr 1.5fr .75fr .75fr 1.5fr .75fr .75fr 1.5fr .75fr .75fr 1fr .75fr .75fr .7fr .7fr .7fr;
            font-size: 135%;
          }                
        }
        /*The iphone 14 max has a view port of 430 so I'm reducing the fontsize from what was 122% down to 100% to try to accommodate the new days of the week*/
        @media(max-width:430px){
          .results_content{
          grid-template-rows: 1fr 1fr 1fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr .75fr .75fr .7fr .7fr .7fr;
          font-size:100%;
        }
        }
/*Iphone 13 has a viewport of 390 x 844  (also AE's phone Iphone 12)- this is RMCL's phone  You have reduced this from 122 to 90 when adding in the new days of the week*/
        @media(max-width:390px){
          .results_content{
          grid-template-rows: 1fr 1fr 1fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr .75fr .75fr .7fr .7fr .7fr;
          font-size:85%;
        }
        }
/*this next one is targetting iphone 12 & 13 mini which Rach is reporting has an overlap of words at the bottom of the container. 
It is worth noting however that stack browser is not showing the same issue curiously*/
        @media(max-width:375px) and (max-height:629){ 
          .results_content{
          grid-template-rows: 1fr 1fr 1fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr .75fr .75fr .7fr .7fr .7fr;
          font-size: 80%;
          /*font-size:100%;  reducing this to account for the new days of the week*/
        }
        }
        @media(max-width:374px){
          .results_content{
          grid-template-rows: 1fr 1fr 1fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr 0.5fr 0.75fr 1fr .75fr .75fr .7fr .7fr .7fr;
          font-size:117%;
        }
        }

        @media(max-width:364px){ /*This one takes care of the iphone 13 mini (which has a viewport width of 360)*/
          .results_content{
          grid-template-rows: 1fr 0.9fr 1fr 1fr 0.5fr 0.7fr 1fr 0.5fr 0.7fr 1fr 0.5fr 0.7fr 1fr .75fr .75fr .7fr .7fr .7fr;
          font-size:100%;
        }
        }



        @media(max-width:321px){
          .results_content{
          grid-template-rows: 0.9fr 0.25fr 0.9fr 0.9fr 0.5fr 0.25fr 0.9fr 0.5fr 0.25fr 0.9fr 0.5fr 0.25fr 0.9fr .25fr .25fr .7fr .7fr .7fr;
          font-size:70%;
        
        }
        .charlies-number{
          font-size: 1.2em;
        }
        .points{
          font-size: 1.2em;
        }
        .your-solution{
          font-size: 1.3em;
        }
          .heading-row{
            font-size: 1.15em;
          }
          .result.Total {
            font-size:1.2em;
          }
        

        }
       
      

        .charlies-number-heading {
          grid-column: span 12;
          font-weight: 450;
          color:black;
          font-size:medium;
          text-align: center;
         }
       @media(min-width:375px){
       .charlies-number-heading{
       font-size:larger
       }
      }
      
       
        .results_content > div{
          background:rgb(242, 246, 250);
          text-align: center;
       
          
          }
    
          

        

/*          @media(min-width:375px){
            .results_content > button{
            font-size: size 69%;
          }
          
          }   */
        
    /* this next bit tells my reveal buttons how to behave depending on whether the player got the solution correct or not*/
    
    .reveal.hide{
      opacity:0;
     
      }
     
     
     .samecolwidth{
       grid-column: span 2;
       
      
     }
    
     
     .your-solution {
       grid-column: span 5;
      
       
      }
     
     .space1{
       grid-column: span 1;
      
       
     }
    
     
     .space2{
       grid-column: span 2;
       
     }
     
     .space4{
       grid-column: span 4;
       
       
     }
     
     .spacefull{
       grid-column: span 12;
      
       
     }
  
     .result.Total{
       grid-column: span 4;
     
     }
     .points.total{
       grid-column: span 2;
     }
     .timeToNextCharliesNumber{
       grid-column: span 12;
     }

     .revealbuttonspace{
      grid-column: span 0.5;
     }

    /* .dayofweek{
      grid-column:span 1;
      color:hsl(0, 0%, 60%);
      font-size:small;
     }  */

     /* the following relates to testing my share functionality it will be removed and placed appropriatly when I figure it out. */
  .share {
    font-size: inherit;
    grid-column: span 1;
    grid-row: span 1;
    border-color: white;
    background-color: rgb(110, 191, 248);
    color: white;
    cursor:pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
          
    }

.share_text{
display:inline-flex;
padding:2px 2px 2px 2px;
vertical-align:top;
}      

    .copyemoji{
      display: none;
    }
 
     footer {
      display:inherit;
      position:relative;
      top:80%;
      text-align:center;
      justify-content: center;
      font-size:medium;
      
      
      
     }

.letsPlayContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%; /* Takes up the full width of its parent */
  height: 1.3em; /* You can adjust the height as needed */
}

.letsPlay{
  font-size: 1.1em;
  font-weight:500;
  
  padding:0.2em;
  
  border-color: white;
  background-color: rgb(38, 106, 216);
  color: white;
  cursor:pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  align-self: center;
  margin: 0 auto;
}

.preresultsremindermessage{
font-size: 1.3em;
font-weight:550;
color:rgb(38, 106, 216);
padding:0.5em 0.5em 0.5em 1em;


}



.submit{
  text-decoration: none !important;
  font-weight:600;
  
}


input[type="checkbox"].toggle{
opacity:0;
position:right;
left:-9000px;
top: -9000px;  
}
 input[type="checkbox"].toggle + label{
  position: relative;
  display:flex;
  align-items:center;
  cursor: pointer;
  
}

input[type="checkbox"].toggle+label::before{
  content:"";
  width: 3em;
  height: 1.5em;
  background-color:#b3b3b3;
  border-radius: 2em;
  margin-right:.25em;
  transition:200ms ease-in-out

} 
input[type="checkbox"].toggle+label::after{
  position:absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:0.75em;
  left:0.18em;
  content:"\2715";
  width: 1.8em;
  height: 1.8em;
  background-color:white;
  color:#b3b3b3;
  border-radius: 1em;
  transition:200ms ease-in-out
  
} 
input[type="checkbox"].toggle:checked+label::before{
  
  background-color:green;/*hsl(100, 63%, 61%);*/
 

} 


input[type="checkbox"].toggle:checked+label::after{
  content:"\2713";
  transform:translateX(100%);
  background-color:rgb(255, 255, 255);  
  color:green;/*hsl(100, 63%, 61%);*/
} 

input[type="checkbox"].toggle:disabled + label {
  color: #777;
}

input[type="checkbox"].toggle:disabled + label::before {
  background-color: #CCC;
}
input[type="checkbox"].toggle:disabled + label::after {
  background-color: #777;
}
input[type="checkbox"].toggle:disabled+label::after{
  
  color:#ccc;
} 
.spicy{
  font-size:1.2em;
}

.hidden{
  display:none;
}


    /*this is the end of the section that deals with the output display*/ 

    /*THIS NEXT SECTION DEALS WITH THE NAVIGATION MENU*/
    ul {
      list-style-type: none;
      padding: 0;
      display: flex; /* Make the buttons appear in a row */
  }
  
  .nav-button {
      flex: 1;
      text-align: center;
      padding: 10px; /* Adjust padding as needed */
      background-color: rgb(242, 246, 250);
      cursor: pointer;
      transition: background-color 0.3s; /* Add a transition effect for hover */
      font-size:1.5em;
    /*  text-transform: uppercase; */
      
  }
  
  .nav-button:hover {
      background-color: white; /* Darker shade on hover */
  }
  
  .nav-button a {
      text-decoration: none;
      color: rgb(38, 106, 216);
      display: flex;
      flex-direction:row;
      align-items: center;
  }
  

  .iconContainer {
    margin-right: 3em; /* Adjust the spacing between the icon and text as needed */
    display: flex;
    align-items: center;
}