body {
    text-align: center;
    margin: 0;
    background-image:
    url("https://static.pexels.com/photos/704988/pexels-photo-704988.jpeg");  
}

h1 {
    font-family: Impact, Charcoal, sans-serif;
    font-size: 70px;
    margin: 0.2em;
    color: #109bf2;
  
}

h2 {
    margin: 1em 0 0.25em;
    color: gray;
    font-family: Arial, Helvetica, sans-serif;
}

h2:first-of-type {
    margin-top: 0.5em;
}

table,
tr,
td {
    border: 1px solid #782259;
}

table {
    border-collapse: collapse;
    margin: 0 auto;
}

tr {
    height: 20px;

}

td {
    width: 20px;
    background-color: white;
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=67894'),auto;
}

input[type=number] {
    width: 6em;
}

.transbox {
  width: 100%;
  height: 100%;
  padding: 50px 0px 50px 0px;
  border-radius: 2px;
  background-color:rgba(255, 255, 255, 0.5);
  box-shadow: 5px 5px 10px #e2e2e2;
}

.headerContainer {
  position: absolute;
  left: 25%;
  top: 50%;
  margin-top: -186px;
  width: 50%;
}

#sizePicker {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #1fbde0;
    font-size: 150%;
}

.canvasContainer {
    display: none;
}

#colorPicker {
    border-radius: 5px;
    margin-right: 15px;
}

#restartButton {
    font-size: 115%;
    border-radius: 2px;
    background-color: #ffdfb3;
    color: #da8f26;
    font-weight: bold;
    box-shadow: 0px 1px 1px #888888;
}

#restartButton:hover {
  background-color: #ffca80;
  color: #99641a;
}

#createBtn:hover {
  background-color: rgb(195, 217, 239);
  color: #2d5b9f;
}

.buttons:active {
    transform: translateY(4px);
    box-shadow: 2px #888888;

}

#createBtn {
    border-radius: 2px;
    box-shadow: 0px 1px 1px #888888;
    background-color: rgb(230, 239, 248);
    color: #5384cc;
    font-weight: bold;
    font-size: 70%;
}

#footer {
    position:absolute;
    width:100%;
    top:92%;
    color:gray;
    font-size:85%;
}