/* @import url("https://fonts.googleapis.com/css?family=Kameron:700"); */


/* @font-face {
  font-family: 'wenxue';
  src: url('MStiffHeiHK-UltraBold.TTF');
} */

@font-face {
    font-family: 'MyWebFont';
    src: url("images/MStiffHeiHK-UltraBold.TTF") format("opentype");
}

html,
body {
    font-family: 'MyWebFont';
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    width: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

.bg {
    background-image: url(images/minigame_workspace_final.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    position: relative;
    /* filter: brightness(0.5);
pointer-events: none; */
}

svg,
object {
    /* fill: #fffcff;
height: 30%;
left: 10%;
overflow: visible;
position: absolute;
stroke: black;
top: 20%;
width: 25%;
z-index: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent; */
    /* fill: #fffcff; */
    height: 30%;
    left: 20%;
    overflow: visible;
    position: absolute;
    stroke: black;
    top: 73%;
    width: 18%;
    height: 0;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

.stage {
    /* background: none;
overflow: hidden;
position: absolute;
visibility: hidden;
top: 66%;
bottom: 0;
left: 73px;
width: 71%; */
    display: grid;
    grid-template-columns: 45% 0.4fr 1fr;
    grid-template-rows: 1fr 1.7fr 1fr 1fr 7%;
    background: none;
    overflow: hidden;
    position: absolute;
    visibility: hidden;
    /* top: 50%; */
    top: 0;
    bottom: 0;
    left: 0px;
    width: 100%;
    height: 100%;
}

#bHoop {
    stroke-width: 5;
}

#bHoop .shadow {
    fill: rgba(0, 0, 0, 0.7);
    stroke: none;
}

#basket #net {
    fill: none;
    /* stroke: #CCC; */
    stroke: transparent;
    stroke-miterlimit: 10;
}

#basket #ring {
    fill: transparent;
    stroke: none;
}

#ball {
    /* cursor: pointer;
fill: #df4931;
stroke: none;
height: 79px;
left: 1vw;
position: relative;
bottom: 87px; */
    cursor: pointer;
    fill: #df4931;
    stroke: none;
    /* height: 98px; */
    left: 0px;
    position: absolute;
    bottom: 0px;
}

#ball .ballPath {
    -webkit-clip-path: url(#clip-path);
    clip-path: url(#clip-path);
}


/* 
#ball .ballStripe {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
} */

ul {
    list-style-type: none;
    padding: 0;
    top: 0;
}

li {
    /* display: inline-block; */
    display: flex;
    width: 27%;
    justify-content: center;
}

.copy {
    /* background: #414042;
box-shadow: 0 0 1px #633a26;
color: #adafb3;
font-family: "Kameron", serif;
font-size: 1rem;
left: 0;
margin: 0;
padding: 6px 0;
position: fixed;
text-align: center;
text-transform: uppercase;
width: 100%; */
    background: #414042;
    box-shadow: 0 0 1px #633a26;
    color: #adafb3;
    font-family: 'MyWebFont';
    font-size: 1vw;
    /* left: 34vw; */
    margin: 0;
    padding: 4px 0px;
    position: absolute;
    display: none;
    max-width: 100vw;
    text-transform: uppercase;
    justify-content: center;
    width: 100%;
}

.instructions {
    bottom: 0;
    font-size: 1rem;
}

#hits {
    /* position: relative;
top: 2vh;
padding: 0 -32px;
justify-items: center;
color: #927155;
font-family: 'MyWebFont';
font-size: 10vh;
left: 13vh;
align-self: center; */
    /* position: relative; */
    /* position: absolute; */
    /* top: 5vh;
  padding: 0 -32px;
  justify-items: center;
  color: #927155;
  font-family: 'MyWebFont';
  justify-self: center;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3; */
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    align-self: center;
    display: flex;
    justify-content: center;
    padding: 0 42px 0;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    position: relative;
    bottom: 14px;
}

