/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/* What follows is the result of much research on cross-browser styling. Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team. */
/* ========================================================================== Base styles: opinionated defaults ========================================================================== */
html { color: #222; font-size: 1em; line-height: 1.4; }

/* Remove text-shadow in selection highlight: https://twitter.com/miketaylr/status/12228805301 Vendor-prefixed and regular ::selection selectors cannot be combined: https://stackoverflow.com/a/16982510/7133471 Customize the background color to match your design. */
::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

/* A better looking default horizontal rule */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/* Remove the gap between audio, canvas, iframes, images, videos and the bottom of their containers: https://github.com/h5bp/html5-boilerplate/issues/440 */
audio, canvas, iframe, img, svg, video { vertical-align: middle; }

/* Remove default fieldset styles. */
fieldset { border: 0; margin: 0; padding: 0; }

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

/* ========================================================================== Author's custom styles ========================================================================== */
/* ========================================================================== Helper classes ========================================================================== */
/* Hide visually and from screen readers */
.hidden, [hidden] { display: none !important; }

/* Hide only visually, but have it available for screen readers: https://snook.ca/archives/html_and_css/hiding-content-for-accessibility 1. For long content, line feeds are not interpreted as spaces and small width causes content to wrap 1 word per line: https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */
.sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; /* 1 */ }

/* Extends the .sr-only class to allow the element to be focusable when navigated to via the keyboard: https://www.drupal.org/node/897638 */
.sr-only.focusable:active, .sr-only.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; white-space: inherit; width: auto; }

/* Hide visually and from screen readers, but maintain layout */
.invisible { visibility: hidden; }

/* Clearfix: contain floats For modern browsers 1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class. 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements. */
.clearfix::before, .clearfix::after { content: " "; display: table; }

.clearfix::after { clear: both; }

html { box-sizing: border-box; }

*, *:before, *:after { box-sizing: inherit; }

.wrapper { display: flex; flex-direction: column; min-height: 100vh; }

ul { padding: 0; flex-shrink: 1; flex: .5; align-items: center; display: flex; list-style: none; justify-content: flex-start; flex-direction: row-reverse; margin-right: 10px; }

ul a { background-color: #c5afa4; border: 2px solid #dbf4a7; border-radius: 0.5em; padding: 0.5em; margin: 5px; text-decoration: none; text-transform: uppercase; font-weight: 400; color: #222; outline: 0; }

ul a:hover { background-color: rgba(219, 244, 167, 0.8); }

nav { position: sticky; top: 0; z-index: 1; }

@font-face { nav { font-family: "Annonymous Pro"; src: url("/assets/Anonymous Pro.ttf"); } }

.top-nav { width: 100%; opacity: .99; display: flex; justify-content: flex-start; height: 5em; background-color: #6b4e71; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.top-nav ul { display: none; }

.top-nav button { background-color: #6b4e71; border: none; padding-left: 1em; }

.menu { padding-left: 0; margin: 0; display: flex; flex-direction: column; align-items: center; padding-top: 0.5em; padding-bottom: 0.5em; background-color: #5d4462; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.menu li { padding-top: 1em; padding-bottom: 1em; }

.logo { flex-shrink: 0; box-sizing: border-box; width: auto; height: 100%; padding: 0.5em; text-decoration: none; text-transform: uppercase; font-weight: 400; color: #000; }

header { width: 100%; padding: 1em; text-align: center; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

header * { margin: 0; }

main { width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; }

h2 { text-align: center; width: 100%; }

p { text-align: center; width: 100%; box-sizing: border-box; padding-left: 1em; padding-right: 1em; }

.features { opacity: .99; display: flex; width: 100%; flex-wrap: wrap; justify-content: space-around; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.feature { display: flex; flex-direction: column; width: 100%; align-items: center; text-align: center; border-top: 3px solid #53687e; margin-bottom: 5px; padding-top: 4px; }

.feature h3 { margin: 0; }

.main-feature { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-around; width: 100%; }

.main-feature img { width: 100%; max-width: 20em; height: auto; }

.main-feature .image { display: flex; justify-content: center; align-items: center; }

.contact { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-bottom: 1em; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.contact button { background-color: #53687e; border: 2px solid #dbf4a7; border-radius: 0.5em; padding: 0.5em; margin: 5px; text-decoration: none; text-transform: uppercase; font-weight: 400; color: #fff; outline: 0; }

.contact button:hover { background-color: rgba(58, 68, 84, 0.8); }

.contact form { background-color: #53687e; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) inset, 0 6px 20px 0 rgba(0, 0, 0, 0.19) inset; border-radius: 8px; width: fit-content; padding: 1em; display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 12em; }

.contact form input, .contact form textarea { min-height: 2em; margin: 0.2em; border-radius: 5px; }

.small { width: auto; height: 5em; }

footer { width: 100%; margin-top: auto; background-color: rgba(107, 78, 113, 0.8); padding: 1em; }

footer * { margin: 0; }

footer ul { padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }

footer .copyright { color: #999; font-size: 0.9em; }

/* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */
@media only screen and (min-width: 30em) { nav button { display: none !important; } nav .top-nav { justify-content: space-between; } nav .top-nav ul { display: flex; } nav .menu { display: none !important; } .main-feature { flex-direction: row; } }

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ }

@media only screen and (min-width: 50em) { .main-feature { justify-content: space-around; } .main-feature .text { display: flex; flex-direction: column; width: 50%; } .feature { width: 33.33%; padding-top: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) inset, 0 6px 20px 0 rgba(0, 0, 0, 0.19) inset; margin: 0; } .features { justify-content: center; } }

/* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: https://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */
@media print { *, *::before, *::after { background: #fff !important; color: #000 !important; /* Black prints faster */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; } abbr[title]::after { content: " (" attr(title) ")"; } /* Don't show links that are fragment identifiers, or use the `javascript:` pseudo protocol */ a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } pre { white-space: pre-wrap !important; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* Printing Tables: https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }

/*# sourceMappingURL=styles.css.map */