body{
    font-family: Roboto;
    
}

div{
    font-family: Roboto;
    /* border-style: dashed; */
    font-weight: bold;
    font-size: clamp(20px, 1.5vh, 40px);
}

 
:root{
    --title: 5%;
    --menu: 3.5%;
    --ltl-gap: 1fr;
    --line: 2px;
    --gvn-nmbr-height: 7.096%;
    --gvn-nmbr-width: 14.169%;
    --op-nmbr-height: 8.727%;
    --op-nmbr-width: 17.483%;
    --op-height: 51.401%;
    --op-width: 8.986%;
    --op-col-gap: 4.649%;
    --big-gap: 2fr;
    --action-height: 7.177%;
    --action-width: 14.379%;

    --min-game-width: 315px;
    --max-game-width: 630px;
    --min-game-height: 613px;
    --max-game-height: 1226px;
}


.number-of-day{
    /* border: yellow; */

    font-style: normal;
    font-weight: 200;
    font-size: clamp(45px, 5vh, 72px);

    /* font-size: 72px; */
    /* line-height: 84px; */
    align-items: center;
    text-align: center;
    color: #000000;
    /* background-color: chocolate; */
}

.game-wrapper{
    margin:auto;
    background-color: white;
    text-align: center;
    justify-content: center;
    align-items: center;
    align-content: center;
   
    /* border-style: dashed; */
    width: 99%;
    height: 99%;
    padding: 0 0 0 0;

}


.game{
    /* position: absolute; */
    margin:auto;
    padding: 0px;

    display: grid;
    /* grid-auto-rows: unset; */
    grid-template-columns: 100%;
    grid-template-rows: var(--title) var(--menu) var(--ltl-gap) var(--line) var(--ltl-gap) var(--gvn-nmbr-height) var(--big-gap) repeat(4, var(--op-nmbr-height) var(--op-col-gap)) var(--op-nmbr-height) var(--big-gap) var(--line) var(--ltl-gap) var(--action-height);

    /* width: 630px; */
    /* height: 1226px; */
    /* max(MIN, min(val, MAX)) */
    width: max(var(--min-game-width), min(calc(min(calc(100vh / 1.946), 100vw) * 0.7), var(--max-game-width)));
    height: max(var(--min-game-height), min(calc(min(100vh , calc(100vw * 1.946))  * 0.7), var(--max-game-height)));
    background-color: white;
    /* background-color: purple; */

    row-gap: 0;
    column-gap: 0;


}

.title-frame{
    
    width: 100%;
    /* height: 5.138%; */
    /* background-color: blue; */
    margin: auto;
}

.menu-frame{
    width: 100%;
    /* height: 5.138%; */
    /* background-color: blue; */
    
    display: grid;
    /* grid-template-rows: 100%; */
    grid-template-columns: 50% 50%;
    justify-content: left;
    align-items: center;
}
.menu-r{
    /* background-color: aqua; */
    justify-self: end;
}
.menu-l{
    /* background-color: aqua; */
    justify-self: start;
}
.menu-l, .menu-r{
    font-weight: 300;
    /* font-size: 35px; */
    cursor: pointer;
}

.line{
    display: block; 
    margin: 0;
    padding: 0;
    background-color: black;
}

.given-numbers-frame{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, var(--gvn-nmbr-width));
    justify-content: space-between;
    column-gap: 0;
    row-gap: 0;
}

.given-number{
    /* color: #FFFFFF; */
    display: flex;
    /* background-color: #FF1616; */
    font-style: normal;
    font-weight: bold;
    /* font-size: 40px; */
    justify-content: center;
    align-items: center;
}


.operation-frame{

    display: grid;
    grid-template-columns: repeat(2, var(--op-nmbr-width) var(--op-width)) var(--op-nmbr-width);
    justify-content: space-between;
    align-items: center;
}


.op-number, .op-given-number{
    background: #FFFFFF;
    /* border: 2px solid black; */
    border: 3px solid #E5E5E5;
    box-sizing: border-box;
    background-color: white;
    height: 100%;



    display: flex;
    font-style: normal;
    font-weight: bold;
    /* font-size: 40px; */
    justify-content: center;
    align-items: center;
    color: #737374;

}


.operation{
    color: #737374;

    background: #FFFFFF;
    /* border: 2px solid black; */
    border: 3px solid #E5E5E5;
    box-sizing: border-box;
    /* background-color: brown; */
    height: var(--op-height);

    display: flex;
    font-style: normal;
    font-weight: bold;
    /* font-size: 40px; */
    justify-content: center;
    align-items: center;
}

.op-used{
    border: 3px solid #E5E5E5;
}

.operation-const{
    /* font-style: normal; */
    /* font-weight: thin; */
    /* font-size: 34px; */

    font-weight: 400;
    font-style: normal;

    background: #FFFFFF;
    /* border: 4px solid #E5E5E5; */
    /* box-sizing: border-box; */
    height: var(--op-height);

    display: flex;
    font-style: no;
    font-weight: thin;
    justify-content: center;
    align-items: center;
}


/* .operation-gap-frame{

} */

.actions-frame{

    width: 100%;
    /* background-color: green; */
    display: grid;
    grid-template-columns: repeat(6, var(--action-width));
    justify-content: space-between;
    column-gap: 0;
    row-gap: 0;
}


.action{
    cursor: pointer;
    display: flex;
    background-color: red;
    font-style: normal;
    /* font-weight: bold; */
    /* font-size: 40px; */
    justify-content: center;
    align-items: center;

    background: #FFFFFF;
border: 3px solid #000000;
box-sizing: border-box;
}


.lit{
    /* font-size: 40px; */
    font-weight: 100;
    font-style: normal;
    font-size: clamp(15px, 1.3vh, 30px);
    /* clamp(20px, 1.5vh, 40px); */
}





.usable{
    cursor: pointer;
    background-color: #C2002F;
    color: #FFFFFF;
    border-color: #C2002F;
}


.used{
    background-color: #C2DFDE;
    color: #FFFFFF;
    border-color: #C2DFDE;
}


.empty{
    background-color:grey;
}

.correct{
    background-color: #5271FF;
    color: #FFFFFF;
    border-color: #5271FF;
}




/* :root{
    --ops-width:80vw;
    --ops-height:80vh;
}

.operations-wrapper {
    padding: 10px;
    background: white;
    box-sizing: border-box;
    resize: horizontal;
    border: 1px dashed;
    overflow: auto;
    max-width: 100%;
    height: 60%;
  }
  
  .operations {
    width: 100%;
    height: 100%;
    padding-bottom: 75%;
    background: gold; 
    width: min(var(--ops-width), var(--ops-height));
    height: min(var(--ops-width), var(--ops-height));
    background: gold;  
}


.parent {
    position: relative;
    width: 75%;
    background: gold;  
      
}
.child {
    position: relative;
    background: green;  

    padding-bottom: calc(100% * 9 / 16);
}


.item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}

  .container {
    font-size: 40px;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    background: LightGray;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(2, auto);
    grid-gap: 10px;

  } */