@font-face {
    font-family: typo;
    src: url(TypoSlab_Irregular_Demo.otf);
}

body{
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: #2d898e;
}

#heading {
    font-family: typo;
    color: white;
    justify-self: center;
}

#container-body{
    height: 95%;
    display: grid;

    grid-template-rows: 0.25fr 2fr;
    align-items: center;
}

#container-inner {
    display: flex;

    width: 100%;
     height: fit-content;
    justify-content: center;
    align-items: center;
}


#headerArea{
    display: grid;

    align-items: center;
    width: 95vw;
    font-size: 2rem;
    font-family: typo;
    color: #ffffffaf;
    justify-self: center;
}

#gameSettingsContainer {
   height: fit-content;
   width: fit-content;
   
}

#outer-container{
   
   
    display: grid;
   

    row-gap: 2rem;
    background-color: white;
  
    padding: 2rem;
   
    
}

#inner-container {
    display: grid;
    
    background-color: #2d898ecb;
    align-items: center;
    color: white;
    padding: 2rem;
    font-family: typo;
    font-size: 1.5rem;
    row-gap: 2rem;
    box-shadow: 0px 0px 10px 1px #d7d7d7;
    font-family: typo;
}

#inputLabel{
  color: white;
  padding-right: 1rem;
    
}

#headLine {
    justify-self: center;
    font-size: 1.8rem;
}

#inputName{
    border: 1px solid #2d898ecb;
    text-align: center;
    font-size: 1.5rem;
    font-family: typo;
    background-color: white;
    outline: none;
    box-shadow: inset 0px 0px 4px 0px #5c5c5c;
}

#categoryCreateSection {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1.5rem;
   

}

#playerCreateSection {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-items: center;
    border: 1px solid white;
    padding: 2rem;
}

#startGameButton{
    font-family: typo;
    font-size: 1.5rem;
    border: none;
    padding: 1rem;
    background-color: #2d898ecb;
    color: white;
    box-shadow: 0px 0px 10px 1px #d7d7d7;
}

.categroySection {
    display: flex;
    justify-content: space-between;
}