html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  vertical-align: baseline;
}
@font-face {
  font-family: "topmarksregular";
  src: url("topmarks-regular-webfont.woff2") format("woff2"),
    url("topmarks-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
img,
embed,
object,
video {
  max-width: 100%;
}
/*code for different browsers to give very pale green background to fixed width page with darkening gradient basically to see where the page is Petes original colour #A0EFA8 Sues second try #75e880 Sues fav so far #08cb08 */
.page {
  font-family: "topmarksregular", Times, serif;
  width: 100%;
  background-color: #c3db6d;
  /* background-image: url(homeimages/logoQnewbackground.png);*/
  background-position: 0px -700px;
  background-repeat: no-repeat;
}

body {
  line-height: 1;
  color: #2c2c2c;
  text-align: center;
  margin: 0px;
}

/*these entries determine the behaviour of the logo*/

.logo,
.logocontact {
  width: 150px;
  margin: 20px;
  margin-top: 30px;
  opacity: 0.2;
  position: absolute;
  top: -700px;
  left: 0;
}

.logocontact {
  transform: translateX(-2000px);
}
.logo img,
.logocontact img {
  opacity: 0.6;
  overflow-x: hidden;
}

.logoj {
  width: 200px;
}
.logoj img {
  width: 100%;
}

.logo3 {
  width: 180px;

  margin-top: 5px;
  margin-left: 10%;
}

/*this entry determines the properties of the taskbar*/

.taskbar {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0%;
  width: 100%;
  background-color: white;
  align-items: center;
  font-size: 60%;
}

.taskbar img {
  width: auto;
  height: 20px;
}
a.menu2 {
  margin-right: 20px;
  margin-left: auto;
}
/*these entries determine the properties of the menu links*/
a.menu {
  color: black;
  height: 40px;
  line-height: 40px;
  width: auto;
  padding-left: 20px;
  padding-right: 20px;
  border: #a454ff;
  text-decoration: none;
  font-size: 1.8em;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
a.menuselect {
  /* 'menuselect' is an different element i've created to change the colour of the links on current pages - this alternative element is specified on each html page*/
  color: #5dad27;
}

a.menu:hover,
a.menuselect:hover {
  color: #86d238;
  /* the code was used to create the moving link when hovered over but is no longer in use */
  /*-webkit-transform: translateY(-8px);
  transform: translateY(-8px);
  -webkit-animation-name: hover;
  animation-name: hover;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

a.menu:before,
a.menu:after {
  background: inherit;
  content: '';
  display: inherit;
  height: inherit;
  left: 0;
  line-height: inherit;
  position: absolute;
  top: 0;
  width: inherit;
z-index: -100;*/
}

/*this div determines the behaviour of the elements in the main part of the page - below the taskbar*/
.underline {
  text-decoration: underline;
}
.leftaligntext {
  text-align: left;
}
.mainpage {
  padding: 3% 4%;
  margin: 0% 5%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: rgba(255, 255, 255, 0.85);
}
.freepackagesgrid1,
.freepackagesgrid2,
.freepackagesgrid3,
.pictureindexgrid {
  padding: 3% 3%;
  margin: 0% 5%;
  display: grid;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

@media only screen and (max-width: 1024px) {
  .freepackagesgrid1,
  .freepackagesgrid2,
  .freepackagesgrid3,
  .pictureindexgrid {
    display: flex;
    flex-direction: column;
  }
}

.freepackagesgrid1 {
  grid-template-columns: 13% 44% 30% 13%;
  grid-template-rows: 33% 33% 33%;
}
.freepackagesgrid2 {
  grid-template-columns: 13% 30% 44% 13%;
  grid-template-rows: 33% 33% 33%;
}

.freepackagesgrid3 {
  grid-template-columns: 13% 44% 30% 13%;
  grid-template-rows: 25% 25% 25% 25%;
}

.freepackagesgrid3 {
  background-color: #7ac043;
}
.freepackagesgrid1 {
  background-color: #30c3e4;
}
.freepackagesgrid2 {
  background-color: #ffe72d;
}

.shortimage1A {
  background-color: #30c3e4;
  overflow: hidden;
  grid-column: 3;
  grid-row: 1;
  padding: 2%;
}
.shortimage1B {
  background-color: #30c3e4;
  overflow: hidden;
  grid-column: 3;
  grid-row: 2;
  padding: 2%;
}
.shortimage2A {
  background-color: #ffe72d;
  overflow: hidden;
  grid-column: 2;
  grid-row: 1;
  padding: 2%;
}
.shortimage2B {
  background-color: #ffe72d;
  overflow: hidden;
  grid-column: 2;
  grid-row: 2;
  padding: 2%;
}
.shortimage3A {
  background-color: #7ac043;
  overflow: hidden;
  grid-column: 3;
  grid-row: 1;
  padding: 2%;
}
.shortimage3B {
  background-color: #7ac043;
  overflow: hidden;
  grid-column: 3;
  grid-row: 2;
  padding: 2%;
}
.shortimage3C {
  background-color: #7ac043;
  overflow: hidden;
  grid-column: 2;
  grid-row: 3;
  padding: 2%;
}
.shortimage3D {
  background-color: #7ac043;
  overflow: hidden;
  grid-column: 3;
  grid-row: 3;
  padding: 2%;
}
.tallimage1 {
  background-color: #30c3e4;
  overflow: hidden;
  grid-row: 1 / span 2;
  grid-column: 2;
  padding: 2%;
}

.tallimage2 {
  background-color: #ffe72d;
  overflow: hidden;
  grid-row: 1 / span 2;
  grid-column: 3;
  padding: 2%;
}
.tallimage3 {
  background-color: #7ac043;
  overflow: hidden;
  grid-row: 1 / span 2;
  grid-column: 2;
  padding: 2%;
}
.freepackagestext {
  grid-column: 2 / span 2;
  grid-row: 3;
  display: flex;
  justify-content: center;
  text-align: left;
  flex-direction: column;
  padding: 3%;
}
.freepackagestext3 {
  grid-column: 2 / span 2;
  grid-row: 4;
  display: flex;
  justify-content: center;
  text-align: left;
  flex-direction: column;
  padding: 3%;
}

.pictureindexgrid {
  grid-template-columns: 13% 36% 36% 13%;
  grid-template-rows: 33% 33% 33%;
}

.shortimage1A img,
.shortimage1B img,
.tallimage1 img,
.shortimage2A img,
.shortimage2B img,
.tallimage2 img,
.shortimage3A img,
.shortimage3B img,
.shortimage3C img,
.shortimage3BD img,
.tallimage3 img {
  width: 100%;
}
.expandablepictureindeximageA1,
.expandablepictureindeximageA2,
.expandablepictureindeximageA3,
.expandablepictureindeximageA4,
.expandablepictureindeximageA5 {
  background-color: rgba(255, 255, 255);
  overflow: hidden;
  grid-column: 2;
  grid-row: 1;
  padding: 2%;
}

.expandablepictureindeximageB1,
.expandablepictureindeximageB2,
.expandablepictureindeximageB3,
.expandablepictureindeximageB4,
.expandablepictureindeximageB5 {
  background-color: rgba(255, 255, 255);
  overflow: hidden;
  grid-column: 3;
  grid-row: 2;
  padding: 2%;
}

.expandablepictureindeximageC1,
.expandablepictureindeximageC2,
.expandablepictureindeximageC3,
.expandablepictureindeximageC4,
.expandablepictureindeximageC5 {
  background-color: rgba(255, 255, 255);
  overflow: hidden;
  grid-column: 2;
  grid-row: 2;
  padding: 2%;
}

.pictureindeximageD1,
.pictureindeximageD2,
.pictureindeximageD3,
.pictureindeximageD4,
.pictureindeximageD5 {
  background-color: rgba(255, 255, 255);
  overflow: hidden;
  grid-column: 3;
  grid-row: 1;
  padding: 2%;
}

.expandablepictureindeximageA1 img,
.expandablepictureindeximageA2 img,
.expandablepictureindeximageA3 img,
.expandablepictureindeximageA4 img,
.expandablepictureindeximageA5 img,
.expandablepictureindeximageB1 img,
.expandablepictureindeximageB2 img,
.expandablepictureindeximageB3 img,
.expandablepictureindeximageB4 img,
.expandablepictureindeximageB5 img,
.expandablepictureindeximageC1 img,
.expandablepictureindeximageC2 img,
.expandablepictureindeximageC3 img,
.expandablepictureindeximageC4 img,
.expandablepictureindeximageC5 img,
.pictureindeximageD1 img,
.pictureindeximageD2 img,
.pictureindeximageD3 img,
.pictureindeximageD4 img,
.pictureindeximageD5 img {
  width: 100%;
  height: 100%;
}

.photosindextext {
  grid-column: 2 / span 2;
  grid-row: 3;
  display: flex;
  justify-content: center;
  text-align: left;
  flex-direction: column;
  padding: 3%;
}
.downloadButton {
  align-self: center;
}

.chainpage {
  padding: 3% 14%;
  margin: 0% 5%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: rgba(255, 255, 255, 0.8);
}
.chainpage img {
  width: 100%;
  max-height: 100%;
  padding-bottom: 10px;
}

.harleyblock img {
  max-width: 226px;
}
.blainpage {
  padding: 0% 4%;
  margin: 0% 5%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  background-color: rgba(255, 255, 255, 0.82);
}

.subblainpage {
  padding: 0% 4%;
  margin: 0% 5%;
  background-color: rgba(255, 255, 255, 0.82);
}

.painpage {
  padding: 3% 14%;
  margin: 0% 5%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: rgba(255, 255, 255, 0.8);
}

.contactpage {
  width: 100%;
  display: flex;
  z-index: 4;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.pagetitle {
  padding: 1%;
  z-index: 4;
  background-color: rgba(255, 255, 255, 0.85);
  font-size: 0.8em;
  line-height: 35px;
  margin: 0% 5%;
}

.homeblock {
  background-color: #c3db6d;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  font-size: 2em;
  text-decoration: none;
  border-radius: 5px;
}

.picblock {
  background: none;
  color: black;
  cursor: pointer;
  border: none;
  position: relative;
  padding: 0px;
  cursor: pointer;
  display: block;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
}

.picblock img {
  height: 100%;
  width: 100%;
  border-radius: 5px;
}

.picexpand-2xtables-1,
.picexpand-2xtables-2,
.picexpand-2xtables-3,
.picexpand-2xtables-4,
.picexpand-2xtables-5,
.picexpand-2xtables-6,
.picexpand-2xtables-7,
.picexpand-2xtables-8,
.picexpand-2xtables-9,
.picexpand-2xtables-10,
.picexpand-2xtables-11,
.picexpand-2xtables-12,
.picexpand-3xtables-1,
.picexpand-3xtables-2,
.picexpand-3xtables-3,
.picexpand-3xtables-4,
.picexpand-3xtables-5,
.picexpand-3xtables-6,
.picexpand-3xtables-7,
.picexpand-3xtables-8,
.picexpand-3xtables-9,
.picexpand-3xtables-10,
.picexpand-4xtables-8,
.picexpand-4xtables-7,
.picexpand-4xtables-6,
.picexpand-4xtables-5,
.picexpand-4xtables-4,
.picexpand-4xtables-3,
.picexpand-4xtables-2,
.picexpand-4xtables-1 {
  color: black;
  cursor: pointer;
  border: none;
  position: relative;
  padding: 0px;
  cursor: pointer;
  display: block;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  object-fit: cover;
}

.picexpand-2xtables-1 img,
.picexpand-2xtables-2 img,
.picexpand-2xtables-3 img,
.picexpand-2xtables-4 img,
.picexpand-2xtables-5 img,
.picexpand-2xtables-6 img,
.picexpand-2xtables-7 img,
.picexpand-2xtables-8 img,
.picexpand-2xtables-9 img,
.picexpand-2xtables-10 img,
.picexpand-2xtables-11 img,
.picexpand-2xtables-12 img,
.picexpand-3xtables-1 img,
.picexpand-3xtables-2 img,
.picexpand-3xtables-3 img,
.picexpand-3xtables-4 img,
.picexpand-3xtables-5 img,
.picexpand-3xtables-6 img,
.picexpand-3xtables-7 img,
.picexpand-3xtables-8 img,
.picexpand-3xtables-9 img,
.picexpand-3xtables-10 img,
.picexpand-4xtables-8 img,
.picexpand-4xtables-7 img,
.picexpand-4xtables-6 img,
.picexpand-4xtables-5 img,
.picexpand-4xtables-4 img,
.picexpand-4xtables-3 img,
.picexpand-4xtables-2 img,
.picexpand-4xtables-1 img {
  border-radius: 5px;
}

.modal-closepicexpand {
  display: none;
  position: fixed;
  top: 10px;
  right: 10px;
  font-weight: bold;
  font-size: 2em;
  z-index: 12;
  cursor: pointer;
}
.modal-closepicexpanddisplay {
  display: block;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 10;
  width: 100%;
  background-color: #e1edb7;
  object-fit: contain;
  padding-left: 2%;
  padding-right: 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fullscreen img {
  width: 100%;
}
.homeblock2 {
  font-size: 1.5em;
  position: relative;
  border-radius: 5px;
}

.homeblock2 img {
  width: 100%;
  border-radius: 5px;
}

.homeblock3 {
  font-size: 1.5em;
  position: relative;
  border-radius: 10px;
  display: inline-block;
  opacity: 0.3;
}

.mainpage a:hover {
  opacity: 0.7;
}

.mainpage img {
  width: 100%;
  z-index: 4;
}

.homeblock img {
  width: 50px;
  height: 60px;
}

.photo h2 {
  font-size: 16px;
}

.photo img {
  width: 100%;
  height: 100%;
}

.toptipblock img {
  width: 100%;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.shop {
  margin: 0% 5%;
  padding: 2% 5%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background-color: rgba(255, 255, 255, 0.85);
}

.gametobuy button:hover,
.gametobuyf button:hover {
  opacity: 0.8;
}

.modal-bg,
.modal-bg1,
.modal-bg2,
.modal-bg3,
.modal-bg4,
.modal-bg5,
.modal-bg6,
.modal-bg7,
.modal-bg8,
.modal-bg9,
.modal-bg10,
.modal-bg11,
.modal-bg12,
.modal-bg13,
.modal-bg14,
.modal-bg15,
.modal-bg16,
.modal-bg17,
.modal-bg18,
.modal-bg19,
.modal-bg20,
.modal-bg21,
.modal-bg22,
.modal-bg23,
.modal-bg24,
.modal-bg25,
.modal-bg26,
.modal-bg27,
.modal-bg28,
.modal-bg29,
.modal-bg31,
.modal-bg32,
.modal-bg33,
.modal-bg34,
.modal-bg35,
.modal-bg36,
.modal-bg37,
.modal-bg38,
.modal-bg39,
.modal-bg40,
.modal-bg41,
.modal-bg42,
.modal-bg43,
.modal-bg44,
.modal-bg45,
.modal-bg46,
.modal-bg47,
.modal-bg48,
.modal-bg49,
.modal-bg50,
.modal-bg51,
.modal-bg52,
.modal-bg53,
.modal-bg54,
.modal-bg55,
.modal-bg56,
.modal-bg57,
.modal-bg58,
.modal-bg59,
.modal-bg60,
.modal-bg61,
.modal-bg62,
.modal-bg63,
.modal-bg64,
.modal-bg65,
.modal-bg66,
.modal-bg67,
.modal-bg68,
.modal-bg69,
.modal-bg70,
.modal-bg71,
.modal-bg72,
.modal-bg73,
.modal-bg74,
.modal-bg75,
.modal-bg76,
.modal-bg77,
.modal-bg78,
.modal-bg79,
.modal-bg80,
.modal-bg81,
.modal-bg82,
.modal-bg83,
.modal-bg84,
.modal-bg85,
.modal-bg86,
.modal-bg87,
.modal-bg88,
.modal-bg89,
.modal-bg4-5,
.modal-bg5-6,
.modal-bg6-7 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgb(7, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s;
  z-index: 20;
  overflow-y: scroll;
}

.modal-bghs1,
.modal-bghs2,
.modal-bghs3,
.modal-bghs4,
.modal-bgtgrid1,
.modal-bgtgrid2,
.modal-bgtgrid3,
.modal-bgtgrid4,
.modal-bgdg1,
.modal-bgdg2,
.modal-bgdg3,
.modal-bgdg4,
.modal-bgdg5,
.modal-bgdg6,
.modal-bgdg7,
.modal-bgdg8,
.modal-bgdg9,
.modal-bgdg10,
.modal-bgdg11,
.modal-bgdg12,
.modal-bgdg13,
.modal-bgdg14,
.modal-bgdg15,
.modal-bgdg16,
.modal-bgdg17,
.modal-bgdg18,
.modal-bgdg19,
.modal-bgdg20,
.modal-bgdg21,
.modal-bgdg22,
.modal-bgdg23,
.modal-bgdg24,
.modal-bgdg25,
.modal-bglb2,
.modal-bglb3,
.modal-bglb4,
.modal-bglb5,
.modal-bglb6 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s;
  z-index: 20;
}

.bg-active {
  visibility: visible;
  opacity: 1;
}

.modal {
  background-color: #dabefa;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  position: relative;
  margin: 10vh 10%;
  width: 80%;
  height: 80vh;
}

.modallb,
.modaldg,
.modalhs {
  background-color: whitesmoke;
  width: 90%;
  height: 95%;
  position: relative;
}

.modallb img,
.modaldg img,
.modalhs img {
  height: 200px;
  padding: 5px;
}

.boxleft {
  max-height: 40vh;
  overflow-y: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.boxleft img {
  object-fit: contain;
}
.boxright {
  max-width: 800px;
  overflow-y: auto;
  margin: auto;
  text-align: left;
}

@media only screen and (max-width: 1024px) {
  .shop {
    margin: 0% 5%;
    padding: 2% 5%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .modal {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    margin: 2vh;
    width: 96%;
    height: 96vh;
  }
  /* added by mum to help mini maths on phone */
  .blainpage {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}
.boxright {
  margin: 0% 0%;
}
.modal {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal-btn,
.modal-btnhs1,
.modal-btnhs2,
.modal-btnhs3,
.modal-btnhs4,
.modal-btntgrid1,
.modal-btntgrid2,
.modal-btntgrid3,
.modal-btntgrid4,
.modal-btndg1,
.modal-btndg2,
.modal-btndg3,
.modal-btndg4,
.modal-btndg5,
.modal-btndg6,
.modal-btndg7,
.modal-btndg8,
.modal-btndg9,
.modal-btndg10,
.modal-btndg11,
.modal-btndg12,
.modal-btndg13,
.modal-btndg14,
.modal-btndg15,
.modal-btndg16,
.modal-btndg17,
.modal-btndg18,
.modal-btndg19,
.modal-btndg20,
.modal-btndg21,
.modal-btndg22,
.modal-btndg23,
.modal-btndg24,
.modal-btndg25,
.modal-btnlb2,
.modal-btnlb3,
.modal-btnlb4,
.modal-btnlb5,
.modal-btnlb6,
.modal-btn4-5,
.modal-btn5-6,
.modal-btn6-7,
.modal-btn1,
.modal-btn2,
.modal-btn3,
.modal-btn4,
.modal-btn5,
.modal-btn6,
.modal-btn7,
.modal-btn8,
.modal-btn9,
.modal-btn10,
.modal-btn11,
.modal-btn12,
.modal-btn13,
.modal-btn14,
.modal-btn15,
.modal-btn16,
.modal-btn17,
.modal-btn18,
.modal-btn19,
.modal-btn20,
.modal-btn21,
.modal-btn22,
.modal-btn23,
.modal-btn24,
.modal-btn25,
.modal-btn26,
.modal-btn27,
.modal-btn28,
.modal-btn29,
.modal-btn31,
.modal-btn32,
.modal-btn33,
.modal-btn34,
.modal-btn35,
.modal-btn36,
.modal-btn37,
.modal-btn38,
.modal-btn39,
.modal-btn40,
.modal-btn41,
.modal-btn42,
.modal-btn43,
.modal-btn44,
.modal-btn45,
.modal-btn46,
.modal-btn47,
.modal-btn48,
.modal-btn49,
.modal-btn50,
.modal-btn51,
.modal-btn52,
.modal-btn53,
.modal-btn54,
.modal-btn55,
.modal-btn56,
.modal-btn57,
.modal-btn58,
.modal-btn59,
.modal-btn60,
.modal-btn61,
.modal-btn62,
.modal-btn63,
.modal-btn64,
.modal-btn65,
.modal-btn66,
.modal-btn67,
.modal-btn68,
.modal-btn69,
.modal-btn70,
.modal-btn71,
.modal-btn72,
.modal-btn73,
.modal-btn74,
.modal-btn75,
.modal-btn76,
.modal-btn77,
.modal-btn78,
.modal-btn79,
.modal-btn80,
.modal-btn81,
.modal-btn82,
.modal-btn83,
.modal-btn84,
.modal-btn85,
.modal-btn86,
.modal-btn87,
.modal-btn88,
.modal-btn89 {
  background: none;
  color: black;
  cursor: pointer;
  border: none;
  position: relative;
  padding: 0px;
  cursor: pointer;
  display: block;
  border-radius: 5px;
  max-width: 300px;
}

.harleychartlink {
  background: none;
  color: black;
  cursor: pointer;
  border: none;
  position: relative;
  padding: 0px;
  cursor: pointer;
  display: block;
  border-radius: 5px;
  width: 30%;
}
.downloadLink {
  background: none;
  color: black;
  cursor: pointer;
  border: none;
  position: relative;
  padding: 0px;
  display: block;
  border-radius: 5px;
  width: 30%;
}

.modal-btn33,
.modal-btn45,
.modal-btn55,
.modal-btn65,
.modal-btn74 {
  border-color: #96489c;
  border-width: 10px;
  border-style: dashed;
}

.modal-btn img,
.modal-btnhs1 img,
.modal-btnhs2 img,
.modal-btnhs3 img,
.modal-btnhs4 img,
.modal-btntgrid1 img,
.modal-btntgrid2 img,
.modal-btntgrid3 img,
.modal-btntgrid4 img,
.modal-btndg1 img,
.modal-btndg2 img,
.modal-btndg3 img,
.modal-btndg4 img,
.modal-btndg5 img,
.modal-btndg6 img,
.modal-btndg7 img,
.modal-btndg8 img,
.modal-btndg9 img,
.modal-btndg10 img,
.modal-btndg11 img,
.modal-btndg12 img,
.modal-btndg13 img,
.modal-btndg14 img,
.modal-btndg15 img,
.modal-btndg16 img,
.modal-btndg17 img,
.modal-btndg18 img,
.modal-btndg19 img,
.modal-btndg20 img,
.modal-btndg21 img,
.modal-btndg22 img,
.modal-btndg23 img,
.modal-btndg24 img,
.modal-btndg25 img,
.modal-btnlb2 img,
.modal-btnlb3 img,
.modal-btnlb4 img,
.modal-btnlb5 img,
.modal-btnlb6 img,
.modal-btn4-5 img,
.modal-btn5-6 img,
.modal-btn6-7 img,
.modal-btn1 img,
.modal-btn2 img,
.modal-btn3 img,
.modal-btn4 img,
.modal-btn5 img,
.modal-btn6 img,
.modal-btn7 img,
.modal-btn8 img,
.modal-btn9 img,
.modal-btn10 img,
.modal-btn11 img,
.modal-btn12 img,
.modal-btn13 img,
.modal-btn14 img,
.modal-btn15 img,
.modal-btn16 img,
.modal-btn17 img,
.modal-btn18 img,
.modal-btn19 img,
.modal-btn20 img,
.modal-btn21 img,
.modal-btn22 img,
.modal-btn23 img,
.modal-btn24 img,
.modal-btn25 img,
.modal-btn26 img,
.modal-btn27 img,
.modal-btn28 img,
.modal-btn29 img,
.modal-btn31 img,
.modal-btn32 img,
.modal-btn33 img,
.modal-btn34 img,
.modal-btn35 img,
.modal-btn36 img,
.modal-btn37 img,
.modal-btn38 img,
.modal-btn39 img,
.modal-btn40 img,
.modal-btn41 img,
.modal-btn42 img,
.modal-btn43 img,
.modal-btn44 img,
.modal-btn45 img,
.modal-btn46 img,
.modal-btn47 img,
.modal-btn48 img,
.modal-btn49 img,
.modal-btn50 img,
.modal-btn51 img,
.modal-btn52 img,
.modal-btn53 img,
.modal-btn54 img,
.modal-btn55 img,
.modal-btn56 img,
.modal-btn57 img,
.modal-btn58 img,
.modal-btn59 img,
.modal-btn60 img,
.modal-btn61 img,
.modal-btn62 img,
.modal-btn63 img,
.modal-btn64 img,
.modal-btn65 img,
.modal-btn66 img,
.modal-btn67 img,
.modal-btn68 img,
.modal-btn69 img,
.modal-btn70 img,
.modal-btn71 img,
.modal-btn72 img,
.modal-btn73 img,
.modal-btn74 img,
.modal-btn75 img,
.modal-btn76 img,
.modal-btn77 img,
.modal-btn78 img,
.modal-btn79 img,
.modal-btn80 img,
.modal-btn81 img,
.modal-btn82 img,
.modal-btn83 img,
.modal-btn84 img,
.modal-btn85 img,
.modal-btn86 img,
.modal-btn87 img,
.modal-btn88 img,
.modal-btn89 img {
  width: 100%;
  display: block;
  transition: transform 0.4s;
  border-radius: 5px;
}
/*this code used pre Jan21
.harleychartlink img
{
  width: 100%;
  display: block;
  transition: transform 0.4s;
  border-radius: 5px;
}
*/

.modal-close,
.modal-closehs1,
.modal-closehs2,
.modal-closehs3,
.modal-closehs4,
.modal-closetgrid1,
.modal-closetgrid2,
.modal-closetgrid3,
.modal-closetgrid4,
.modal-closedg1,
.modal-closedg2,
.modal-closedg3,
.modal-closedg4,
.modal-closedg5,
.modal-closedg6,
.modal-closedg7,
.modal-closedg8,
.modal-closedg9,
.modal-closedg10,
.modal-closedg11,
.modal-closedg12,
.modal-closedg13,
.modal-closedg14,
.modal-closedg15,
.modal-closedg16,
.modal-closedg17,
.modal-closedg18,
.modal-closedg19,
.modal-closedg20,
.modal-closedg21,
.modal-closedg22,
.modal-closedg23,
.modal-closedg24,
.modal-closedg25,
.modal-closelb2,
.modal-closelb3,
.modal-closelb4,
.modal-closelb5,
.modal-closelb6,
.modal-close1,
.modal-close2,
.modal-close3,
.modal-close4,
.modal-close5,
.modal-close6,
.modal-close7,
.modal-close8,
.modal-close9,
.modal-close10,
.modal-close11,
.modal-close12,
.modal-close13,
.modal-close14,
.modal-close15,
.modal-close16,
.modal-close17,
.modal-close18,
.modal-close19,
.modal-close20,
.modal-close21,
.modal-close22,
.modal-close23,
.modal-close24,
.modal-close25,
.modal-close26,
.modal-close27,
.modal-close28,
.modal-close29,
.modal-close31,
.modal-close32,
.modal-close33,
.modal-close34,
.modal-close35,
.modal-close36,
.modal-close37,
.modal-close38,
.modal-close39,
.modal-close40,
.modal-close41,
.modal-close42,
.modal-close43,
.modal-close44,
.modal-close45,
.modal-close46,
.modal-close47,
.modal-close48,
.modal-close49,
.modal-close50,
.modal-close51,
.modal-close52,
.modal-close53,
.modal-close54,
.modal-close55,
.modal-close56,
.modal-close57,
.modal-close58,
.modal-close59,
.modal-close60,
.modal-close61,
.modal-close62,
.modal-close63,
.modal-close64,
.modal-close65,
.modal-close66,
.modal-close67,
.modal-close68,
.modal-close69,
.modal-close70,
.modal-close71,
.modal-close72,
.modal-close73,
.modal-close74,
.modal-close75,
.modal-close76,
.modal-close77,
.modal-close78,
.modal-close79,
.modal-close80,
.modal-close81,
.modal-close82,
.modal-close83,
.modal-close84,
.modal-close85,
.modal-close86,
.modal-close87,
.modal-close88,
.modal-close89,
.modal-closeabacus {
  position: absolute;
  top: 10px;
  right: 10px;
  font-weight: bold;
  font-size: 2em;
  cursor: pointer;
}

.tag {
  color: black;
  text-decoration: none;
  font-size: 0.8em;
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 5px;
  opacity: 0.8;
}
.pag {
  color: black;
  text-decoration: none;
  font-size: 0.8em;
  position: absolute;
  top: 18px;
  right: 0px;
  padding: 5px;
  opacity: 0.8;
}

.pae,
pae-2xtables-1,
pae-2xtables-2,
pae-2xtables-3,
pae-2xtables-4,
pae-2xtables-5,
pae-2xtables-6,
pae-2xtables-7,
pae-2xtables-8,
pae-2xtables-9,
pae-2xtables-10,
pae-2xtables-11,
pae-2xtables-12 {
  color: black;
  background-color: #96489c;
  text-decoration: none;
  font-size: 1.2em;
  position: absolute;
  top: 22px;
  right: 0px;
  padding: 5px;
  opacity: 0.9;
}

.paehide {
  display: none;
}

.rag {
  color: black;
  text-decoration: none;
  font-size: 80%;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 5px;
  opacity: 0.8;
  display: inline-block;
}

.hag {
  color: black;
  text-decoration: none;
  font-size: 1.2em;

  padding: 5px;

  display: inline-block;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  width: 80%;
  align-items: center;
  background-color: white;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.blog {
  margin: 0% 5%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: whitesmoke;
  z-index: 10;
}

.freegamescard {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
  width: 80%;
  align-items: center;
  background-color: #dabbdd;
  z-index: 10;
}

.freegamescard {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #96489c;
}

.blog img {
  width: 50%;
}

.blogtext {
  text-align: left;
}

.contacttext {
  margin: 2% 5%;
  flex-grow: 1;
  text-decoration: inherit;
  text-align: left;
  vertical-align: top;
  font-size: 1.2em;
  line-height: 1.2em;
  color: black;
  opacity: 0.8;
}
.contactpic {
  height: 200px;
  margin: 10px;
  opacity: 0.8;
  background-color: rgba(162, 72, 220, 0.4);
  padding: 0px;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.contactpic img {
  max-height: 100%;
  max-width: 100%;
}

.contactpic h2 {
  position: absolute;
  top: 100%;
  margin: 5%;
  background: white;
  height: 80%;
  padding: 10px;
  font-size: 1.5em;
  opacity: 0.7;
  overflow-y: scroll;
  overflow-x: scroll;
}

.contactpic:hover > h2 {
  position: absolute;
  top: 0;
  background: white;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

#contact-area {
  width: 100%;
}

#contact-area input,
#contact-area textarea {
  padding: 5px;
  width: 100%;
  font-size: 1em;
  margin: 0px 0px 10px 0px;
  border: 0px;
  background-color: rgba(162, 72, 220, 0.2);
}

#contact-area textarea {
  height: 300px;
}

#contact-area textarea:focus,
#contact-area input:focus {
  border: 2px solid #a248dc;
}

#contact-area input.submit-button {
  width: 100px;
}

#contact-area input.submit-button:hover {
  opacity: 0.6;
}

#contact-area input.submit-button:hover {
  opacity: 0.6;
}

#contact-area select {
  padding: 5px;
  width: 100%;
  font-size: 1em;
  margin: 0px 0px 10px 0px;
  border: 0px;
  background-color: rgba(162, 72, 220, 0.2);
  height: 300px;
}

#contact-area select > option {
  background: pink;
  width: 500px;
  height: 300px;
}
/* code for second attempt make youtube videos responsive in particular play on phone- magic maths videos very small on phone with wide green border
.youtube{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.youtube iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/

.youtube {
  position: relative;
  padding-bottom: 56.25%; /* - 16:9 aspect ratio (most common) */
  /* padding-bottom: 62.5%; - 16:10 aspect ratio */
  /* padding-bottom: 75%; - 4:3 aspect ratio */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.youtube iframe,
.youtube object,
.youtube embed {
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/ .footer {
  height: 30vh;
  width: 100%;
  background-color: #ffe72d;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.footer a {
  text-decoration: none;
}
.facebookdice {
  width: 100%;
  height: 80px;
}
.facebookdice img {
  height: 100%;
}
.bottomlinks {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.facebookcontainer {
  width: 560px;
}

/* Google font */
@import url("https://fonts.googleapis.com/css?family=Dancing+Script");
body {
  background-color: rgba(0, 0, 0, 0.1);
}

/* styling paper */
.paper {
  background-color: rgba(255, 255, 255, 0.85);
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 5% 10%;
  margin: 0% 5%;
}

.paper2 {
  background-color: #7ac043;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 5% 10%;
  margin: 0% 5%;
}

.paper3 {
  background-color: whitesmoke;
  justify-content: center;
  align-items: center;
  display: flex;
  margin: 0% 5%;
  padding: 2% 5%;
}

/* styling text content */
.content {
  padding: 1% 5%;
  margin-top: 6px;
  margin-left: 0px;
  padding-right: 16px;
  line-height: 25px;
  font-size: 15px;
  letter-spacing: 0px;
  word-spacing: 3px;
  text-align: left;
}

.contentb {
  padding: 1% 5%;
  margin-top: 6px;
  margin-left: 0px;
  padding-right: 16px;
  line-height: 1.5;
  font-size: 15px;
  letter-spacing: 0px;
  word-spacing: 3px;
  text-align: left;
  background-color: whitesmoke;
}
/*
.content2 a {
  padding: 5px 20px;
  border-radius: 15px;
  border: 4px solid #ffe72d;
  text-decoration: none;
font-size: 15px;
color: black;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.content2 a:hover 
{
background-color:#ffe72d ;
}
*/
.buttonspace {
  display: flex;
  justify-content: center;
}

.buttonspace a {
  padding: 7.5px 30px;
  border-radius: 15px;
  border: 4px solid #7ac043;
  text-decoration: none;
  font-size: 15px;
  color: white;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  background-color: #7ac043;
}
.buttonspace a:hover {
  background-color: #ffe72d;
  border: 4px solid #ffe72d;
}

.content2,
.content3 {
  padding: 1% 1%;
  line-height: 25px;
  font-size: 15px;
  letter-spacing: 0px;
  word-spacing: 3px;
  text-align: left;
}

.content2 h2 {
  line-height: 50px;
  display: block;
  align-self: center;
}
.content3 h2 {
  line-height: 50px;
  display: block;
  align-self: center;
}

.content img {
  width: 100%;
  max-width: 800px;
}
.content2 img {
  width: 100%;
  max-width: 800px;
}
.content3 img {
  width: 100%;
  max-width: 800px;
}

#mc_embed_signup {
  height: 35px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  background-color: #96489c;
  z-index: 11;
  position: relative;
  opacity: 0.9;
  display: hidden;
}

#mc_embed_signup_scroll {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 0px;
}

#mc_embed_signup_scroll label {
  font-size: 30px;
  display: block;
}

.signup {
  z-index: 100;
}

.copywrite {
  background: #ffe72d;
}

.joinus {
  background: #c3db6d;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  height: 50vh;
}

.joinus h3 {
  text-decoration: none;
  font-weight: normal;
}

.payhip-embed-page {
  width: 100%;
}

.bulletpointface {
  height: 54px;
  padding: 2px;
}

.wheretostart {
  font-size: 22px;
}

em {
  font-size: 1.5em;
  font-style: normal;
  color: #96489c;
  line-height: 1.5em;
}

.homeblockdescript {
  height: 200px;
  background-color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  text-decoration: none;
  margin: 3px 3px;
  padding: 3px 3px;
}

.homeblockdescript2 {
  height: 180px;
  background-color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  text-decoration: none;
  margin: 5px 5px;
  padding: 5px 5px;
  font-size: 0.9em;
}
.Blockdescript {
  height: 120px;
  background-color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  text-decoration: none;
  margin: 3px 3px;
  padding: 3px 3px;
}
a.homeblock {
  text-decoration: none;
}
a:link {
  text-decoration: none;
}

@media only screen and (max-width: 1024px) {
  .tag,
  .pag,
  .pae,
  .rag,
  .hag {
    font-size: 60%;
  }
}

.mySlides {
  display: none;
}
.mySlides img {
  vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
  max-width: 600px;
  position: relative;
  margin: auto;
}

/* Custom styles for larger slideshow arrows */
.slideshow-container .prev,
.slideshow-container .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -30px; /* Adjusted to center larger arrows */
  color: #501297;
  font-weight: bold;
  font-size: 60px; /* Increased from 50px */
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index: 5; /* Ensure arrows appear above slides */
}

/* Override any conflicting styles from mySlidesprev/mySlidesnext */
.slideshow-container .prev:hover,
.slideshow-container .next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}

/* Ensure proper positioning */
.slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.slideshow-container .prev {
  left: 0;
  border-radius: 0 3px 3px 0;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
  .slideshow-container .prev,
  .slideshow-container .next {
    font-size: 50px;
    padding: 12px;
  }
}

@media only screen and (max-width: 480px) {
  .slideshow-container .prev,
  .slideshow-container .next {
    font-size: 40px;
    padding: 8px;
  }
}

/* Caption text */
.mySlidestext {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.mySlidesnumbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.mySlidesdot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.mySlidesactive,
.dot:hover {
  background-color: #717171;
}

/* Fading animation */
.mySlidesfade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .mySlidesprev,
  .mySlidesnext,
  .mySlidestext {
    font-size: 11px;
  }
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.video-outer-container {
  width: 90%;
  margin: 0 auto;
}

/* Title styling */
.video-title {
  width: 100%;
  margin: 10px 0;
  font-size: 1.5rem;
  color: #333;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: break-word;
}

@media (max-width: 1024px) {
  .video-outer-container {
    width: 100%;
  }
  .video-title {
    font-size: 1.25rem;
    margin: 8px 0;
  }
}

@media (max-width: 768px) {
  .video-title {
    font-size: 1.1rem;
    margin: 6px 0;
  }
}

.youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin: 5px;
}

.youtube-player.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh !important;
  padding: 0 !important;
  margin: 0;
  z-index: 1000;
}

