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

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

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

h3 {
   margin-top: 0;
   padding-top: 0;
   padding-bottom: 0;
   margin-bottom: 0;
   font-size: 1.5vw;
}

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: 3vh;
}

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

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

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

.header {
   display: flex;
   justify-content: space-between;
   margin-top: 0.5vw;
}

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

.timer-div {
   font-family: Arial;
   font-size: 1.2vw;
   color: white;
   justify-content: center;
}

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

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

.game-container {
   display: inline-block;
}

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

.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: inline-block;
   align-items: center;
   justify-content: center;
   border-top: solid 1px black;
   margin-top: 0.5rem;
}

.row {
   display: flex;
   margin 0;
}

.cell {
   background: gray;
   width: 5vw;
   height: 5vw;
   color: white;
   margin-left: -1px;
   margin-top: -1px;
   font-family: 'Sarala';
   font-size: 3vw;
   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: 4vw;
}

.cell-wrong {
   background: #cc0000;
   border: 1px solid #9B1B00;
   font-size: 2vw;
   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: 1vw;
   font-family: Arial;
   color: white;
   padding: 1rem;
   margin: 2px;
   border: solid 1px #626363;
   overflow: hidden;
   height: 3.25vh;
}

.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: 15% auto; 
   padding: 3vh;
   padding-top: 0;
   width: 30%; 
   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: 1vw;
   padding-top: 0;
   background: #2a2b2b;
}

.small-modal-content p {
   font-size: 1.2vw;
}

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

.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: auto; 
   padding: 1vw;
   padding-top: 0;
   border-radius: 5px;
   width: 30%; 
   height: 90vh;
   overflow-y: auto;
   font-family: Verdana;
   color: white;
   box-shadow: 0px 3px 5px black;
}

.big-modal-content li {
   padding: 0.5vw;
   font-size: 0.9vw;
}

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

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

.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: 1.5vw;
   margin-top: 0;
   margin-bottom: 1vh;
}

.rules-footer {
   font-size: 0.9vw;
   text-shadow: 2px 2px black;
   padding: 0.75em;
}

.gif {
   width: 50%;
   height: 50%;
   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
}

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

.x-button-div {
   text-align: right;
   padding-top: 2vh;
}

.x-button-icon {
   font-size: 1em;
   margin-top: 0.3em;
   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: 1em;
   padding-top: 0;
   margin-top: 0.3em;
   margin-bottom: 1em;
   font-size: 1vw;
}

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

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

.share-button {
   display: flex;
   background: white;
   width: 6vw;
   height: 1vw;
   color: #008ae6;
   border-radius: 5px;
   padding: 0.75vw;
   cursor: pointer;
   border: solid 1px white;
   text-shadow: none;
   font-family: Verdana;
   justify-content: center;
   align-items: center;
   font-size: 1.2vw;
}

.share-button i {
   margin-left: 1vw;
}

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