/*** 

Thank you to Eggramen for the base layout and stylesheet for the "Simple" layout type. [https://eggramen.neocities.org/code/css_testpages#simple]

***/

@font-face {
    font-family: 'AlteHaas'; /*a name to be used later*/
    src: url('fonts/AlteHaasGroteskRegular.ttf') format("truetype"); /*URL to font*/
}

body {
	font-family: "AlteHaas", "Arial", sans-serif;
	font-size: 14px;
	background-image: linear-gradient(90deg, #58986b 23.33%, #508459 23.33%, #508459 50%, #58986b 50%, #58986b 73.33%, #508459 73.33%, #508459 100%);
  background-size: 150.00px 150.00px;
  text-align: justify;
	background-attachment: fixed;
  background-position:center;

}

h1 {
  text-align: center;
  font-size: 20px;
  letter-spacing:4px;
  }

.about img {
  position:absolute;
  top:3em;
  right:30em;
  width:100px;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
    }

/*A box that doesn't scroll, instead growing in height.*/
.box-noscroll {
  margin: 5% auto 4% auto;
	background-image: linear-gradient(90deg, #ffffff 23.33%, #fafafa 23.33%, #fafafa 50%, #ffffff 50%, #ffffff 73.33%, #fafafa 73.33%, #fafafa 100%);
  background-size: 150.00px 150.00px;
	border: 2px solid #000;
  border-radius:10px;
	width: 40em;
	padding: 3.5em 4em;
}
  
/*Prevent overflow of large images.*/
.box-noscroll img {
  max-width: 100%;
  height: auto;
  }

.footer {
  font-family: "AlteHaas";
  font-size:12px;
  color:black;
  padding-top:3px;
  padding-bottom:3px;
  text-align:center;
  flex: 1 1 calc(100% - 20px);
  }

.footer img {
  padding:8px
    }

/*Mobile compatibility*/
@media (max-width: 820px) {
  .box-noscroll {
    width: 75%;
    }
  .about img {
    position:absolute;
    top:1em;
    right:3em;
    }
  }

/*For narrow screens.*/
@media (max-width: 640px) {
  .box-noscroll {
    width: 75%;
    }
  .about img {
    position:absolute;
    top:1em;
    right:1em;
    }
  }