/* Created by lolo */

body {
    background:
        radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
        radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
        radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
        radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
        radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
        radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
        radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
        radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
        linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
        linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
        background-color: #300;
        background-size: 100px 100px;	
        margin:0;padding:0;
         font-family: 'Fjalla One';
    }
    #canvas-container{
        position:absolute;
        top:-160px;
    }
    canvas {
        transform: scale(1);
        transform-origin: top;
        width: 160px;
        height: 160px;
    }
    .container{
        position:absolute;
        margin:auto;
        left:0;top:50px;right:0;bottom:0;
        width:361px;
        height:220px;
        border:10px solid black;
        background-color: green;
        box-shadow: 10px 10px 20px black;
    }
    
    .red{background-color:red;box-shadow:inset 0 0 5px black;}
    .black{background-color:black;box-shadow:inset 0 0 2px white;}
    .green{background-color:green;box-shadow:inset 0 0 5px black;}
        
    #output{
        position:absolute;
        top:-100px;
        left:300px;
        width:50px;
        height:70px;
        background-color:green;
        color:white;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:2em;
        border:2px solid white;
        box-shadow:5px 5px 5px black;
    }
    .box, .box2{
        position:absolute;
        width:25px;
        height:30px;
        color:white;
        font-size:0.8em;
        display:flex;
        justify-content:center;
        align-items:center;
        border:0.5px solid green;
        user-select: none;
        cursor:pointer;
    }
    .box2{
        border:none;
        border-top:2px solid black;
        box-shadow:inset 0 0 10px black;
    }
    .token{
        position:absolute;
        top:5px;
        left:2px;
        width:17px;
        height:17px;
        border-radius:50%;
        background-color:white;
        color:black;
        font-size:0.8em;
        border:1.5px dashed blue;
        display:flex;
        justify-content:center;
        align-items:center;
        user-select: none;
    }
    .more100{
        font-size:0.6em;
    }
    .choicetoken{
        position:absolute;
        width:20px;
        height:20px;
        border-radius:50%;
        color:black;
        border:1.5px dashed blue;
        background-color:white;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:0.6em;
        font-weight:bold;
        cursor:pointer;
        box-shadow:0 0 10px transparent;
    }
    .token1{top:160px;left:5px;box-shadow: 0 0 10px black;transform:scale(1.2);}
    .token5{top:160px;left:35px;}
    .token10{top:160px;left:65px;}
    .tokenall{top:160px;left:95px;font-size:0.5em;}
    .token1less{top:160px;left:270px;}
    .token5less{top:160px;left:300px;}
    .token10less{top:160px;left:330px;}
    
    .b0{left:0;top:0;height:90px;width:35px;border-radius:50% 0 0 50%;}
    .b1{top:0;left:35px;}
    .b2{top:0;left:60px;}
    .b3{top:0;left:85px;}
    .b4{top:0;left:110px;}
    .b5{top:0;left:135px;}
    .b6{top:0;left:160px;}
    .b7{top:0;left:185px;}
    .b8{top:0;left:210px;}
    .b9{top:0;left:235px;}
    .b10{top:0;left:260px;}
    .b11{top:0;left:285px;}
    .b12{top:0;left:310px;}
    .b13{top:0; left:335px;}
       
    .b14{top:30px;left:35px;}
    .b15{top:30px;left:60px;}
    .b16{top:30px;left:85px;}
    .b17{top:30px;left:110px;}
    .b18{top:30px;left:135px;}
    .b19{top:30px;left:160px;}
    .b20{top:30px;left:185px;}
    .b21{top:30px;left:210px;}
    .b22{top:30px;left:235px;}
    .b23{top:30px;left:260px;}
    .b24{top:30px;left:285px;}
    .b25{top:30px;left:310px;}
    .b26{top:30px; left:335px;}
    
    .b27{top:60px;left:35px;}
    .b28{top:60px;left:60px;}
    .b29{top:60px;left:85px;}
    .b30{top:60px;left:110px;}
    .b31{top:60px;left:135px;}
    .b32{top:60px;left:160px;}
    .b33{top:60px;left:185px;}
    .b34{top:60px;left:210px;}
    .b35{top:60px;left:235px;}
    .b36{top:60px;left:260px;}
    .b37{top:60px;left:285px;}
    .b38{top:60px;left:310px;}
    .b39{top:60px; left:335px;}  
    
    .b40{top:90px;left:35px;width:100px;}
    .b41{top:90px;left:135px;width:100px;}
    .b42{top:90px;left:235px;width:100px;}
    
    .b43{top:120px;left:35px;width:50px;}
    .b44{top:120px;left:85px;width:50px;}
    .b45{top:120px;left:135px;width:50px;}
    .b46{top:120px;left:185px;width:50px;}
    .b47{top:120px;left:235px;width:50px;}
    .b48{top:120px;left:285px;width:50px;}
    
    .b49{top:190px;left:0;width:100px;background-color:white;color:black;font-size:0.8em;}
    .b50{top:190px;left:100px;width:161px;background-color:red;}
    .b51{top:190px;left:261px;width:100px;background-color:white;color:black;font-size:0.8em;}
    
    #cash{
        position:absolute;
        top:192px;
        left:2px;
        font-size:.5em;
        font-weight:bold;
    }
    #bet{
        position:absolute;
        top:192px;
        left:345px;
        font-size:.5em;
        font-weight:bold;
    }
    #play{
        position:absolute;
        display:flex;
        justify-content:center;
        align-items:center;
        color:white;
        font-size:1em;
        top:240px;
        left:130px;
        width:100px;
        height:30px;
        background: linear-gradient(0deg, #B7DAEC, #06A8DA, #08689A, #023047);
        border-radius:30px;
        box-shadow:5px 10px 10px black;
        cursor:pointer;
    }
    #info{
        display:none;
        position:absolute;
        width:380px;
        height:220px;
        top:-10px;
        left:-10px;
        border-radius:10px;
        background:white;
        font-size:0.8em;
        text-align:center;
        background-color:teal;
        color:white;
        border:2px solid white;
        user-select: none;
    }
    h3{
        text-decoration:underline;
    }
    #close{
        position:absolute;
        top:10px;
        right:10px;
        color:white;
        cursor:pointer;
    }
    #btninfo{
        position:absolute;
        display:flex;
        justify-content:center;
        align-items:center;
        color:white;
        width:10px;
        height:10px;
        bottom:-50px;
        right:0px;
        padding:5px;
        border-radius:50%;
        background-color:#06A8DA;
        border:2px solid white;
        box-shadow:3px 3px 5px black;
        font-size:0.8em;
        cursor:pointer;
    }
    #finish{
        display:none;
        justify-content:center;
        align-items:center;
        position:absolute;
        font-size:1.5em;
        top:235px;
        left:-5px;
        width:360px;
        height:40px;
        background:white;
        border-radius:10px;
        border:3px solid blue;
        box-shadow:5px 10px 10px black;
    }
    #footer{
        position:fixed;
        bottom:0;
        right:0;
        width:120px;
        height:30px;
        color:white;
        font-size:0.7em;
        background-color:rgba(0,0,0,.5);
        border-radius:50px 0 0 0 ;
    }
    #lololearn{
        position:absolute;
        bottom:8.5px;
        right:35px;
    }
    #loloimg{
        position:absolute;
        bottom:5px;
        right:5px;
        width:20px;
        border-radius:50%;
    }
    a{
        color:white;
    }