:root {

  --black: #000000;
  --white: #FFFFFF;
  --unnamed-color-333333: #333333;

  --top-bg: #333333;


  /* Font/text values */
  --word-font-family-zilla-slab: Zilla Slab;
  --word-font-family-nunito: Nunito;
  --word-font-style-normal: normal;
  --word-font-weight-medium: medium;
  --word-font-weight-normal: normal;
  --word-font-size-14: 14px;
  --word-font-size-22: 22px;
  --word-font-size-28: 28px;
  --unnamed-character-spacing-0: 0px;
  --unnamed-line-spacing-18: 18px;
  --unnamed-line-spacing-26: 26px;
  --unnamed-line-spacing-34: 34px;
}

/* Character Styles */
.header-character-style-1 {
  font-family: var(--word-font-family-zilla-slab);
  font-style: var(--word-font-style-normal);
  font-weight: var(--word-font-weight-medium);
  font-size: var(--word-font-size-28);
  line-height: var(--unnamed-line-spacing-34);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-333333);
}
.header-character-style-2 {
  font-family: var(--word-font-family-nunito);
  font-style: var(--word-font-style-normal);
  font-weight: var(--word-font-weight-normal);
  font-size: var(--word-font-size-14);
  line-height: var(--unnamed-line-spacing-18);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-333333);
}
.header-character-style-3 {
  font-family: var(--word-font-family-zilla-slab);
  font-style: var(--word-font-style-normal);
  font-weight: var(--word-font-weight-medium);
  font-size: var(--word-font-size-22);
  line-height: var(--unnamed-line-spacing-26);
  letter-spacing: var(--unnamed-character-spacing-0);
  color: var(--unnamed-color-333333);
}
body{
  color: #fff;
}
html,body,table,select,p,div,span,td,li {
  font-family: 'Nunito',sans-serif;
  font-size: 16px;
  line-height: 1.38;
}
h1, h2, h3, h4, h5, h6 {
  margin-bottom: .69em;
  font-family: 'Zilla Slab', serif;
  font-weight: 400;
}
h1{
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 41px;
}

.fg-wrapper{
  padding-bottom: 0px;
}

.bg-wrapper{
  background-image: url("section-bg.png");
  background-color: #bd6428;
  background-size: 20px;
  background-repeat: repeat;

  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  z-index: -2;
}
.bg-wrapper:before{
  content:"";
  background: linear-gradient(180deg,#c75f22 0,rgb(210 85 16 / 53%) 150%);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.widebody {
  margin:0px;
  background: var(--top-bg);
  text-align: center;
}

.monofont {
  font-family: 'Zilla Slab', monospace;
}

.gamewrapperdiv {
  width:580px;
  padding:0px;
  margin:auto;
  position: relative;
  width: 100%;
  /*background-color:red; */
}

.topbar {
  padding-bottom:8px;
  width:360px;
  margin:auto;
  display: none;
}

#summarydiv {
  display:none;

  padding:8px;
  font-weight:bold;
}

.displayframe4 {
  margin:auto;
  width:264px;
  height:392px;
  /* background-color:red; */
  display : grid;
  grid-template-columns: repeat(4, 1fr);
}

.displayframe5 {
  margin:auto;
  width:330px;
  height:392px;
  /* background-color:red; */
  display : grid;
  grid-template-columns: repeat(5, 1fr);
}

.displayframe6 {
  margin:auto;
  width:396px;
  height:392px;
  /* background-color:red; */
  display : grid;
  grid-template-columns: repeat(6, 1fr);
}

/* color of inactive/used cells */

.dispcell {
  font-family: 'Zilla Slab', serif;
  border:1px solid #c0c0c0;
  width:55px;
  height:55px;
  line-height:55px;
  text-align:center;
  vertical-align:middle;
  font-size:200%;
  font-weight:bold;
  cursor:pointer;
  border-radius: 3px;
  background: var(--white);
  color: var(--black);
}

/* color of active entry cell */

