/*:root { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: calc(0.7em + 0.3vw); box-sizing: border-box; }*/
:root { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; box-sizing: border-box; }
*, ::before, ::after { box-sizing: inherit; }
body { padding: 0 1em; max-width: 75em; margin: 0 auto; }

a { text-decoration: none; }
a:hover { background-color: #C6ECC6; }
a:active { background-color: #A0DF9F; }
h1, h2, h3, h4, h5, a { color: #339832; }
h1 { font-size: 2.4rem; font-weight: normal; }
h2 { font-size: 2.0rem; font-weight: normal; }
h3 { font-size: 1.6rem; font-weight: normal; }
h4 { font-size: 1.2rem; font-weight: normal; }
h5 { font-size: 1.0rem; font-weight: normal; }

/* Header */
.header-frame { border: none; height: 9.4em; width: 100%; position: fixed; top: 0; left: 0; overflow: hidden; background-color: white; z-index: 99;}
header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: 1.7em 1.1em 0 0; }
header img { max-width: 448px; width: 100%; margin-bottom: 1.1em; }
nav a { padding: 0.1em 0.8em; font-size: 1.6em; }

/* Footer */
footer hr { margin-top: 2em; }
.footer-frame { border: none; height: 5em; width: 100%; }
footer { display: flex; justify-content: center; flex-wrap: wrap; font-size: 0.8rem; }
footer span { margin: 0.4em 1.2em; text-align: center; }

/* Scrolling Body */
#scrolling { margin: 11.1em 2.8em 0 2.2em }

/* Home */
#apps img { height: 160px; background-color: white; }  
#apps { display: grid; gap: 3.3em 5.6em; align-items: flex-start;
	grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); grid-template-rows: auto; }

/* Contact */
#contact { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; column-gap: 5.6em; }
#contact img { max-width: 528px; width: 100%; }