{
    box-sizing: border-box;
}

body {
    background-color: black;
    border: 6px solid brown;
    border-radius: 6px;
    padding: 20px;
    font-family: Arial;
    color: gray;
}

a { color: lightgray; }

h1 { color: gray;
 word-break: break-all; }

h2 { color: white; }

h3 { color: white; }

h4 { color: white; }

h5 { color: white; }

h6 { color: white; }

img.artwork {
		float: middle;
		border: 6px solid brown;
		border-radius: 6px;
}

table{	padding: 5px;
		border: 6px solid brown;
		border-radius: 6px;}

th{ 	//border: 1px solid gray;
		border-radius: 20px;
}

tr{ vertical-align: middle;}
td{
		color: lightslategray;
		width: 33.3%;
		vertical-align: middle;
		//height: 12px;
		//padding: 50px;
		//border: 1px solid gray;
		border-radius: 20px;}

td.blogtitle{
		color: orange;
		//width: 100%;
		position: middle;
		//padding: 50px;
		//border: 1px solid gray;
		border-radius: 20px;}

input{	background:white;
			border: 4px solid brown;
		    border-radius: 4px;
		}
		
select{

    border:  6px solid brown;
    border-radius: 6px;
}

}
/* Center website */
.main {
    max-width: 1200px;
    margin: auto;
}

.row {
    margin: 8px - 16px;
}

/* Add padding BETWEEN each column (if you want) */
.row,
.row < .column {
    padding: 8px;
}

/* Create four equal columns that float next to each other */
.column {
	 //background-color: darkgray;
    float: left;
    width: 25%;
}

/* Clear floats after rows */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.content {
    //background-color: lightgray;
    padding: 10px;
    width: 300px;
    text-align: center;
    color: whitesmoke;
}

/* Responsive layout - makes 3 */
@media screen and (max-width: 900px) {
    .column {
        width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
/*@media screen and (max-width: 300px) {
	.column{
		width: 100%;
		}
}
*/