body {
    background: linear-gradient(90deg,rgb(4, 4, 41), black, rgb(4, 4, 41));
}

h1, h2, h4 {
    color: rgb(52, 197, 202);
    margin: 0;
}

h2, h4 {
    font-family: Tahoma;
	padding-bottom: 18px;
}
.headboard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(225deg, rgb(23, 23, 75), rgb(83, 162, 226), rgb(13, 13, 51), rgb(0, 128, 122), rgb(37, 15, 80));
    border-radius: 60px;
	margin: 0% 10% 0% 10%;
}

/* This container incluces our table and our canvas. */
.center-container {
    /* This property sets the width of our container. */
    width: 608px;
    /* This property centers our container. */
    margin: 0 auto;
    /* 50px down from the top. */
    margin-top: 50px;
}

table {
    /* This property collapses table border into 1 border. */
    border-collapse: collapse;
    /* This hides outer borders on table. */
    border-style: hidden;
}

td {
    /* This property changes the cursor to the index finger hand when
    we hover over td elements. */
    cursor: pointer;
    /* This property sets our table border style. */
    border: 4px solid rgba(3, 252, 177, 0.8);
    /* This property removes default padding. */
    padding: 0px;
    width: 200px;
    height: 200px;
    filter: contrast(3);
}

canvas {
    /* This propery sets the position of our canvas to the top left
    corner of our container. */
    position: absolute;
    /* This property places our canvas over the top of our table. */
    z-index: 10;
    /* This property makes our canvas invisible. */
    pointer-events: none;
}