:root,
:root.light {
    --left-colour: #f5dcbf;
    --right-colour: #cfdad1;
    --bc-colour: #faf9f6;
    --bg-colour: #7F9190;
    --bg-colour2: #eee;
    --bg-colour3: #4C4E52;
    --highlight-colour: orange;
    --special-colour: limegreen;
    --key-colour: #F4F0D9;
    --modal-colour: #faf9f6;
    color: #4C4E52;
    font-weight: 800;
}

[data-theme = "dark"] {
    --left-colour: #4C4E52;
    --right-colour: #4C4E52;
     --bc-colour: #070504;
    --bg-colour: #B8A598;
    --bg-colour2: #7F9190;
    --bg-colour3: #eee;
     --highlight-colour: #df9c20;
    --special-colour: #51ae51;
    --key-colour: #4C4E52;
    --modal-colour: #4C4E52;
     color: #eee;
    font-weight: 450;
}


html, body {
        height: 100%;
        width: 100%;
        margin: 0 auto;
     background-color: var(--bc-colour);
    color: var(--bg-colour3);
      }

h1 {
 text-align: center;
 color: var(--bg-colour);
    font-family: verdana;
}

h2 {
 text-align: center;
 color: var(--bg-colour);
    font-family: verdana;
}

h3 {
 text-align: right;
 color: var(--bg-colour);
    font-family: verdana;
}

h4 {
 text-align: left;
 color: var(--bg-colour);
    font-family: verdana;
    font-size: 1.2em;
}

#upper {
    text-transform: uppercase;
}

.play {
  display: flex;
  align-content: center;
  justify-content: center;
}

#share {
    display: none;
    background-color: aqua;
    height: 5%;
}

.share {
    display: none;
    background-color: aqua;
    height: 5%;
}

p {
 text-align: left;
 font-family: verdana;
 color: var(--bg-colour3);
}  

    div {
        margin: 0 auto;
        padding: 0;
       -webkit-tap-highlight-color: transparent;
        cursor: pointer;
       
}
    .container {
        -webkit-tap-highlight-color: transparent;
        align-content: center;
        background: transparent;
        width: device-width;
        height: 100vh;
        min-width: 320px;
          padding: % 0;    
}

.bigcontainer {
           -webkit-tap-highlight-color: transparent;
        align-content: center;
        background: transparent;
        width: device-width;
    background-color: var(--bg-colour3);
        height: 100%;
}

.bigcontainer1 {
           -webkit-tap-highlight-color: transparent;
        align-content: center;
        background: transparent;
        width: device-width;
    background-color: var(--bc-colour);
  }

.bannerad {
    height: 0px;
 /*   height: 50px;*/
}

.container4 {
  display: flex;
}
.container4.space-around {
  justify-content: space-around;
}
.container4.space-between {  
  justify-content: space-between;
}
    .container5 {
        -webkit-tap-highlight-color: transparent;
        align-content: center;
        background: transparent;
        width: device-width;
        max-width: 23.475rem;
        aspect-ratio: 1/1.31;
        height: auto;
        padding: % 0;    
          border: 0.3125rem solid var(--bg-colour);
}

    .newcontainer5 {
        -webkit-tap-highlight-color: transparent;
        align-content: center;
        background: transparent;
        width: device-width;
        max-width: 31.25rem;/*500px*/
        height: auto;
        padding: % 0;    
}

.container6 {
        -webkit-tap-highlight-color: transparent;
        align-content: center;
        background: transparent;
        width: device-width;
        max-width: 23.475rem;
        aspect-ratio: 1/1.31;
        height: auto;
        padding: % 0;    
          border: 0.3125rem solid var(--bg-colour);
}

.newcontainer6 {
        -webkit-tap-highlight-color: transparent;
        align-content: center;
        background: transparent;
        width: device-width;
        max-width: 31.25rem;
        height: auto;
        padding: % 0;    
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
    max-width: 255px;
    flex: 1;
}

.columnl {
  display: flex;
    background-color: var(--left-colour);
  flex-direction: column;
  flex-basis: 100%;
    max-width: 255px;
    flex: 1;
}

.columnr {
  display: flex;
    background-color: var(--right-colour);
  flex-direction: column;
  flex-basis: 100%;
    max-width: 255px;
    flex: 1;
}

.column1 {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
    flex: 0.15;
     margin-top: 2.5%;
    margin-bottom: 2.5%;
}

.column2 {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
    flex: 0.7;
    background-color: var(--bg-colour2);
}

