Project 1 nm.css

/* IMPORTANT TO REMEMBER */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */

/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */

/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */

/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */

/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */

/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */

/* . for class, # for id */
/* . for class, # for id */
/* . for class, # for id */

/* . for class, # for id */
/* . for class, # for id */


#icons{
    cursor: pointer;
    width: min(100%, 24px) ; height: auto; 
    align-items: center;

}

.divValign{
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 0;
    
}

.iconsDivVertical{
    width: 16px;

}

#headingPageTitle{
    font-weight: 900;

}
body{

      background-color: rgb(18, 18, 19);  
      
}

header {
    text-align: center;
    
}

#headNavButtons {
    max-width: min(70vw, 350px);
    height: 4vh;
    font-size: 8px;
    padding: 0; 

    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: center;


}

#headerButtons {
    display: flex;
    max-width: 100%;

}

#containerLetterOutput {
  
    display: grid;
    /* grid-template-columns: (auto, clamp(32px, 5vw, 5vw)); */
    grid-auto-rows: Min(5vh, clamp(28px, 8vw, 60px));
     /* height: clamp(320px, 32vh, 500px);  */
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: center;
    
}

.charInputBox {
    
    font-size: clamp(24px, 2vh, 40px);

    background-color: rgb(18, 18, 19); 
    border: 2px solid rgb(58, 58, 60);
    color: white;

    font-weight: 900;
    padding: 1px;
    margin: 1px;

    display: flex;
    align-items: center;
    justify-content: center;
 /*   box-sizing: border-box; */
}

#keyboardContainerTopRow, #keyboardContainerMiddleRow, #keyboardContainerBottomRow, #containerKeyboardInput {
  
    max-width: min(540px, 97vw); /* I'm so proud of this line of code ha ha */
    height: 50px;
    align-items: stretch;
   
/* 
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 1fr;
    column-gap: 1px;
    row-gap: 1px; */
  
}
    /* width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr) 3fr;
    grid-template-rows: 1fr;
    column-gap: 1px;
    row-gap: 1px; */
.keyboardKeys {

    font-size: clamp(20px, 2vh, 24px);
    /* width: clamp(32px, 8vw, 60px); */
    color: white;
    margin: 3px;
    padding: 0px;
    font-weight: 900;
    /* transition-property: background-color; */
   
 /*
    align-items: center
    justify-content: center; */

}

/* .keyboardKeys:hover {
    background-color: rgb(8, 110, 110);
} */

.enterKey {
    
    /* font-size: clamp(28px, 7vw, 48px);
    width: clamp(99px, 25vw, 180px);
    display: flex;
    align-items: center;
    justify-content: center; */
}

.deleteKey{
    /* font-size: clamp(28px, 6vw, 48px);
    display: flex;
    align-items: center;
    justify-content: center; */
}

#gameContainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 7vh 43vh 20vh;
    justify-items: center;
    justify-content: center;
   
}


.letterIncludes {
    background-color: #B59F3B;
}

.letterCorrect {
    background-color: #538D4E;
}

.notInWord {
    background-color: rgb(32, 32, 32);
    color: #818384;
}

#settingsDiv {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 200px));
    justify-items: fill;
    justify-content: center;
}

.playerImage {
   width: 300px;
   filter: blur(5px);
}

.superBlur{
    width: 300px;
    filter: blur(100px);
}

.textInline{
    display: inline;

}

#headerTitle{
    max-width: 100vw;

}

.gameButtonBorder{
    justify-self: center;
    align-self: center;
    justify-content: center;
    align-content: center;
}

.borderGrid{
    height: 7vh;

}

.timerText{
    display: inline; 
    font-size: 12px; 
    text-align: center;

}

footer {
    position:fixed;
    bottom: 0;
    width: 100%;
    padding: 20px 5px 0px 20px;
    height: 40px;
}