.cellhighlight {
  /*background-color: #c0c0f0;*/
  border-color: #000;
}

@keyframes bounce {
  0%   { transform: scale(1,1)      translateY(0); }
  10%  { transform: scale(1.1,.9)   translateY(0); }
  30%  { transform: scale(.9,1.1)   translateY(-20px); }
  50%  { transform: scale(1.05,.95) translateY(0); }
  57%  { transform: scale(1,1)      translateY(-3px); }
  64%  { transform: scale(1,1)      translateY(0); }
  100% { transform: scale(1,1)      translateY(0); }
}

@keyframes shake {
  0% { transform: translate(2px, 2px) rotate(0deg); }
  10% { transform: translate(-2px, -3px) rotate(-4deg); }
  20% { transform: translate(-5px, 0px) rotate(8deg); }
  30% { transform: translate(5px, 3px) rotate(0deg); }
  40% { transform: translate(2px, -2px) rotate(2deg); }
  50% { transform: translate(-2px, 3px) rotate(-2deg); }
  60% { transform: translate(-5px, 2px) rotate(0deg); }
  70% { transform: translate(5px, 2px) rotate(-2deg); }
  80% { transform: translate(-2px, -2px) rotate(2deg); }
  90% { transform: translate(2px, 3px) rotate(0deg); }
  100% { transform: translate(2px, -3px) rotate(-2deg); }
}

.keydiv {
  /* background-color:black; */
  padding: 24px;
  border-radius: 20px;
  background: var(--white);
  max-width: 550px;
  width: max-content;
  margin: 15px auto;
}

#deletebutton,
#submitbutton{
  font-size: 95%;
}

.keyboardspan,
button.keyboardspan {
  position: relative;
  top: 0px;
  display: inline-block;
  border-radius: 3px;
  border: none;
  margin:2px;
  margin-bottom: 4px;
  font-size:150%;
  min-width: 22px;
  /* color:white; */
  /*background-color:#c0c0c0; */
  height:32px;
  line-height:32px;
  padding:2px;
  padding-left:8px;
  padding-right: 8px;
  text-align:center;
  vertical-align:middle;
  font-family: 'Zilla Slab', serif;
  font-weight: normal;
  cursor:pointer;
  /* prevent selection */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-shadow: 0px 3px 0 0px rgb(0 0 0 / 10%);
  transition: top 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease;
  -webkit-appearance: none;
  background-color:#333334;
  color:white;
}

.keyboardspan:active{
  transition: top 0.05s ease, box-shadow 0.05s ease;
  top: 3px;
  box-shadow: 0px 0px 0 0px rgb(0 0 0 / 20%)
}
.keydefault {
  background-color:#333334;
  color:white;
}

/* match state colors */

.exactmatch {
  border-color: #4F8125;
  background-color:#6EB535;
  color:white;
}

.inwordmatch {
  border-color: #B3AD37;
  background-color:#D2CB42;
  color:white;
}

.nomatch {
  border-color: var(--black);
  background-color:#333334;
  color:var(--white);
}
.keyboardspan.nomatch{
  background-color:#B9B9B9;
  color:var(--black);
}

.animatebounce{
  animation: bounce 1s;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

.animatebounce:nth-child(5n+1) { animation-delay: 0s }
.animatebounce:nth-child(5n+2) { animation-delay: 0.1s }
.animatebounce:nth-child(5n+3) { animation-delay: 0.2s }
.animatebounce:nth-child(5n+4) { animation-delay: 0.3s }
.animatebounce:nth-child(5n+5) { animation-delay: 0.4s }

.shake .entered{
  animation: shake 0.5s;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}




.buttonrow {
  margin-top:8px;
}

.controlbutton {
  padding:8px;
  background-color:#c0c0c0;
  font-weight:bold;
  border:0px;
  border-radius: 5px;
  cursor:pointer;
}

.buttonlabel {
  color: white;
}

.inversetext {
  color: white;
}

.textbox {
  padding:4px;
}

.bestwordscroll {
  width:200px;
  height:220px;
  overflow-y:auto;
}
#optionbutton{
  display:none;
}
.optionsmenu {
  display:none;
  margin-bottom:6px;
}

