@import "fonts.css";

h1, h2, h3, h4, h5, h6, .tagline {
  /* color: #3ab75a; */
  color: #4ac77a;
  font-family: rustica, sans-serif;
}

h1 {
}

h1.page-title {
  font-size: 380%;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

p.tagline {
  font-weight: 300;  
  font-size: 268%;
  font-style: italic;
  text-align: center;
  margin-top: 0;
}

picture#main-logo, picture#main-logo > source, picture#main-logo > img, p.tagline, div.image-set {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

figure {
  text-align: center;
  padding: -1em;
  margin: .5em;
}

figcaption {
  font-family: rustica, sans-serif;
  font-size: 120%;
  font-weight: 300;
  color: #eeccff;
  margin-top: .4em;
}

p.blurb {
  font-family: rustica, sans-serif;
  font-size: 150%;
  text-align: center;
  color: #4ac77a;
}

p.blurb strong, p.blurb em {
  color: #4ac77a;
}

.action {
  text-align: center;
}

.action > a {
  display: inline-block;
  font-family: rustica;
  font-size: 140%;
  font-weight: normal;
  border: 1px solid #eeccff;
  color: #4ac77a;
  padding: 1.2em;
  text-decoration: none;
  margin-top: 2em;
}

@media only screen and (min-width: 768px) {
  .upper-left {
    grid-area: ul;
  }

  .lower-left {
    grid-area: ll;
  }

  .right {
    grid-area: main;
  }

  .main-images {
    display: grid;
    grid-template-columns: 33% 67%;
    grid-template-rows: 50% 50%;
    grid-template-areas:
      "ul main"
      "ll main";
      /*
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 4em;
    */
  }
}

.main-images {
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 4em;
}

* {
  background-color: #000040;
  color: #ffffff;
}

body {
  padding: 3em;
}