.column3 {
  display: flex;
      margin-top: 2.5%;
    margin-bottom: 2.5%;
    margin-right: 1%;
    margin-left: 1%;
  flex-direction: column;
  flex-basis: 100%;
    flex: 0.0;
}

.column4 {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
    flex: 0.25;
}

.column5 {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
    flex: 0.4;
}

.column7 {
    padding-left: 2vw;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
    flex: 1;
    background-color: var(--bg-colour2);
}

.column8 {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
    flex: 0.25;
}

.double-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
    background-color: var(--bg-colour);
    max-width: 510px;
  flex: 2;
}

.row {
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
     background-color: var(--bg-colour2);
  }

.row2 {
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
  }

.row3 {
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
}

#keyboard-cont {
  margin: 1vh 0;/*0.76rem 0;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: verdana;
      min-height: 3.75rem;
/*    min-height: 60px;*/
}

#keyboard-cont div {
  display: flex;
}

.second-row {
  margin: 0.2vh;/*0.2rem 0;*/
}

.keyboard-button {
  font-size: 1rem;
  
  font-family: arial;
  padding: 0rem;
  width: 8vw;/*2.2rem;*/
  height: 12vw;
  margin: 0.0625rem;
    /* margin: 1px;*/
  cursor: pointer;
  text-transform: lowercase;
  background-color: var(--key-colour);
  border-color: var(--key-colour);
  -webkit-appearance: none !important;
  text-align: center !important;
  text-align: -moz-center !important;
  text-align: -webkit-center !important;
  color: var(--bg-colour3) !important;
}

.keyboard-button4 {
  font-size: 0.8rem;
  font-family: arial;
  padding: 0rem;
  width: 12vw;/*3.4rem;*/
  height: 12vw;
        border-bottom-right-radius: 0.3125rem;
  margin:  0.0625rem;
  cursor: pointer;
   background-color: var(--key-colour);
     border-color: var(--key-colour);
  -webkit-appearance: none !important;
  text-align: center !important;
  text-align: -moz-center !important;
  text-align: -webkit-center !important;
 color: var(--bg-colour3) !important;
}

.keyboard-button5 {
  font-size: 0.8rem;
    padding: 0rem;
  width: 12vw;/*3.4rem;*/
  height: 12vw;
  margin: 0.0625rem;
  cursor: pointer;
    background-color: var(--key-colour);
     border-color: var(--key-colour);
  -webkit-appearance: none !important;
  text-align: center !important;
  text-align: -moz-center !important;
  text-align: -webkit-center !important;
  color: var(--bg-colour3) !important;
     border-bottom-left-radius: 0.3125rem;
}

#letters-one {
    margin: 1vh 0;/*1.0rem 0;*/
  display: flex;
  flex-direction: column;
  align-items: center;
}

#keyboard-cont div2 {
  display: flex;
}

.second-row2 {
  margin: 0.0rem 0;
}

.keyboard-button2 {
  font-size: 0.rem;
    font-family: arial;
    cursor: pointer;
      background-color: var(--bc-colour);
    border-radius: 2222222222rem;
    border-style: hidden;
  padding: 0.15rem;
  width: 0.95rem;
    margin-left: 0.2vw;
    margin-right: 0.2vw;
  text-transform: lowercase;
  -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
    color: var(--bg-colour3) !important;
}

#letters-two {
 margin: 1vh 0;/*1.0rem 0;*/
  display: flex;
  flex-direction: column;
  align-items: center;
}

#gamecontainer1 {
  display: flex;
}

#gamecontainer2 {
  display: flex;
}


#keyboard-cont div3 {
  display: flex;
}

.second-row3 {
  margin: 0.0rem 0;
}

.keyboard-button3 {
  font-size: 0.rem;
   font-family: arial;
      background-color: var(--bc-colour);
    border-radius: 2222222222rem;
    border-style: hidden;
    cursor: pointer;
  padding: 0.15rem;
  width: 0.95rem;
     margin-left: 0.2vw;
    margin-right: 0.2vw;
  text-transform: lowercase;
  -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
    color: var(--bg-colour3) !important;
}

#topmenu1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    margin: 1.8rem 0; 
    margin-top: 1.8rem; 
    margin-bottom: 1.8rem; 
}

#topmenu2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    margin: 1.8rem 0;
        margin-top: 0.9rem; 
    margin-bottom: 1.4rem; 
}

