
html{
  display: block;

  width: 800px;
  border: 1px black solid;
  margin-left: auto;
    margin-right: auto;
}
h1{
    text-align: center;
}

.rectangleWrapper {
        display: grid;
        grid-gap: 50px 50px ;

        grid-template-columns: 100px 100px 100px 100px 100px;
        grid-template-rows: 100px 100px 100px ;
        background-color: #fff;
        color: #444;
        text-align: center;
        position: relative;
        margin-left: 40px;
        margin-right: auto;


    }
.title{
    padding: 30px;
}

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        font-size: 100%;
        font-weight:bold ;
        border: black solid 1px;
    }

    .title{
        grid-column: 1/6;
        font-size: 130%;
    }
    #b1{
        background-color: #FCCD20;
        position: relative;

    }
    #b2{
        background-color: #FF8000;
        position: relative;
    }
    #b3{
        background-color: #FF2E00;
        position: relative;
    }
    #b4{
        background-color: #F3FF00;
        position: relative;
    }
    #b5{
        background-color: #78FF00;
        position: relative;
    }
    #b6{
        background-color: #00F3FF;
        position: relative;
    }
    #b7{
        background-color: #EAEAEA;
        position: relative;
    }
    #b8{
        background-color: #0093FF;

        position: relative;
    }
    #b9{
        background-color: #BB00FF;
        position: relative;
    }
    #b10{
        background-color: #83A895;
        position: relative;
    }

    span{
        position: absolute;
        top: 50px;
        left: 5px;
        color: #444444;
    }
    #colorBox{
       grid-column: 1/6;
        height: 100px;
        background-color: lightblue;
    }
    #myColor{
        position: relative;
        top: 25px;
    }
    #colorBox{
        position: relative;
        height: 150px;
        top: -50px;
    }
    #msge{
        color: darkgreen;
        margin-left: 15%;
        top: 25px;
        font-size: 23px;
    }
    #info{
        //position: relative;
        margin-left: 10px;
        display: block;
        top: 70px;
    }

