body {
text-align: center;
font-family: Arial;
background-color: #E48118;
}

h2{
font-size: 24px;
}

h3{
font-size: 15px;
}


#playspace{
height: 606px;
width: 1175px;
margin: auto;
background-color: #F9E57A;
}

#playoverlay{
height: 606px;
width: 1100px;
margin-top: -606px;
position: absolute;
}


#column1{
height: 606px;
width: 135px;
position: absolute;
margin-left: 855px;
margin-top: -606px;
}


#column2{
height: 606px;
width: 200px;
position: absolute;
margin-left: 980px;
margin-top: -606px;
}

#deck{
height: 78px;
width: 113px;
display: inline-block;
float: left;
margin-left: 13px;
margin-top: 3px;
background-color: #E48118;
border-radius: 10px;
border: 3px solid white;
}

#card{
height: 82px;
width: 117px;
display: inline-block;
float: left;
margin-left: 13px;
margin-top: 3px;
background-color: white;
border-radius: 10px;
border: 1px solid black;
}


#cardbox{
height: 82px;
width: 117px;
display: inline-block;
float: left;
margin-left: 13px;
margin-top: 3px;
background-color: white;
border: 1px solid black;
}

#cardpick{
height: 38px;
width: 54px;
display: inline-block;
float: left;
background-color: white;
border-radius: 5px;
border: 1px solid black;
}

#blockbank{
height: 400px;
width: 170px;
display: inline-block;
float: left;
margin-left: 15px;
margin-top: 30px;
}


#cardquery{
height: 82px;
width: 117px;
position: absolute;
margin-left: 1040px;
margin-top: 114px;
background-color: white;
border-radius: 10px;
border: 1px solid black;
}

#cardbutton{
height: 20px;
width: 50px;
background-color: green;
border-radius: 15px;
margin: auto;
color: white;
padding: 5px;
text-decoration: none;
}

#cardbutton:hover{
background-color: red;
}

#cardgraphic{
height: 82px;
width: 117px;
border-radius: 10px;
}


#pickgraphic{
height: 38px;
width: 54px;
border-radius: 5px;
}

#heading{
height: 50px;
width: 135px;
color: black;
}

#heading2{
height: 50px;
width: 200px;
color: black;
}

#cardrow{
height: 40px;
width: 117px;
display: inline-block;
float: left;
}

#board{
height: 596px;
width: 846px;
postion: absolute;
border: 5px solid black;
}

#overlay{
height: 598px;
width: 848px;
margin-top: -600px;
margin-left:3px;
position: absolute;
}


#box1{
height: 58px;
width: 83px;
border: 1px solid black;
float: left;
display: inline-block;
background-color: #F9E57A;
}


#box2{
height: 58px;
width: 83px;
border: 1px solid black;
float: left;
display: inline-block;
background-color: red;
}

#box3{
height: 58px;
width: 83px;
border: 1px solid black;
float: left;
display: inline-block;
background-color: green;
}

#box4{
height: 58px;
width: 83px;
border: 1px solid black;
float: left;
display: inline-block;
background-color: cyan;
}


/*BLOCKS*/

#bloverlay{
height: 598px;
width: 848px;
margin-top: -600px;
margin-left:5px;
position: absolute;
}

#hudoverlay{
height: 606px;
width: 262px;
position: absolute;
margin-left: 855px;
margin-top: -606px;
}

#block{
height: 38px;
width: 63px;
border: 10px solid #F9E57A;
background-color: grey;
float: left;
display: inline-block;
}

#blocks{
height: 38px;
width: 63px;
border: 10px solid #F9E57A;
background-color: grey;
float: left;
display: inline-block;
}

#blockx{
height: 38px;
width: 63px;
border: 10px solid pink;
background-color: grey;
float: left;
display: inline-block;
}

#blockx:hover{
background-color: pink;
border: 10px solid grey;
}

#blocks:hover{
background-color: pink;
border: 10px solid grey;
}


#block2{
height: 38px;
width: 63px;
border: 10px solid red;
background-color: grey;
float: left;
display: inline-block;
draggable: true;
}


#block3{
height: 38px;
width: 63px;
border: 10px solid green;
background-color: grey;
float: left;
display: inline-block;
draggable: true;
}

#token{
height: 34px;
width: 34px;
border-radius: 100%;
background-color: black;
margin-top: 10px;
margin-left: 24px;
border: 3px solid grey
}

#token:hover {
background-color: grey;
border: 3px solid black;
}

#tokenAB{
height: 34px;
width: 34px;
border-radius: 100%;
background-color: white;
margin-top: 10px;
margin-left: 24px;
border: 3px solid grey
}

#tokenAB:hover {
background-color: grey;
border: 3px solid white;
}

#row{
width: 848px;
height: 60px;
display: inline-block;
float: left;
}

#row2{
width: 848px;
height: 60px;
display: inline-block;
float: left;
margin-top: 60px;
}

#spacer{
height: 60px;
width: 85px;
float: left;
display: inline-block;
}

#target{
height: 57px;
width: 83px;
float: left;
background-color: #F9EDAC;
display: inline-block;
}

#target:hover{
background-color: pink;
}

#htarget{
height: 57px;
width: 83px;
float: left;
background-color: #F9EDAC;
display: inline-block;
margin-left: 1px;
}


#bltarget{
height: 57px;
width: 83px;
float: left;
background-color: #F9EDAC;
display: inline-block;
border: 1px solid black;
}

#bltarget:hover{
background-color: pink;
}

#bltargetr{
height: 57px;
width: 83px;
float: left;
background-color: #F2410E;
display: inline-block;
border: 1px solid black;
}

#bltargetr:hover{
background-color: pink;
}


#bltargetg{
height: 57px;
width: 83px;
float: left;
background-color: #A0DE18;
display: inline-block;
border: 1px solid black;
}

#bltargetg:hover{
background-color: pink;
}

/*WINDOWS*/

#window{
height: 100px;
width: 200px;
background-color: white;
border: 5px solid black;
border-radius: 25px;
margin-top: -130px;
margin-left: 1085px;
position: absolute;
}

#winrow{
height: 30px;
width: 150px;
margin-left: 25px;
margin-top: 10px;
}

#winbutton{
height: 20px;
width: 65px;
border: 5px solid black;
background-color: green;
color: white;
float: left;
}

#winbutton:hover{
background-color: white;
color: green;
}