#topmenu3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    margin: 1.8rem 0;
      margin-top: 0.9rem; 
    margin-bottom: 1.4rem; 
}

#alertbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    margin: 1.8rem 0;
    color: var(--bg-colour2);
    font-family: "verdana",
    font-size: 6rem;      
}

.questionbutton {
    border-color: var(--bg-colour);
    background-color: var(--bg-colour2);
    border-style: groove;
  font-weight: 700;
  font-family: verdana;
    font-size: 1.375rem;/*1.375em;*/
  padding: 1vw;/*0.1rem;*/
  width: 10vw;/*2.2rem;*/
    height: 10vw;/*2.2rem;*/
   margin: 0.3vw;/*0.09375rem;*/
  cursor: pointer;
  text-transform: uppercase;
    border-radius: 0.25rem;/*4px*/
    transition-duration: 0.4s;
    color: var(--bg-colour) !important;
          -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
}

.questionbutton:hover {
  background-color: var(--highlight-colour);
  color: var(--bc-colour);
}

.sharey {
    border-color: var(--bg-colour);
    background-color: var(--right-colour);
    border-style: groove;
      font-weight: 700;
  font-family: verdana;
    height: 2.5rem;
    padding: 0.1rem;
    text-align: center;
    font-size: 1.5rem;
  width: 36vw;
  margin: auto;
  cursor: pointer;
  /*text-transform: uppercase;*/
    border-radius: 0.25rem;/*4px*/
    transition-duration: 0.4s;
    color: var(--bg-colour) !important;
          -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
}

.sharey:hover {
  opacity: 0.68;
}



.magicky {
 border-color: var(--left-colour);
    background-color: var(--left-colour);
    border-style: none;
      font-weight: 700;
  font-family: verdana;
    height: 1.8rem;
    padding: 0.1rem;
    text-align: center;
    font-size: 1rem;
    text-transform: lowercase;
  width: 10rem;
  margin: auto;
  cursor: pointer;
    border-radius: 0.25rem;/*4px*/
    transition-duration: 0.4s;
    color: var(--bg-colour) !important;
          -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
}

.magicky:hover {
  opacity: 0.68;
}

.magicky2 {
    background-color: var(--right-colour);
    border-style: none;
      text-transform: lowercase;
      font-weight: 700;
  font-family: verdana;
    height: 1.8rem;
    padding: 0.1rem;
    text-align: center;
    font-size: 1rem;
  width: 10rem;
  margin: auto;
  cursor: pointer;
      border-radius: 0.25rem;/*4px*/
    transition-duration: 0.4s;
    color: var(--bg-colour) !important;
          -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
}

.magicky2:hover {
  opacity: 0.68;
}

.copy {
    border-color: var(--bg-colour);
    background-color: var(--right-colour);
    border-style: groove;
  font-weight: 700;
  font-family: verdana;
    height: 2.5rem;
    width: 12vw;
    width: auto;
    text-align: center;
  margin: auto;
  cursor: pointer;
  text-transform: uppercase;
    border-radius: 0.25rem;/*4px*/
    transition-duration: 0.4s;
    color: var(--bg-colour) !important;
          -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
}

.copy:hover {
  opacity: 0.68;
}

.showyshow {
    border-color: var(--bg-colour);
    background-color: var(--highlight-colour);
    border-style: groove;
  font-weight: 700;
  font-family: verdana;
  padding: 0.1rem;
  width: 6.5rem;
     height: 3rem;
  margin: auto;
  cursor: pointer;
  text-transform: uppercase;
   border-radius: 0.25rem;/*4px*/
    transition-duration: 0.4s;
    color: var(--bg-colour) !important;
          -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
}

.showyshow:hover {
  color: var(--bc-colour);
  opacity: 0.68;
}

.hideyhide {
    border-color: var(--bg-colour);
    background-color: var(--bg-colour);
     border-style: groove;
  font-weight: 700;
  font-family: verdana;
  padding: 0.1rem;
  width: 6.5rem;
     height: 3rem;
  margin: auto;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 0.25rem;/*4px*/
    transition-duration: 0.4s;
    color: var(--modal-colour) !important;
          -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
}

.hideyhide:hover {
  color: var(--bc-colour);
}

.app {
    display: none;
    border-color: var(--bg-colour);
    background: var(--left-colour);
    margin: auto;
  color: limegreen !important;
     font-weight: 700;
  font-family: verdana;
  padding: 0.1rem;
width: 25vw;/*4.8rem;*/
    height: 2.5rem;
    font-size: 1.5rem;
    border-color: var(--bg-colour);
     border-style: groove;
 border-radius: 0.25rem;/*4px*/
              -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
}

