html {
    font-family: Verdana, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: normal;
}

body {
    max-width:1300px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Segoe UI", Verdana, sans-serif;
  font-weight: 400;
  line-height: 1;
  margin: 20px 0;
  color: rgb(122, 139, 173)
}


h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-weight: inherit;}
h1 {font-size: 36px}
h2 {font-size: 30px}
h3 {font-size: 24px}
h4 {font-size: 20px}
h5 {font-size: 18px}
h6 {font-size: 16px}

hr {
    height: 0;
    border: 0;
    border-top: 1px solid #8d8d8d;
    margin: 20px 0;
}

.row {
    display: flex;
    height: 400px;
}

.left-column {
    flex: 50%;
    background-color: rgb(228, 228, 228);
    padding: 10px;
}

.right-column {
    flex: 50%;
    background-color: rgb(157, 179, 223);
    padding: 10px;
}

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

footer {
    text-align: center;
}

header {
    text-align: center;
}



/* Responsive layout - when the screen is less than 600px wide,
 make the two columns stack on top of each other instead of next 
 to each other */
@media screen and (max-width: 600px) {
    .left-column {
        width: 100%;
    }

    .right-column {
        width: 100%;
    }
}