:root {
  --green: #4e8028  /* 4.72:1 */;
  --yellow: #eda91d /* 2.04:1 white, 10.29:1 black */;
  --white: #fff;
  --black: #000;
}

* { margin: 0; padding: 0; box-sizing: border-box }

html { min-height: 100% }

body { background: var(--green); background-image: linear-gradient(to top right, var(--green), #a8c66c); background-size: cover; color: var(--black); font-family: helvetica, verdana, arial, sans-serif; font-size: 1em; text-align: center; min-height: 100% }
h1 { font-size: 150% }
h2 { font-size: 130%; font-weight: normal; text-transform: uppercase; margin: 1rem 0 }
p { font-size: 130%; line-height: 130% }

li { list-style-type: none; width: 100% }

a { background: var(--green); color: var(--white); font-size: 120%; font-weight: bold; text-decoration: none; border: 2px solid var(--green); border-radius: 15px; display: block; margin: 0.5rem 0; padding: 1rem; width: 100% }
a:hover { text-decoration: underline }
a:focus { outline: 0; background: var(--black); border: 2px solid var(--black); color: var(--white) }

main { background: var(--white); margin: 5% 5% 0 5%; padding: 2rem }
#generalHeader { text-align: center; padding: 0 0 2rem 0 }

nav { margin: 2rem 0 }

#jobs a { background: var(--yellow); color: var(--black); font-weight: normal; border: 2px solid var(--yellow) }
#jobs a:focus { background: var(--black); border: 2px solid var(--black); color: var(--white) }

#mandatoryData nav { margin: 0.5rem 0 }
#mandatoryData li:first-child::after { content:"|"; color: var(--white) }
#mandatoryData li { display: inline }
#mandatoryData a { display: inline; font-size: 90%; background: none; border: 2px solid transparent; font-weight: normal; border-radius: 0; padding:  0.5rem }
#mandatoryData a:focus { outline: 0; background: var(--black); border: 2px solid var(--black); color: var(--white) }

@media screen and (min-width: 790px) {
	main { max-width: 780px; margin: 5rem auto 0 auto }
}