html { line-height: 1.45; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 18px !important;}
body { margin: 0; padding: 0;  font-family: "Oswald", sans-serif; font-optical-sizing: auto; background-color: #F9F8F6;}
#header {width: 100%; aspect-ratio: 2048/401; overflow: hidden; background: transparent url(header.JPEG) no-repeat; background-size: 100%; display: flex; justify-content: center; align-items: center;}
#main {padding: 5%;}

main {width: 100%; margin-left: auto; margin-right: auto; max-width: 800px;}
section {margin-bottom: 3em;}

ul.circlepoints {list-style-type: none; margin: 1%; padding: 0 !important;}
ul.circlepoints li {padding: 0 !important;; border-radius: 50%; background-color: #f0f0f0; display: inline-block; aspect-ratio: 1/1; width: 48%; height: auto; margin: 0; font-size: 4vw; overflow: hidden;}
div.circlepoint {display: flex; justify-content: center; align-items: center; height: 100%; text-align: center; color: #fff; text-shadow:  -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000;}

h1, h2 {text-transform: uppercase; text-align: center;}
h1 {color: #ffffff; font-size: 8vw; text-shadow:  -1px -1px 0 #000, 1px -1px 0 #000, -1px  1px 0 #000, 1px  1px 0 #000;}
h2 {font-size: 6vw;}
a {color: #8C5A3C; font-weight: bold;}

.buttons {display: flex; justify-content: center; align-items: center;}
.button {display: inline-block; text-align: center; background-color: #8C5A3C; color: #fff; border-radius: 25px; padding: 2% 5%; margin: 5%; text-decoration: none; font-weight: normal;}

.event {background-color: #094509; padding: 5%; width: 90%; color: #fff; border-radius: 25px; overflow: hidden;}

#footer {background-color: #094509; padding: 2%; width: 96%; color: #fff; text-align: center;}
#ack {width: 80%; margin-left: auto; margin-right: auto; font-size: 80%;}