.app:hover {
  color: #faf9f6;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}

.daily {
    display: none;
    border-color: var(--bg-colour);
    background: var(--left-colour);
    margin: auto;
  color: limegreen !important;
     font-weight: 700;
  font-family: verdana;
  padding: 0.1rem;
 width: 25vw;/*4.8rem;*/
    height: 2.5rem;
    font-size: 1.5rem;
    border-color: var(--bg-colour);
     border-style: groove;
 border-radius: 0.25rem;/*4px*/
              -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
}

.weekly {
    display: none;
    border-color: var(--bg-colour);
    background: black;
    margin: auto;
  color: var(--highlight-colour) !important;
     font-weight: 700;
  font-family: verdana;
  padding: 0.1rem;
 width: 25vw;/*4.8rem;*/
    height: 2.5rem;
    font-size: 1.5rem;
    border-color: var(--bg-colour);
     border-style: groove;
 border-radius: 0.25rem;/*4px*/
              -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
}

.weekly:hover {
  opacity: 0.68;
}

#awesome {
  margin: 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: verdana;
      min-height: 5.375rem;
}

#woeful {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: verdana;
      min-height: 6.25rem;
}

#congratulations {
  display: flex;
  align-items: center;
  flex-direction: column;
      font-family: verdana;
   min-height: 1.625rem;  
}

#nextdaily {
  display: flex;
  align-items: center;
  flex-direction: column;
      font-family: verdana;
    min-height: 2.8125rem;
      }
         
#game-board {
  display: flex;
  align-items: center;
  flex-direction: column;
       min-height: 45vw;
}

.letter-box {
  border: 0.06125rem solid var(--bg-colour);
  border-radius: 0.25rem;
    margin: 0.25vw;/*0.06125rem;*/
  font-family: arial;
  font-size: 1.6rem;
 /* font-weight: 700;*/
  height: 8.5vw;
 /* width: 1.85rem;*/
    width: 8.5vw;
     display: flex;
  justify-content: center;
  align-items: center;
  text-transform: lowercase;
}

.filled-box {
  border: 0.06125rem solid var(--bg-colour3);
       font-family: arial;
}

.letter-row {
  display: flex;
}

#game-board2 {
  display: flex;
  align-items: center;
  flex-direction: column;
   min-height: 45vw;
}

.letter-box2 {
  border: 0.06125rem solid var(--bg-colour);
  border-radius: 0.25rem;
   margin: 0.25vw;/*0.06125rem;*/
  font-family: arial;
  font-size: 1.6rem;
  /*font-weight: 700;*/
  height: 8.5vw;
 /* width: 1.85rem;*/
    width: 8.5vw;
     display: flex;
  justify-content: center;
  align-items: center;
  text-transform: lowercase;
}

.filled-box2 {
  border: 0.06125rem solid var(--bg-colour3);
        font-family: arial;
}

.letter-row2 {
  display: flex;
}

.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
      width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}

.modal-content {
  background-color: var(--modal-colour);
  margin: 15% auto; 
  
    margin-top: 8.3%;
  border: 0.06125rem solid var(--bg-colour);
    font-family: verdana;
    max-width: 23.4375rem;
}

.modalC {
  background-color: var(--modal-colour);
  margin: 15% auto; 
  padding: 1.25rem;
    margin-top: 8.3%;
  border: 0.06125rem solid var(--bg-colour);
    font-family: verdana;
 width: 80%; 
}

.closeC {
  color: var(--bg-colour);
  float: right;
  font-size: 1.75rem;
  font-weight: bold;
}

.popup {
      background-color: var(--modal-colour);
       display: none; 
  position: fixed; 
    align-content: center;
 font-size: 2.5vh;
    height: 100vh;
    padding-left: 5vw;
    padding-right: 5vw;
    margin: 0 auto;
  /*   max-width: 320px;/*500px*/
      width: 90vw;
 /* width: 100%; */
  overflow: auto; 
 /* margin: 15% auto; 
    margin-top: 8.3%;
  padding-left: 1.25rem;
    padding-right: 1.25rem;
  border: 0.06125rem solid var(--bg-colour);*/
    font-family: verdana;
 /* width: 23.4375rem;*/ 
}

