html {
   -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body {
   margin: 0;
   text-align: center;
   background-color: #2a2b2b;
}

#pseudoBody {
   width: 100%;
   height: 100%;
   margin: 0;
   transition: filter 200ms ease-in;
}

h1, h2 {
   color: white;
   text-shadow: 2px 2px black;
   font-family: Arial;
   font-size: 8vw;
   letter-spacing: .05rem;
   margin: 0;
   margin-top: 0.5rem;
   margin-left: -1px;
}

h3 {
   margin: 1vh; 
   margin-top: 0;
   margin-bottom: 0;
}

form {
   display: flex;
   flex-direction: column;
   justify-content: left;
   text-align: left;
   padding: 1vh;
}

footer {
   display: flex;
   align-items: flex-end;
   justify-content: center;
   margin-top: 6vh;
}

.form-text {
   margin-bottom: 1vh;
   margin-top: 1vh;
   font-family: Arial;
   height: 3vh;
   border: none;
}

.form-text-message {
   height: 10vh;
} 

.send-button {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 4vh;
   color: white;
   background: gray;
   font-family: Arial;
   font-size: 4vw;
   border: none;
   margin-top: 1vh;
   cursor: pointer;
   pointer-events: auto;
}

.header {
   display: flex;
   margin-top: 0.5vw;
}

.header-div {
   display: flex;
   align-items: flex-end;
   width: 33%;
}

.timer-div {
   font-family: Arial;
   font-size: 5vw;
   color: white;
   width: 33%;
   justify-content: center;
}

.timer-div p {
   margin: 0;
   padding: 0;
}

.widget-div {
   justify-content: flex-end;
}

.game-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   margin: 1em;
   margin-top: 0;
}

.blur {
   filter: blur(0.75em);
}

.centered-box {
   display: flex;
   align-items: center;
   justify-content: center;
}

.centered-block {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.board {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-top: 0.5rem;
   margin-bottom: 2px;
}

.row {
   display: flex;
   margin 0;
}

.cell {
   background: gray;
   width: 15vw;
   height: 15vw;
   color: white;
   margin-left: -1px;
   margin-top: -1px;
   font-family: 'Sarala';
   font-size: 9vw;
   text-shadow: 1px 1px black;
   border: solid 1px #626363;
   cursor: pointer;
   transition: background 200ms ease-in, border 200ms ease-in, font-size 200ms;
}

.cell-selected {
   border: solid 1px #1858ab;
   background: #0099ff;
   font-size: 12vw;
}

.cell-wrong {
   background: #cc0000;
   border: 1px solid #9B1B00;
   font-size: 5vw;
   pointer-events: none;
}

.cell-inactive {
   background: #464646;
   color: #282828;
   cursor: default;
   text-shadow: black;
}

.cell-disabled {
   pointer-events: none;
}

.found-words-half {
   display: flex;
   flex-direction: column;
   width: 50%;
}

.found-word-div {
   display: flex;
   text-align: left;
   align-items: center;
   font-size: 1rem;
   font-family: Arial;
   color: white;
   padding: 1rem;
   margin: 2px;
   border: solid 1px #626363;
   overflow: hidden;
}

.found-word-div-text-container {
   display: flex; 
   width: 100%;
   padding-left: 1em;
}

.found-word-text {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   margin-top: -100px;
   transition: margin-top 300ms ease;
}

.drop-in {
   margin-top: 0;
}

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

.modal.show {
   top: 0;
   opacity: 1;
}

.small-modal-content {
   display: flex;
   flex-direction: column;
   background: #008ae6;
   position: relative;
   margin: 40% auto; 
   padding: 3vw;
   padding-top: 3vw;
   width: 83%; 
   font-family: Verdana;
   color: white;
   box-shadow: 0px 3px 5px black;
   text-shadow: 1px 1px black;
   justify-content: center;
   border-radius: 10px;
}

.times-modal-content {
   padding: 3vw;
   padding-top: 0;
   background: #2a2b2b;
   margin: 40% auto; 
}

.won-modal-content {
   padding-top: 0;
   margin: 30% auto; 
}

.times-modal-content > h3 {
   padding: 0;
   margin 0;
}

.transparent-modal-content {
   background: none;
   background-color: rgba(0,0,0,0.3); 
}

.transparent-modal-content .widget {
   color: gray;
   font-size: 2em;
   padding: 0.2em;
}

.big-modal-content {
   background: #2a2b2b;
   display: block;
   justify-content: center;
   align-items: center;
   position: relative;
   margin: 3% auto; 
   padding: 4vw;
   padding-top: 0;
   border-radius: 5px;
   width: 80%; 
   height: 78vh;
   overflow-y: auto;
   font-family: Verdana;
   color: white;
   box-shadow: 0px 3px 5px black;
}

.big-modal-content li {
   font-size: 3vw;
   padding: 1.2vw;
}

.contact-modal-content {
   height: 68vh;
}

.contact-text {
   display: flex;
   justify-content: center;
   text-shadow: 2px 2px black;
   font-size: 3.5vw;
}

.rules-list {
   text-align: left;
   font-size: 0.75em;
}

.big-modal-title {
   text-shadow: 2px 2px black;
   border-bottom: solid 1px gray;
   padding-bottom: 2vh;
   text-align: left;
   font-size: 5vw;
   margin-top: 0;
   margin-bottom: 1vh;
}

.rules-footer {
   font-size: 3vw;
   text-shadow: 2px 2px black;
   padding: 2.5vw;
}

.gif {
   width: 55%;
   height: 55%;
   border: solid 1px white;
   border-radius: 5px;
   margin-top: 1vh;
}

.material-symbols-outlined {
   border: solid 1px #626363;
   border-radius: 3px;
   font-size: 1rem;
   margin-left: 1em;
   cursor: pointer;
   font-variation-settings:
   'FILL' 0,
   'wght' 400,
   'GRAD' 0,
   'opsz' 48
}

.x-button-div {
   display: flex;
   justify-content: right;
}

.widget {
   font-size: 1.5em;
   color: white;
   cursor: pointer;
   padding: 0.2em;
   padding-bottom: 0;
   margin: 0;
}

.x-button-icon {
   font-size: 1em;
   margin-top: 0.5em;
   margin-bottom: 0;
}

.widget-smaller {
   font-size: 0.75em;
}

.timer-icon {
   display: inline;
   font-size: 24px;
   color: white;
   margin: 0;
   padding 0;
}

.modal-time-stats {
   display: flex;
   justify-content: space-around;
   padding: 1vh;
   padding-top: 0;
   margin-top: 1vh;
   margin-bottom: 2vh;
}

.times-stats {
   margin-top: 5vh;
}

.modal-time-stats p {
   padding: 0;
   margin: 0;
}

.share-button {
   display: block;
   background: white;
   width: 30%;
   color: #008ae6;
   border-radius: 5px;
   padding: 1vh;
   margin-bottom: 2vh;
   cursor: pointer;
   border: solid 1px white;
   text-shadow: none;
   font-family: Verdana;
}

.slick-link {
   color: gray;
   font-family: Arial;
   font-size: 3vw;
}