body,html{
 background-color: #F9F9F9;
}
body{
 overscroll-behavior: none;
}

/* key letter */
.key--letters{
 position: absolute;
}
.key--letter{
 font-family: Helvetica;
 position: absolute;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 opacity: 1;
 color: #B5B5B5;
}
.hidden {
 opacity: 0;
}

.selected{
 color: #1E4BE0;
}


/* key number */
.key--number{
 font-family: Arial;
 position: absolute;
 color: #3C2570;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 1;
}
.key--number:hover{
 color: #3C2570;
}

/* key */
.key--letter-number{
 position: relative;  
  display: block;
  width: 100%;         
  height: clamp(.7rem, 4vw, 5.3rem);
}
.key--row{
 display: flex;
 gap: .5em;
 height: fit-content;
 justify-content: space-around;
 width: 100%;
 position: relative;
}
.key--row:nth-of-type(2) {
 padding-top: clamp(0.05em, 2vw, .4em);
}
.key--row.end-row:nth-of-type(2) {
 padding-top: 0;
}
#key{
 margin-left: clamp(10px, 20px, 30px);
 margin-right: clamp(10px, 20px, 30px);
 margin-bottom: clamp(5px, 10px, 15px);
 margin-top: clamp(5px, 5px, 10px);
}
.key{
 margin-left: clamp(10px, 20px, 30px);
 margin-right: clamp(10px, 20px, 30px);
 margin-bottom: clamp(5px, 10px, 15px);
 margin-top: clamp(5px, 5px, 10px);
}

/* end screen */
.hide {
 display: none;
}
#end{
 margin-left: clamp(10px, 20px, 30px);
 margin-right: clamp(10px, 20px, 30px);
 margin-bottom: 0;
 margin-top: clamp(5px, 5px, 10px);
 display: none;
}
.key--letter-number.end-ln{
 position: relative;  
  display: block;
  width: 100%;         
  height: clamp(1.1rem, 5.8vw, 8rem);
}
.key--letter-number.key--letter.selected.end.end-symbol,
.key--letter-number.key--letter.selected.end.end-symbol-left{
  width: 10%;         
}
.key--letter-number.key--letter.selected.end.end-symbol-space{
 width: 80%;         
}
.end-symbol{
 text-align: center;
}
.end-symbol-left{
 text-align: left;
}


#descriptive-text{
 margin-left: clamp(10px, 20px, 30px);
 margin-right: clamp(10px, 20px, 30px);
 margin-bottom: clamp(10px, 20px, 30px);
 margin-top: 0;
 display: flex;
 justify-content: space-between;
}
.directions{
 width: 70vw;
}
#start{
 cursor: pointer;
}

/* pangrams */
#pangrams{
 margin-left: clamp(10px, 20px, 30px);
 margin-right: clamp(10px, 20px, 30px);
 margin-bottom: clamp(10px, 20px, 30px);
 margin-top: clamp(20vh, 14vh, 12vh);
 align-items: flex-start;
 position: fixed;
 top: 24vh;
 display: flex;
 flex-direction: column-reverse;
}
#pangram-1{

}
#pangram-2{
 display: none;
}
#pangram-3{
 display: none;
}
span.word-spacing{
 width: 100%;
 opacity: 0;
}
.hidden-letter {
 opacity: 0;
}

/* menu */
#menu-about {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100vw; /* span the full viewport width */
 box-sizing: border-box; /* ensures padding doesn't make it overflow */
 padding-left: clamp(10px, 20px, 30px); 
 padding-right: clamp(10px, 20px, 30px);
 margin-bottom: clamp(5px, 10px, 15px);
}

#about{
 display: none;
 cursor: pointer;
 margin-bottom: clamp(5px, 10px, 15px);
}
.level{
 margin-left: clamp(10px, 20px, 30px);
 margin-right: clamp(10px, 20px, 30px);
 margin-bottom: 0;
 align-items: center;
 text-align: center;
}
#menu{
 grid-template-columns: repeat(3, 1fr);
 display: grid;
 margin-bottom: clamp(3px, 8px, 10px);
}
.menu--about{
text-align: left;
grid-column: 1/2;
cursor: pointer;
}
.menu--home{
 text-align: center;
 grid-column: 2/3;
 cursor: pointer;
}
.menu--link{
 text-align: end;
 grid-column: 3/4;
 cursor: pointer;
}
.twentysix{
font-family: Arial;
}
.cursor {
  width: clamp(2px, 0.15em, 3px);
  font-size: clamp(.7rem, 4vw, 5.3rem);
  height: 1lh;
  background-color: #8E7700;
  position: absolute;
  top: 0;
  left: 0;
  animation: caret 1.06s steps(1) infinite;
  display: none;
}

@keyframes caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.pangram p {
  position: relative;
}