@media (max-width: 600px) {
	#wrap{
		width: 70%;
	}
}
#wrap{
    width: 100%;
    height:100%;
    max-width: 555px;
    margin-left: auto;
    margin-right:auto;
    background-image: url("background.png");
    cursor: pointer;
}
#innerwrap{
height: 86%;
width:94%;
padding: 7% 3%;
background:rgba(0, 0, 255,0.5);
}
#main{
    height: 100%;
    width: 100%;
    background: whitesmoke;
    box-shadow: 7px 10px 10px rgba(0,0,0,0.5);
}
.home{
    height: 66.666%;
    width: 66.66%;
    margin: 16.666%;
    background: white;
    border-radius: 10px;
}
.make-center{
    display: flex;
    justify-content: center;
    align-items: center;
}
.h40{
    height: 40%;
}
.hw66{
    height: 66.666%;
    width: 66.666%;
}
.p16{
    margin: 16.666%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.h100{
    height: 100%;
}
.w100{
    width:100%;
}
.h6{
    height: 16.6666%;
}
.h20{
    height: 20%;
}
.h33{
    height: 33.333%;
}
.h50{
    height:50%;
}
.blocks{
    outline: 1px solid black;
    outline-offset: 0x;
    display: flex;
    justify-content: center;
    align-items: center;
}
.flx{
    display: flex;
}
.flex1{
    flex: 1;
}
.flex6{
    flex: 6;
}
.flex3{
    flex: 3;
}
.red{
    background:red;
}
.green{
    background:#009933;
}
.blue{
    background:#0099ff;
}

.yellow{
    background: #ffd11a;
}
.star{
    background-image: url("star.png");
}
.hrb{
    background-image: url("hrb.png");
}
.hrg{
    background-image: url("hrg.png");
}
.hgy{
    background-image: url("hgy.png");
}
.hby{
    background-image: url("hby.png");
}
.hrgby{
    font-size:25px;
    font-weight: bold;
    font-family: cursive;
}
#dice{
    color:red;
}
.hrgby:hover{
    font-size:40px; 
}
.backgroundimgsize{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}