body {
  font-family: 'Open Sans';
  background-color: #000000;
  color: #003267;
  padding: 0 20%;
}

h1 {
  text-align: center;
}

#top {
  background-color: #003267;
  color: #FFFFFF;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 5px;
}

#bottom {
  background-color: #FFFFFF;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 5px;
}

a {
  text-decoration: none;
  color: #0480CD;
}

img {
  width:80%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: solid;
  border-width: 1;
  alt: "image";
}

/* Style the tab content */
.content {
  padding: 5px 15px;
  border-radius: 10px;
  background-color: #FFFFFF;
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid;
}

.tbl th {
  padding: 2px;
  border: 1px solid;
  border-color: #000000;
  background: #0380CD;
  color: #FFFFFF;
}

.tbl td {
  padding: 2px;
  border: 1px solid;
}

/*  Define the background color for all the ODD background rows  */
.tbl tr:nth-child(odd) {
  background: #b8d1f3;
}

@media screen and (max-width: 1300px) {
  body {
    padding: 0 15%;
  }
}

@media screen and (max-width: 1224px) {
  body {
    padding: 0 10%;
  }
}

@media screen and (max-width: 1100px) {
  body {
    padding: 0 5%;
  }
}

/* iPad Pro */
@media screen and (max-width: 1024px) {
  body {
    padding: 0;
  }
}

/* iPad */
@media screen and (max-width: 768px) {
  body {
    font-size: 80%;
  }
}

@media screen and (max-width: 680px) {
  body {
    font-size: 70%;
  }
}

@media screen and (max-width: 610px) {
  body {
    font-size: 60%;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 50%;
  }
}

/* @media screen and (max-width: 320px) {} */
@media screen and (max-width: 350px) {
  body {
    font-size: 40%;
  }
}