* {
  box-sizing: border-box;
}

body {
	margin:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size:100%;
    color: #000000;
    background-color: #ADD8E6;
    text-align: justify;
}

h1 {
    color: #000000;
    text-align: center;
	font-size: 48px;
}

h2 {
    color: #00008B;
    text-align: left;
}

p {
    font-size: 18px;
}

a {
    font-weight: bold;
}

a:link {
color: #483D8B;
}

a:visited {
color: #800080;
}

a:hover {
color: #FF1493;
}

a:active {
color: #B22222;
}

ul {
    list-style-type: square;
    margin: auto;
}

.mainbody {
    width:80%;
    margin:auto;
    padding-left:20px;
	padding-right:20px;
	padding-top:0px;
	padding-bottom:20px;
    background-color: #FFFFFF;
}

.header {
  background-image: url("change.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
  width:80%;
  height:400px;
  margin-top:0px;
  padding-top:0px;
  border-top:0px;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
}

.header p {
  font-size:150%;
  font-weight:900;
}

.header h1 {
	font-size:300%;
	font-weight:900;
}

.header a {
  -webkit-text-stroke-width: 0px;
	font-size:180%;
	border: hidden;
    border-radius: 15px;
    background-color: #8B0000;
	color:#f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}

.navbar {
    margin-left:auto;
	margin-right:auto;
    text-align:center;
    font-size:150%;
    padding:20px;
    overflow: hidden;
    background-color: #8B0000;
}

.navbar a {
	font-variant-caps:small-caps;
	font-size:20pt;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
}

.column {
  float: left;
  width: 50%;
  padding: 15px;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width:600px) {
  .column {
    width: 100%;
}