.youtube-player.fullscreen iframe {
  position: fixed;
  width: 100vw;
  height: 100vh;
}

.youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: transparent;
}

.youtube-player img {
  object-fit: cover;
  display: block;
  left: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  height: 100%;
  cursor: pointer;
  transition: 0.4s all;
}

.youtube-player img:hover {
  filter: brightness(75%);
}

.youtube-player .play {
  height: 48px;
  width: 68px;
  left: 50%;
  top: 50%;
  margin-left: -34px;
  margin-top: -24px;
  position: absolute;
  background: url("https:///www.numberchase.co.uk/homeimages/videoplaybutton.png") no-repeat;
  cursor: pointer;
}

.homepagetitle {
  background-color: #5c2a9d; /* Dark purple background */
  color: white !important; /* White text */
  font-size: 1.5rem;
  text-align: center;
  padding: 20px 5px;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Adds some depth */
}
/* Span styling for pizaz */
.pizaz {
  color: yellow; /* Fallback for older browsers */
  font-weight: bold; /* Make it stand out */
  font-size: 3rem !important; /* Slightly larger text */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.245); /* Adds a shadow effect */

  display: inline-block; /* Needed for animation */
  animation: bounce 1.5s infinite; /* Add bounce effect */
  background: linear-gradient(90deg, #ffe72d, #f8f87c); /* Vibrant gradient */
  -webkit-background-clip: text; /* Makes gradient visible */
  color: transparent;
}

