body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #355E3B;
    box-sizing: border-box;
    user-select: none;
    margin:0px;
    gap:10px;
    color: #D9D9C4;
}

#board {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(5,1fr);
    width: min(340px,60vw);
    gap:4px;
    margin: auto;
    position: relative;
    z-index: -1;
    perspective: 1000px;
}

hr {
    width: min(500px,60vw);
    background-color: #D9D9C4;
    color: #D9D9C4;
}

#header {
    font-size: clamp(1rem, 4vw, 2.5rem);
    color: #D9D9C4;
    font-weight: bold;
    word-spacing: 2px;
}

@keyframes flipTile {
    0% { transform: rotateY(0deg); }
    100%{ transform: rotateY(360deg);}
}

@keyframes spinTile {
    0% { transform: rotateZ(0deg); }
    100%{ transform: rotateZ(360deg);}
}

.tile {
    /*Box*/
    aspect-ratio: 1 / 1;
    border:clamp(1.5px,0.25vw,4px) solid #D9D9C4;

    /*Text*/
    color:white;
    font-size: clamp(5px,2.5vw,12px);
    font-weight: bold;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 1fr 3fr 1fr;
    z-index: -1;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.flipping {
    animation: flipTile 0.6s ease-in-out;
}

.spinning {
    animation: spinTile 1.2s;
}

.correct { 
    background-color: #588853;
    color:white;
    border-color: transparent;
}

.present {
   background-color: #aa994b;
   color:white;
   border-color: transparent; 
}

.absent {
    background-color: #787C7E;
    color: white;
    border-color: transparent;
}

.doubleLetter {
    background-color: #ADD8E6;
    color:black;
    border-color: lightblue;
    display:flex;
    align-items: center;
    justify-content: center;
}

.tripleLetter {
    background-color: #00AEEF;
    color: black;
    border-color: lightskyblue;
    display:flex;
    justify-content: center;
    align-items: center;
}

.keycap {
    aspect-ratio: .65 / 1;
    border-radius: 10%;
    background-color: #FFE6A8;
    color:black;
    border: solid clamp(2px,0.35vw,4px) black;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: 1fr 5fr 1fr;
    place-items:center;
}


.keyLetter {
    font-weight: bold;
    font-size: clamp(10px,3.5vw,20px); /* NOTE: font value is set for keyboard */
    grid-column: 2/3;
    grid-row:1/3;
    display: flex;
    justify-content: center;
    align-items: end;
    border:0;
    margin:0;
    padding:0;
    overflow:visible;
}

.keyNum {
    font-size: clamp(4px,2.25vw,10px); /* NOTE: font value is set for keyboard */
    font-weight: bold;
    grid-column: -2/-1;
    grid-row:-2/-1;
    display: flex;
    justify-content: center;
    align-items: end;
    border:0;
    margin:0;
    padding:0;
    overflow:visible;
}

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}

#keyboard {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: min(98vw,600px);
    height: min(auto,30vh);
    background-color: transparent;
    margin: auto;
    gap:min(5px,0.5vw);
}

.keyboardrow {
    flex:1;
    display: grid;
    gap:min(0.2vw,2px);
}

#kbrow1 {
    grid-template-columns: repeat(10,1fr);
}

#kbrow2 {
    grid-template-columns: 0.5fr repeat(9,1fr) 0.5fr;
}

#kbrow3 {
    grid-template-columns: 1fr repeat(7,1fr) 1fr;
}

#notificationBox {
    position: absolute;
    right:50%;
    top:-5%;
    transform: translate(50%,-0%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:min(10px,1vh);
}

@keyframes notificationFade {
    0% { opacity: 1 }
    100% { opacity: 0; }
}

.notification {
    background-color: white;
    color: black;
    z-index: 2;
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(8px,1.5vw,15px);
    width: clamp(100px, 20vw, 200px); 
    padding: clamp(12px, 2vw, 20px);
    animation: notificationFade 1.5s cubic-bezier(1,.2,1,0) forwards;
}

#topbar {
    width: 100%; 
    height: clamp(20px, 5vh, 70px);
    background-color: #2F4F2F;
    display: grid;
    margin:0;
    padding: 0;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr;
}

.placeholder {
    width: clamp(20px,5vw,40px);
}

.innerWindow {
    position: absolute;
    transform: translate(50%,-50%);
    width: clamp(280px, 80vw, 600px); 
    height: clamp(200px,60vh,500px);
    right: 50%;
    top: 50%;
    background-color: darkslategray;
    z-index: 3;
    border-radius: 3%;
    color:white;
    display: flex;
    flex-direction: column;
    padding:10px;
    box-shadow: black 5px 5px;
    font-family: monospace;
    text-align: left;
    overflow:scroll;
}

.closeWindowButton {
    color:white;
    font-family: sans-serif;
    font-weight: bold;
    background-color: transparent;
    border: none;
    font-size: clamp(16px,5vw,32px);
    text-align: right;
}

.closeWindowButton:hover {
    color:black;
}

h1,h2,h3,h4,li{
    padding: 0;
    margin: 0;
}

.utilButton {
    background-color: darkolivegreen;
    border:none;
    color:#D9D9C4;
    font-size: clamp(16px,5vw,32px);
    text-wrap: nowrap;
    font-weight: bold;
    width: clamp(40px,10vw,80px);
    text-align: center;
}

.utilButton:hover {
    background-color: #D9D9C4;
    color:darkolivegreen;
}

.exampleWord {
    display: flex;
    justify-content: left;
    gap:1px;
}

.loadingScreen {
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-color: #2F4F2F;
    z-index: 3;
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: 2fr 1fr 2fr;
    white-space: nowrap;
}

.loadText {
    font-family: 'Courier New', Courier, monospace;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: clamp(10px,4vw,30px);
}