.close {
  color: var(--bg-colour);
  float: right;
  font-size: 1.75rem;/*28px;*/
  font-weight: bold;
    padding-right: 3%;
}

.close:hover,
.close:focus {
  color: var(--highlight-colour);
  text-decoration: none;
  cursor: pointer;
}

.modal1 {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
     font-family: verdana;
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}

.modal-content1 {
  background-color: var(--modal-colour);
  margin: 15% auto; 
    margin-top: 8.3%;
  padding-left: 1.25rem;
  border: 0.06125rem solid var(--bg-colour);
    font-family: verdana;
  width: 90%;/*21.25rem;340px;*/ 
      max-width: 31.25rem;/*500px*/
}

.modal4 {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
     font-family: verdana;
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}

.modal-content4 {
  background-color: var(--modal-colour);
  margin: 15% auto; 
    margin-top: 8.3%;
  padding-left: 1.25rem;
  border: 0.06125rem solid var(--bg-colour);
    font-family: verdana;
   width: 90%;/*21.25rem;340px;*/ 
      max-width: 31.25rem;/*500px*/
}

.close4 {
  color: var(--bg-colour);
  float: right;
  font-size: 1.75rem;/*28px;*/
  font-weight: bold;
    padding-right: 3%;
}

.close4:hover,
.close4:focus {
  color: var(--highlight-colour);
  text-decoration: none;
  cursor: pointer;
}

#chartee {
    width: 16.25rem;/*260px;*/
}

.close1 {
  color: var(--bg-colour);
  float: right;
  font-size: 1.75rem;
  font-weight: bold;
    padding-right: 3%;
}

.close1:hover,
.close1:focus {
  color: var(--highlight-colour);
  text-decoration: none;
  cursor: pointer;
}

tr {
    border: none;
    border-collapse: collapse;
}

#popup1 {
  -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0);
}

a,
a:visited {
  text-decoration: none;
  color: var(--modal-colour);
  font-weight: bold;
  display: block;
  margin: 0.6125rem 0;
}

a:hover,
a:active {
  text-decoration: underline;
}

.popup a,
.popup a:visited {
  color: var(--modal-colour);
}

.close2 {
  color: var(--bg-colour);
  float: right;
  font-size: 1.75rem;
  font-weight: bold;
border-radius: 0.125rem;
        border-color: var(--bg-colour);
    background-color: var(--special-colour);
    border-style: groove;
  font-weight: 700;
  font-family: verdana;
padding-top: 0.625rem;
    height: 3rem;
  width: 6.5rem;
  margin: auto;
  cursor: pointer;
  text-transform: uppercase;
    border-radius: 0.25rem;
    transition-duration: 0.4s;
    color: var(--modal-colour) !important;
          -webkit-appearance: none !important;
    text-align: center !important;
 text-align: -moz-center !important;
 text-align: -webkit-center !important;
}

.close2:hover,
.close2:focus {
  color: var(--highlight-colour);
  text-decoration: none;
  cursor: pointer;
}

#congratulations2 {
  display: flex;
  align-items: center;
  flex-direction: column;
      font-family: verdana;   
}

#nextdaily2 {
  display: flex;
  align-items: center;
  flex-direction: column;
      font-family: verdana;  
}

.fa {
 padding: 0.6125rem;/*0.5625rem;*/
 /* font-size: 1.875rem;*/
  width: 15vw;/*3.125rem;*/
  text-align: center;
  text-decoration: none;
}

.fa:hover {
  opacity: 0.68;
}

.fa-facebook {
  background: #3B5998;
    margin: auto;
     width: 15vw; /*3.4rem;*/
  color: #ffffff !important;
    border-color: var(--bg-colour);
     border-style: groove;
    border-radius: 0.25rem;
}

#statto {
    
    padding-top: 4%;
}

table {
    table-layout:fixed;
     width: 100%;
  margin: 1.25rem auto;
    text-align: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-colour2);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--bg-colour);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--bg-colour);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Popup container */
.popupt1 {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popupt1 .popuptext {
    font-family: verdana;
  visibility: hidden;
  width: 160px;
  background-color: var(--special-colour);
  color: var(--bg-colour3);
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popupt1 .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 9%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--special-colour) transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popupt1 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.popupt2 {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.popupt2 .popuptext {
    font-family:verdana;
  visibility: hidden;
  width: 160px;
  background-color: var(--highlight-colour);
  color: var(--bgcolour3);
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.popupt2 .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 9%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--highlight-colour) transparent transparent transparent;
}

.popupt2 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}