:root{
    --pss: min(1vw, 0.6rem)
}

.gameContainer{
    width: calc(var(--pss) * 100);
    margin: 0 auto;
}

body {
    background-color: var(--theme-softbg-0);
    color: var(--theme-bw-1);
}

.level {
    float:left;
    font-size: calc(var(--pss) * 6);
    
}

.topBar {
    padding: 3% 3% 0% 3%;
}

.score {
    font-size: calc(var(--pss) * 6);

    text-align: center;
}

.puzzle {
    font-size: calc(var(--pss) * 15);

    text-align: center;
    padding-top: 5%
    
}

.juzb {
    padding-left: 30%;
    height: fit-content;
}

.child {
    text-align: center;
    width: 15%;
    float: left;
    font-size: calc(var(--pss) * 15);
}

p {
    margin: 0;
    padding: 0;
}

.highScore {
    float: right;
    font-size: calc(var(--pss) * 6);
}

button{
    background-color: var(--theme-gr-0);
    color: var(--theme-bw-1);
}

.keyboard1 {
    padding-top: 10%;
    padding-left: 6%;
    padding-right: 6%
}

.keyboard2 {
    padding-top: 5%;
    padding-left: 6%;
    padding-right: 6%;
}

.key {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 16.6%;
    float: left;
    font-size: calc(var(--pss) * 6);
}