.myiframe {
  width:100%;
  height:200px;
  overflow-x:scroll;
}

.unusedchar {
  /* background-color: #a0a0a0; */
  border:1px solid #c0c0c0;
}

.usedchar {
  background-color: #20c020;
  color: white;
  
}

.unusedchar,.usedchar {
  width:40px;
  height:40px;
  text-align:center;
  font-size:140%;
  font-weight:bold;
  /* border-radius: 5px; */
}

.gametable {
  border-spacing:4px;
  border-collapse:separate;
}

/* this is enabled for layout debugging */

.displayframe5, .displayframe6, .keydiv, .topbar {
  /* background-color:red; */
}

#word_game.hidden{
  display: none;
}
#word_game:not(.hidden){
  animation: zoomfadein 0.5s;
  animation-timing-function: ease;
}

@keyframes zoomfadein {
  0% {
    transform: scale(0.5, 0.5) translateY(-400px);
    opacity: 0.0;
  }
  90%{
    transform: scale(1.1, 1.1)  translateY(0px);
  }
  100% {
    transform: scale(1, 1)  translateY(0);
    opacity: 1.0;
  }
}
@keyframes slidein {
  0% {
    transform: translateY(-40px);
    opacity: 0.0;
  }
  90%{
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0);
    opacity: 1.0;
  }
}

.resultswrapper,
.welcomewrapper{
  position: absolute;
  background-color: rgba(255,255,255,0.95);
  color: var(--black);
  backdrop-filter: blur(8px);
  width: 400px;
  left: 0;
  right: 0;
  margin: auto;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 45px rgba(0,0,0,0.8);
  z-index: 10;
  top: 140px;
  transition: top 0.4s ease-in-out, opacity 0.1s linear;
}

.welcomewrapper.hidden{
  transition: top 1.5s ease-in-out, opacity 1.5s linear;
  top: -2000px;
  opacity: 0.1;
  overflow: hidden;
}
#welcomewrappercopy.hidden{
  display: none;
}
.resultswrapper.hidden{
  top: -2000px;
  opacity: 0.1;
  overflow: hidden;
}

.welcomesmall{
  padding-top: 33px;
  font-size: 18px;
  max-width: 300px;
  line-height: 18px;
  margin: auto;
}

.resultswrapper{
}
#view-game{
  position: absolute;
  top: 20px;
  right: 20px;
}
.resultswrapper .win,
.resultswrapper .lose{
  display: none;
}
.resultswrapper.win .win{
  display: block;
}
.resultswrapper.lose .lose{
  display: block;
}
.resultswrapper #resultsmessage{
  white-space: pre-wrap;
  padding: 25px;
  text-align: left;
  background: #EDECE4;
  border-radius: 4px;
  width: 260px;
  margin: auto auto 10px;
}

.infotext{
  margin-top: 4px;
}

.topwrapper{
  max-width: 580px;
  position: relative;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  height: 80px;
}

#rmc-logo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#help{
  font-size: 24px;
  height:48px;
  line-height:48px;
  width: 48px;
  margin-bottom: 16px;
  box-shadow: none;
  position: absolute;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
  color: #AF673C;
  background-color: var(--white);
  border-radius: 9999px;
  padding: 0;
}

#playnow-landing,
#playnow{
  padding: 8px 32px;
  background: var(--white);
  color: #AE673B;
  border: 2px solid #AE673B;
  box-shadow: none;
  text-transform: uppercase;
}