/* Keyframes for bounce animation */ /* Default position */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  /* Move up slightly */
  50% {
    transform: translateY(-10px);
  }
}
/*dispaly grid for free games and acivities */

.age4-5-section {
  margin: 2rem auto;
  max-width: 800px;
  text-align: center;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  width: 100%;
  max-width: 500px;
  margin: 1.5rem auto;
}

.grid-item {
  position: relative;
  display: block;
  text-decoration: none;
  color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  aspect-ratio: 1/1;
}

.grid-item:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.grid-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
}

/* Media queries for responsiveness */
@media (max-width: 500px) {
  .image-grid {
    grid-template-columns: 1fr;
  }
}
/*augment new page style combining best of content3 and subblainpage*/

.cleanpage {
  position: relative;
  margin: 0% 5%;
  padding: 2rem;
  background-color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  font-size: 18px; /* Increased from 15px to 18px */
  letter-spacing: 0;
  word-spacing: 3px;
  text-align: left;
}

.cleanpage h1,
.cleanpage h2,
.cleanpage h3 {
  line-height: 1.4;
  margin: 1.5rem 0;
  display: block;
}

.cleanpage h1 {
  font-size: 2.5rem; /* Increased proportionally */
  margin-bottom: 2rem;
}

.cleanpage h2 {
  font-size: 2rem; /* Increased proportionally */
  margin-top: 2.5rem;
}

