h1, h2 {
  font-family: "Bad Script", serif;
}

h1 {
	font-size: 4em;
  margin: 0.1em auto;
  text-wrap: none;
}

h2 {
  font-size: 2.5em;
  margin: 0em;
}

p {
  font-size: 1.5em;
}

p, details {
  font-family: "Sriracha";
}

details {
  font-size: 1.2em;
}

a {
  color: white;
}

body {
  background: rgb(156,193,206);
 	background: linear-gradient(130deg, rgba(156,193,206,1) 0%, rgba(202,230,240,1) 100%);
  text-align: center;
  margin: 0px;
  padding-top: 120px;
  padding-bottom: 100px;
}

img {
  display: block;
  margin: 0px auto;
  border: 5px solid;
  border-radius: 20px;
}

footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  z-index: 100;
}

header {
  max-height: 400px;
}

.title {
  background: rgb(242,246,254);
  background: linear-gradient(0deg, rgba(242,246,254,1) 0%, rgba(202,208,220,1) 100%);
  padding: 0.5em;
  border: 5px solid #9ca1ab;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 100;
  justify-content: center;
}

.content {
  margin-top: 20px;
}

.shadow {
  border-radius: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.normal {
  font-size: 1.1em;
}

.section-header {
  background: rgb(109,179,204);
  background: linear-gradient(0deg, rgba(109,179,204,1) 0%, rgba(152,213,235,1) 100%);
  border: 5px solid #3D90AC;
}

.section-text {
  background: rgb(109,179,204);
  background: linear-gradient(0deg, rgba(109,179,204,1) 0%, rgba(152,213,235,1) 100%);
  border: 5px solid #489bb4;
}

.footer-header {
  background: rgb(229,229,246);
  background: linear-gradient(0deg, rgba(229,229,246,1) 0%, rgba(187,186,228,1) 100%);
  border: 5px solid #9b97b8;
}

.footer-text {
  background: rgb(229,229,246);
  background: linear-gradient(0deg, rgba(229,229,246,1) 0%, rgba(187,186,228,1) 100%);
  border: 5px solid #9b97b8;
}

.links {
  background: rgb(106,156,241);
  background: linear-gradient(180deg, rgba(106,156,241,1) 0%, rgba(40,92,181,1) 100%);
  border: 5px solid #224888;
  color: white;
  text-align: center;
  padding: 5px 0px;
}

.section-header, .footer-header {
  padding: 0.2px;
  margin: 0.01em auto;
  width: 200px;
  margin: 10px auto;
}

.section-text, .footer-text {
  padding: 5px;
  margin: 1em auto;
  width: 80%;
  font-size: 1.25em;
}

.row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.row img {
  width: 25%;
  margin: 5px;
  background-color: white;
  justify-content: space-around;
}

.links {
  display: flex;
  justify-content: space-around;
  padding: 0px;
  font-size: 0.75em;
}

.links a {
  text-decoration: underline wavy;
}

.title h1, .section-header h2 {
  text-decoration: underline;
}

.section-text img {
  width: 300px;
  background: white;
}

.footer-text img {
  width: 300px;
  margin: 10px;
}

@media (min-width: 1200px) {
  .section-text img {
    float: left;
    margin-right: 15px;
    width: 285px;
  }

  .footer-text img {
    float: right;
    margin-right: 15px;
    width: 285px;
  }
}

@media (min-width: 700px) {
  .section-text img {
    float: left;
    margin-right: 15px;
    width: 240px;
  }

  .footer-text img {
    float: right;
    margin-right: 15px;
    width: 240px;
  }
}

@media (max-width: 699px) {
  .section-text img, .footer-text img {
    float: none;
    width: 90%;
    margin: 10px auto;
  }
}