#playnow-landing{
  background: rgba(186, 99, 48, 0.91);
  color: var(--white);
  border-color: var(--white);
  margin-bottom: 40px;
}
#playnow-landing.hidden{
  display: none;
}
footer{
  color: #333;
  background: #EAE9E0;
  padding: 20px;
  margin-bottom: 0;
  font-family: "Nunito", sans-serif;
  font-size: 16px;
}
.footer a{
  color: #bd6428;
}
.footer a:hover {
  color: #8c0c04;
}
.footer a {
 text-decoration: none;
}
.footer .footer__content {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
  padding-top: 4px;
  text-align: left;
}
.footer h6{
  font-size: 16px;
  margin-right: 6px;
}
.footer .cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}
.footer .col--1of3 {
  max-width: 33.3334%;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.3334%;
  flex: 0 0 33.3334%;
}

@media screen and (max-width: 600px){
  .footer .col--1of3 {
    max-width: 50%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
  }
}

.footer .footer__body {
  margin-bottom: 53px;
}

.footer .footer__content ul {
  margin: -5px 0px;
  padding: 0;
  list-style-type: none;
  list-style: none;
  line-height: 1.25
}

.footer .footer__content ul li {
  padding: 5px 0;
}

.footer .footer__content ul h6 {
  margin-bottom: 0;
  color: #8c0c04;
  font-weight: 700;
  text-transform: uppercase
}

.footer .footer__content ul p {
  margin-bottom: 0
}

.footer .footer__aside {

}
.footer .footer__aside h4{
  max-width: 350px;
  margin: auto;
}

.footer .footer__content ul p {
  margin: 0;
}

.footer .footer__aside > ul {
  margin-bottom: 30px;
  list-style: none;
  padding: 0;
}

.footer .footer__aside > ul > li + li {
  margin-top: 16px
}

.footer .footer__aside .list-socials {
  margin-left: -5px
}

.footer .list-socials ul {
  margin: -5px 0px;
  padding: 0;
  list-style-type: none;
  list-style: none;
  line-height: 1.25;
}

.footer .list-socials ul li{
  display: inline-block;
  font-size: 22px;
  margin-left: 10px;
}

.footer_wrapper{
  max-width: 580px;
  margin: auto;
}
.footer__bar{
  color: #aaa;
}
.footer__bar ul{
  list-style: none;
}
.footer__bar ul li + li {
  padding-left: 13px;
  margin-left: 7px;
}
.footer__bar ul li {
  position: relative;
  display: inline-block;
}
.footer__bar ul li + li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 14px;
  margin-top: -7px;
  background: #aaa;
}
.footer__bar a{
  color: #aaa;
  text-decoration: none;
}
.footer__bar a:hover{
  color: white;
  text-decoration: underline;
}

.infobutton{
  text-transform: uppercase;
  padding: 8px 32px;
  border: 1px solid #fff;
  border-radius: 4px;
  text-decoration: none;
}
.infoslider{
  background: var(--white);
  color: var(--black);
  padding: 40px;
}

.infosliderwrapper{
  max-width: 580px;
  margin: auto;
}
.infosliderwrapper.hidden{
  display: none;
}

.infosliderwrapper .infobutton{
  border: 1px solid #AF673B;
  color: #AF673B;
  background: var(--white);
  box-shadow: none;
  font-size: 20px;
}

.infoboxwrapper{
  text-align: left;
  max-width: 580px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 10px;
  background: #333333;
  color: var(--white);
  animation: slidein 1.0s;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}
.infoboxwrapper a{
  color: #eee;
}

.pre_footer{
  padding: 40px;
}

#shareinfo.bounce{
  animation: bounce 1s;
  animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}

.slide.hidden{
  display: none;
}
.slidecontrols{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-content: stretch;
  align-items: stretch;
  max-width: 300px;
  margin: 20px auto ;
}

.slidecontrols .ind{
  width: 30px;
  height: 8px;
  border-radius: 6px;
  background: grey;
}

.slidecontrols .ind.highlight{
  background:#AF673B;
}

.slideindicator{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-content: stretch;
  align-items: stretch;
  width: 100px;
  margin: auto;
}

.slidecontrols .left,
.slidecontrols .right{
  cursor: pointer;
}

#share-results.hidden{
  display: none;
}


#help-how{
  display: none;
}