@import"https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap";@import"https://fonts.googleapis.com/css2?family=Special+Elite&display=swap";@import"https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap";.main{width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:60px}@media (max-width: 680px){.main{gap:20px;height:100%;flex-direction:column-reverse}}.button{box-shadow:0 0 110px 30px #fff;padding:10px;font-size:20px;font-family:Permanent Marker,cursive;border-radius:10px}@media (max-width: 680px){.button{box-shadow:0 0 110px 10px #fff}}.selsct-level>select,.selsct-level>span,.selsct-level>button{padding:10px;font-size:20px;font-family:Permanent Marker,cursive;border-radius:10px}.selsct-level{display:flex;flex-direction:column;gap:20px;border:2px solid;padding:20px;border-radius:10px;background:linear-gradient(0deg,rgba(255,245,155,1) 0%,rgba(195,187,114,1) 47%,rgba(163,156,96,1) 100%);box-shadow:0 0 110px 47px #fff}.selsct-level>span{font-size:30px}@media (max-width: 680px){.selsct-level{flex-direction:row;margin:40px}}.start-game{font-family:Roboto Mono,monospace;width:70%;border:2px solid;border-radius:20px;padding:20px;font-size:15px;background:linear-gradient(0deg,rgba(255,245,155,1) 0%,rgba(195,187,114,1) 47%,rgba(163,156,96,1) 100%);margin:30px}.start-game>ul{text-align:left}.start-game>button{font-family:Permanent Marker,cursive;padding:10px;font-size:20px;border-radius:10px;background-color:#7fffd4;width:200px}.black-ball{font-family:Special Elite,cursive;font-size:70px;margin:30px}.ball{height:50px;width:50px;border-radius:50%;border:2px solid rgb(0,0,0,0)}.frame-ball{z-index:2;background-color:#deb887;border:2px solid;border-radius:50%;padding:1px}@media (max-width: 680px){.ball{height:30px;width:30px}}.loss-box{z-index:2;padding:10px;position:absolute;top:17.5%;left:17.5%;width:300px;height:300px;background-color:#e8574785;border-radius:20px;border:3px solid rgb(128,0,0)}.loss-box>*{font-family:Permanent Marker,cursive}.loss-box>h3{font-size:45px;color:#313131}.loss-box>button{font-size:20px;border-radius:10px;background-color:#09dc09}@media (max-width: 680px){.loss-box{padding:5px;top:22%;left:22%;width:150px;height:150px}.loss-box>h3{margin:0;font-size:25px}}.weembox{z-index:2;padding:10px;position:absolute;top:17.5%;left:17.5%;width:300px;height:300px;background-color:#65e84785;border-radius:20px;border:3px solid green}.weembox>*{font-family:Permanent Marker,cursive}.weembox>h3{font-size:50px;color:#313131}.weembox>button{font-size:20px;border-radius:10px;background-color:#09dc09}@media (max-width: 680px){.weembox{padding:5px;top:22%;left:22%;width:150px;height:150px}.weembox>h3{margin:0;font-size:30px}}.scroll-mark{border:5px solid black;width:200px;height:200px;position:relative;position:absolute}.scroll-mark-line{border:2.5px solid black;position:absolute;top:98.75px;left:-25px;width:250px;height:0px}.scroll-mark-line-left-to-right{transform:rotate(45deg)}.scroll-mark-line-right-to-left{transform:rotate(135deg)}#mark1{top:45px;left:45px}#mark2{top:45px;left:248px}#mark3{top:248.5px;left:45px}#mark4{top:248.5px;left:248px}@media (max-width: 680px){.scroll-mark{width:115px;height:115px}.scroll-mark-line{top:60px;left:-20px;width:150px}.scroll-mark-line-left-to-right{transform:rotate(45deg)}.scroll-mark-line-right-to-left{transform:rotate(135deg)}#mark1{top:27px;left:27px}#mark2{top:27px;left:147.5px}#mark3{top:147.5px;left:27px}#mark4{top:147.5px;left:147.5px}}.line{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:141px;height:100px;width:500px}.board{position:relative;box-shadow:0 0 30px 10px #deb887;border-radius:20px;background-color:#deb887;width:500px;height:500px;border:2px solid}.div-game{display:flex;flex-direction:column;width:min-content;align-items:center;gap:20px}.div-game>span{color:bisque;font-size:30px;font-family:Permanent Marker,cursive}.div-control{display:flex;flex-direction:column;gap:60px}@media (max-width: 680px){.line{gap:80px;height:60px;width:250px}.board{width:300px;height:300px}.div-game{flex-direction:column;gap:20px}.div-game>span{color:#70583b}.div-control{display:flex;flex-direction:column-reverse;gap:20px;margin:20px}}body{padding:0;margin:0;background:linear-gradient(0deg,rgba(227,218,138,1) 0%,rgba(163,156,96,1) 47%,rgba(132,126,78,1) 100%);background-repeat:no-repeat;background-position:center;background-attachment:fixed}#root{width:100%;text-align:-webkit-center}@media (max-width: 680px){body,#root{height:100%}}