.gameOver {
    display: none;
    /* position: relative;
left: 46vw;
width: 34%;
bottom: -31%;
z-index: 1;
color: #fff;
font-size: 40px;
float: left; */
    position: relative;
    /* left: 34vw; */
    width: 100%;
    bottom: -13%;
    z-index: 3;
    color: #fff;
    /* font-size: 59px; */
    float: left;
    text-align: center;
    justify-content: center;
    text-transform: uppercase;
    /* line-height: 14vh; */
    line-height: 19vh;
}

#score {
    font-size: 21vh;
}

#score_text {
    font-size: 10vh;
}

.start {
    /* position: relative;
left: 34vw;
width: 32%;
top: 44%;
z-index: 1;
color: #fff;
font-size: 59px;
float: left;
text-align: center;
text-transform: uppercase;
line-height: 12vh; */
    position: absolute;
    display: grid;
    /* left: 34vw; */
    /* grid-template-columns: 100%; */
    width: 100%;
    top: 26%;
    justify-content: center;
    z-index: 3;
}

.gameScore {
    float: left;
    color: #fff;
    z-index: 1;
    position: relative;
}

.js-reload {
    transform: translate(-50%, -11%);
    width: 25%;
    /* width: 9%;
min-width: 150px; */
    top: 126%;
    left: 50%;
    position: absolute;
}

#start-button {
    transform: translate(-50%, 120%);
    width: 25%;
    /* width: 9%; */
    /* min-width: 150px; */
    top: 126%;
    left: 50%;
    position: absolute;
}

.number {
    /* transform: translate(-50%, 50%);
width: 13%;
min-width: 150px;
top: 50%;
left: 50%;
position: absolute; */
    transform: translate(272%, 27%);
    width: 20%;
    position: absolute;
}

.countnumber {
    transform: translate(-50%, 120%);
    width: 25%;
    /* width: 9%; */
    /* min-width: 150px; */
    top: 126%;
    left: 50%;
    position: absolute;
    /* transform: translate(-50%, 50%);
width: 13%;
min-width: 150px;
top: 50%;
left: 50%;
position: absolute; */
}

.number1 {
    /* transform: translate(-50%, 50%);
width: 13%;
min-width: 150px;
top: 50%;
left: 50%;
position: absolute; */
    transform: translate(383%, 27%);
    width: 20%;
    position: absolute;
}

.number2 {
    transform: translate(14%, 27%);
    width: 20%;
    position: absolute;
}

.number3 {
    transform: translate(123%, 27%);
    width: 20%;
    position: absolute;
}


/* .number{
position: relative;
bottom: 3vw;
width: 13vw;
} */

p.score_text,
p.score {
    margin: 0
}

p.score {
    font-size: 11vw;
}

p.score_text {
    font-size: 3vw;
}

.clock {
    /* width: 185px;
height: 86px;
background: #535580;
position: relative;
left: 20vw;
top: 10vw; */
    width: 68%;
    height: 95%;
    background: transparent;
    position: relative;
    left: 1vw;
    /* top: 10vw; */
    justify-self: center;
    align-self: center;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
}

.stage .mask {
    background-color: #000;
    opacity: .6;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.tutorial {
    /* justify-self: end;
  align-self: end;
  color: #ffffff;
  padding: 7% 0;
  margin: 15px -5px; */
    justify-self: center;
    align-self: center;
    color: #ffffff;
    /* padding:0% 81px; */
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;
    line-height: 17px;
    font-size: 12px !important;
}

object.bin {
    width: 21%;
    top: 69%;
}

.score_1,
.score_2 {
    /* position: absolute; */
    width: 35%;
    /* left: 5.5vw; */
    /* left: 10%;
  bottom: 28vw; */
}

.score_1 {
    position: relative;
    left: 1px;
    /* left: 4vw; */
}

.score_2 {
    position: relative;
    right: 6px;
    /* left: 4vw; */
}