* {
  box-sizing: border-box;
  font-family: 'Kirang Haerang';
  margin:0;
  padding:0;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
  -webkit-user-drag: none;
}
    
#frame-page {
  height: calc(var(--vh, 1vh) * 100);
  border: white calc(var(--vh, 1vh) * 1) solid;
  background: white;
}

#container-game {
  background-image: url('resources/objects/backgroundWoodLightLarge.png');
  border: peru calc(var(--vh, 1vh) * 1) ridge;
  height: calc(var(--vh, 1vh) * 98);
  margin: 0 auto;
  padding: calc(var(--vh, 1vh) * 1); 
  width: calc(var(--vh, 1vh) * 113.1606528);
}

.row-tb {
  float: left;
  height: 1.923076923%;
  position: relative;
}
  
.row {
  float: left;
  height: 3.846153846%;
  position: relative;
}

.column-lr {
  float: left;
  width: 0.961538462%;
  position: relative;
}

.column {
  float: left;
  width: 5.7692308%;
  position: relative;
}
  
.marble img {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {
  border-radius: 50%;
  height: calc(var(--vh, 1vh) * 5.65384615);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

#box-instructions {
  bottom: calc(var(--vh, 1vh) * 16);
  height: calc(var(--vh, 1vh) * 10);
  left: calc(var(--vh, 1vh) * 94);
  position: relative;
  width: calc(var(--vh, 1vh) * 15);
}

#box-instructions button {
  background-color: #efefef;
  border-radius: 4px;
  cursor: pointer;
  display: block;
  font-size: 1.2vw;
  height: 50%;
  margin-top: 2%;
  position: relative;
  text-align: center;
  width: 100%;
}

[class*="l-180"]:after {
  content: '';
  border-left: solid 1.5px black;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
}

.l-180-13:after {
  height: 2400%;
}

.l-180-12:after {
  height: 2200%;
}

.l-180-11:after {
  height: 2000%;
}

.l-180-10:after {
  height: 1800%;
}

.l-180-09:after {
  height: 1600%;
}

.l-180-04:after {
  height: 600%;
}

.l-180-03:after {
  height: 400%;
}

.l-180-02:after {
  height: 200%;
}

[class*="l-60"]:before {
  content: '';
  border-left: solid 1.5px black;
  position: absolute;
  z-index: 1;
  transform: rotate(-240deg);
}

.l-60-13::before {
  height: 2400%;
  left:650%;
  top:-550%;
}

.l-60-12::before {
  height: 2200%;
  left:600%;
  top:-500%;
}

.l-60-11::before {
  height: 2000%;
  left:550%;
  top:-450%;
}

.l-60-10::before {
  height: 1800%;
  left:500%;
  top:-400%;
}

.l-60-09::before {
  height: 1600%;
  left:450%;
  top:-350%;
}

.l-60-04::before {
  height: 600%;
  left:200%;
  top:-100%;
}

.l-60-03::before {
  height: 400%;
  left: 150%;
  top:-50%;
}

.l-60-02::before {
  height: 200%;
  left: 100%;
  top: 0%;
}

[class*="l-240"]:before {
  content: '';
  border-left: solid 1.5px black;
  position: absolute;
  z-index: 1;
  transform: rotate(-120deg);
}

.l-240-13::before {
  height: 2400%;
  left:-550%;
  top:-550%;
}

.l-240-12::before {
  height: 2200%;
  left:-500%;
  top:-500%;
}

.l-240-11::before {
  height: 2000%;
  left:-450%;
  top:-450%;
}

.l-240-10::before {
  height: 1800%;
  left:-400%;
  top:-400%;
}

.l-240-09::before {
  height: 1600%;
  left:-350%;
  top:-350%;
}

.l-240-04::before {
  height: 600%;
  left:-100%;
  top:-100%;
}

.l-240-03::before {
  height: 400%;
  left: -50%;
  top:-50%;
}

.l-240-02::before {
  height: 200%;
  left: 0%;
  top: 0%;
}

#warningLandscape {
  background-image:url('resources/objects/backgroundWoodLight.jpg');
  background-size: cover;
  color: black;
  display: none;
  font-size: 8vh;
  height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 100;
}

#warningLandscape p {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
}

@media screen and (orientation:portrait) {
  #warningLandscape {
    display: block;
  }  
  html {
    background-image:url('resources/objects/backgroundWoodLight.jpg');
    background-size: cover;
    }
  #frame-page {
    display: none;
  }
}