.cleanpage h3 {
  font-size: 1.5rem; /* Increased proportionally */
  margin-top: 2rem;
}

.cleanpage p {
  margin: 1rem 0;
}

.cleanpage ul {
  margin: 1rem 0;
  padding-left: 2rem;
}

.cleanpage li {
  margin: 0.5rem 0;
}

.cleanpage .fakeimg {
  margin: 2rem 0;
}

.cleanpage img {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.cleanpage .tip {
  background-color: rgba(195, 219, 109, 0.2);
  padding: 1rem;
  margin: 1.5rem 0;
  border-radius: 4px;
}

/* Make content links more obvious */
.cleanpage a, .game-tip a, .game-steps a {
  color: #5dad27; /* Green color matching your brand */
  text-decoration: underline;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.cleanpage a:hover, .game-tip a:hover, .game-steps a:hover {
  background-color: #ffe72d; /* Yellow background on hover */
  color: #501297; /* Purple text on hover */
  text-decoration: none;
}

/* Special styling for "Try more" links */
.try-more-link {
  display: inline-block;
  margin: 10px 0;
  padding: 8px 15px;
  background-color: #7ac043;
  color: white !important;
  text-decoration: none !important;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.try-more-link:hover {
  background-color: #ffe72d !important;
  color: #501297 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

@media screen and (max-width: 768px) {
  .cleanpage {
    padding: 1rem;
    font-size: 16px; /* Reduced but still readable on tablets */
  }

  .cleanpage h1 {
    font-size: 1.8rem;
  }

  .cleanpage h2 {
    font-size: 1.5rem;
  }

  .cleanpage h3 {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 480px) {
  .cleanpage {
    padding: 0.8rem;
    font-size: 15px; /* Reduced but still readable on phones */
  }
}

/* Game container styling */
.game-container {
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  margin: 2rem auto;
  border-left: 8px solid #7ac043;
  width: 90%; /* Use percentage width */
  max-width: 100%; /* Ensure it can go full width */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Adjust for desktop screens */
@media (min-width: 1024px) {
  .game-container {
    width: 95%; /* Wider on desktop */
    margin: 2rem auto;
  }
}

/* Adjust padding for smaller screens */
@media (max-width: 768px) {
  .game-container {
    padding: 15px;
    border-left-width: 4px;
    width: 100%; /* Full width on mobile */
    margin: 1rem 0;
  }
}

.game-header {
  background-color: #5c2a9d; /* Back to purple */
  padding: 12px 20px;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  height: 60px;
}

.game-header h3 {
  color: white; /* Back to white text on purple */
  font-size: 1.4rem;
  margin: 0;
  text-align: center;
  width: 100%;
}

.game-mascot {
  height: 45px; /* Adjusted for this specific SVG */
  width: auto;
  margin-left: 15px;
  object-fit: contain;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .game-header {
    height: auto;
    flex-direction: column;
    text-align: center;
    padding: 15px;
  }

  .game-mascot {
    height: 40px;
    margin: 10px 0 0 0;
  }
}

.game-content {
  display: flex;
  gap: 20px;
}

.game-left-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 250px; /* Fixed width for left column */
  flex-shrink: 0; /* Prevents shrinking */
}

.game-learning-objective,
.game-requirements {
  background-color: white;
  padding: 8px 12px;
  border-radius: 10px;
  width: 100%;
  border: 2px solid #5c2a9d; /* Purple border to match header */
}

.game-learning-objective h4,
.game-requirements h4 {
  margin: 0 0 4px 0;
  font-size: 1rem;
}

.game-learning-objective ul,
.game-requirements ul {
  margin: 0;
  padding-left: 20px;
}

.game-learning-objective li,
.game-requirements li {
  margin: 2px 0;
  line-height: 0.8;
}

.game-steps {
  background-color: #dabbdd;
  padding: 15px;
  border-radius: 10px;
  flex: 1;
  line-height: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: black; /* Changed back to black since we're using a lighter background */
}

.game-tip {
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  margin: 1rem 0;
  color: black;
  border: 3px solid #86ff00;
  line-height: 25px;
}

.game-variation {
  background-color: #5c2a9d; /* Back to purple */
  padding: 15px;
  border-radius: 10px;
  margin: 1rem 0;
  color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .game-content {
    flex-direction: column;
  }

  .game-left-column {
    width: 100%;
  }
  /* Start Game Button - centered and 20% larger than previous version */
.StartGameButton {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  width: 100%;
  max-width: 240px; /* Increased from 200px (20% larger) */
}

.StartGameButton a {
  display: block;
  width: 100%;
  text-align: center;
  transition: transform 0.2s ease;
}

.StartGameButton img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Optional hover effect */
.StartGameButton a:hover {
  transform: scale(1.05);
}

/* Responsive adjustments - also increased by 20% */
@media (max-width: 768px) {
  .StartGameButton {
    max-width: 216px; /* Increased from 180px */
  }
}

@media (max-width: 480px) {
  .StartGameButton {
    max-width: 180px; /* Increased from 150px */
  }
}

  .pagetitle {
    margin-top: 12vh;
  }

  .painpage {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
  em {
    font-size: 1em;
    line-height: 1em;
  }
}