* {
    margin: 0px;
    padding: 0px;
 }

        #main {
            margin-top: 2%;
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-content: center;
            align-items: center;
        }

        #board {
            border: 5px solid black;
            width: 650px;
            height: 650px;
            flex-direction: column;
        }

        #row1 {
            display: flex;
            width: 100%;
            height: 40%;
        }

        #row2 {
            display: flex;
            width: 100%;
            height: 20%;
        }

        #row3 {
            display: flex;
            width: 100%;
            height: 40%;
        }

        #green {
            width: 40%;
            background-color: green;
            padding: 20px;
        }

        #yellow {
            width: 40%;
            background-color: yellow;
            padding: 20px;
        }

        #red {
            width: 40%;
            background-color: red;
            padding: 20px;
        }

        #blue {
            width: 40%;
            background-color: blue;
            padding: 20px;
        }

        .inner {
            border-radius: 20px;
            background-color: white;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: space-evenly;
            flex-direction: column;
        }

        #upper {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            padding: 5%;
        }

        #lower {
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 100%;
            align-content: center;
            padding: 5%;
        }

        .g_green {
            display: flex;
            justify-content: center;
            border-radius: 10%;
            background-color: green;
            width: 100%;
            height: 100%;
            margin-right: 10%;
            box-shadow: 3px 3px 3px 3px gray;
        }

        .g_yellow {
            display: flex;
            justify-content: center;
            border-radius: 10%;
            background-color: yellow;
            width: 100%;
            height: 100%;
            margin-right: 10%;
            box-shadow: 3px 3px 3px 3px gray;
        }

        .g_red {
            display: flex;
            justify-content: center;
            border-radius: 10%;
            background-color: red;
            width: 100%;
            height: 100%;
            margin-right: 10%;
            box-shadow: 3px 3px 3px 3px gray;
        }

        .g_blue {
            display: flex;
            justify-content: center;
            border-radius: 10%;
            background-color: blue;
            width: 100%;
            height: 100%;
            margin-right: 10%;
            box-shadow: 3px 3px 3px 3px gray;
        }

        #yellow_move {
            display: grid;
            width: 20%;
            height: 100%;
            grid-template-columns: 33% 33% 33%;
        }

        #red_move {
            display: grid;
            width: 20%;
            height: 100%;
            grid-template-columns: 33% 33% 33%;
        }

        #green_move {
            display: grid;
            width: 40%;
            height: 100%;
            grid-template-rows: 33% 33% 33%;
            grid-template-columns: 16.5% 16.5% 16.5% 16.5% 16.5% 16.5%;
        }

        #blue_move {
            display: grid;
            width: 40%;
            height: 100%;
            grid-template-rows: 33% 33% 33%;
            grid-template-columns: 16.5% 16.5% 16.5% 16.5% 16.5% 16.5%;
        }

        .box {
            width: 100%;
            height: 100%;
            border: 1px solid black;
        }

        .box-y {
            background-color: yellow;
        }

        .box-g {
            background-color: green;
        }

        .box-b {
            background-color: blue;
        }

        .box-r {
            background-color: red;
        }

        #multicolor {
            width: 20%;
            height: 100%;
            box-shadow: inset 0 25px 10px 0 yellow, inset 0 -25px 10px 0 red, inset 50px 0 50px 0 green, inset 0 0 50px 35px blue;
        }

        #dice {
            display: inline-block;
        }

        #die {
            padding: 50px;
            background-image: url("1.png");
            background-color: rgba(0, 0, 255, 0);
            background-size: contain;
            border: 5px solid black;
            border-radius: 5px;
        }
        #b1,
        #b2,
        #b3,
        #b4 {
            background-image: linear-gradient(blue, rgb(0, 110, 255));
            border: 1px solid black;
            box-shadow: 3px 3px 5px black;
            border-radius: 50%;
            width: 90%;
            height: 90%;
            margin: auto;
        }

        #g1,
        #g2,
        #g3,
        #g4 {
            background-image: linear-gradient(green, rgb(94, 255, 0));
            border: 1px solid black;
            box-shadow: 3px 3px 5px black;
            border-radius: 50%;
            width: 90%;
            height: 90%;
            margin: auto;
            z-index: 1;
        }

        #y1,
        #y2,
        #y3,
        #y4 {
            background-image: linear-gradient(yellow, rgb(255, 166, 0));
            border: 1px solid black;
            box-shadow: 3px 3px 5px black;
            border-radius: 50%;
            width: 90%;
            height: 90%;
            margin: auto;
            z-index: 1;
        }

        #r1,
        #r2,
        #r3,
        #r4 {
            background-image: linear-gradient(red, rgb(255, 191, 172));
            border: 1px solid black;
            box-shadow: 3px 3px 5px black;
            border-radius: 50%;
            width: 90%;
            height: 90%;
            margin: 2px;
            margin: auto;
            z-index: 1;
        }
        #r1,
        #b1,
        #g1,
        #y1 {
            z-index: 1;
        }
        #r2,
        #b2,
        #g2,
        #y2 {
            z-index: 2;
        }
        #r3,
        #b3,
        #g3,
        #y3 {
            z-index: 3;
        }
        #r4,
        #b4,
        #g4,
        #y4 {
            z-index: 4;
        }