* {box-sizing: border-box;}


/* Center website */
.main {  max-width: 1000px; margin: auto;   background-color:#5a5a5a;  padding:22px;    }

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

/* Add padding BETWEEN each column */
.row, 
.row > .column-2 { padding: 5px;}

/* Create 4 equal column-4 that floats next to each other */
.column-4 {  float: left;  width: 25%;}

/* Create 3 equal column-3 that floats next to each other */
.column-3 {  float: left;  width: 33.33%;}

/* Create 2 equal column-2 that floats next to each other */
.column-2 {  float: left;  width: 50%;}

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

/* Content */
.content {  background-color: #5a5a5a; padding: 10px; color:#c0c0c0}


/* Responsive layout - makes a two column layout instead of four columns */
@media screen and (max-width: 1000px) {.column-2 {    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: 700px) { .column-2 {    width: 100%;}}


/* Responsive layout - makes a two column layout instead of four columns */
@media screen and (max-width: 1000px) {.column-3 {    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: 700px) { .column-3 {    width: 100%;}}


/*
h1 {  font-size: 50px;  word-break: break-all;}
body {background-color: gray;    padding: 20px; font-family: Arial;}
*/