@import url('text-style.css');
html, body { margin:0; height:100%; }
header { z-index:1000; }
.layout { width:12in; margin:0 auto; padding:2em 0; }
.layout > *:first-child, .content > *:first-child { margin-top:0; }
.layout > *:last-child, .content > *:last-child { margin-bottom:0; }
.logo { display:block; margin:0; aspect-ratio:125/37; }
.nav-root { display:flex; justify-content:space-evenly; align-items:stretch; list-style-type:none; margin:0; padding:0; }
.nav-root li { display:flex; align-self:stretch; padding:0; margin:0; }
.nav-root a { display:flex; text-decoration:none; text-align:center; justify-content:center; align-items:center; align-self:stretch; width:100%; }
.nav-root ul { position:absolute; left:0; top:100%; display:flex; flex-direction:column; justify-content:space-evenly; align-items:stretch; margin:0; padding:0; list-style-type:none; }

#header-contact a:link, #header a:visited { color:var(--layout-light-color); text-decoration:none; margin-right:0.75em; display:block; }
#header-contact a:hover { text-decoration:underline; }
#header-contact { background:var(--layout-dark-color); color:var(--text-color-light); font-family:'Crimson Pro Medium'; }
#header-contact-layout { display:flex; justify-content:flex-end; align-items:center; height:1.5em; font-size:150%; padding:0 !important; }
#header-main { background:var(--layout-light-color); padding:1em 0; }
#header-main-layout { display:flex; justify-content:space-between; align-items:center; height:7em; padding:0 !important; }
#header-logo { height:6em; }

#header-nav { display:block; margin-left:2em; }
#header-nav-root { font-size:175%; text-transform:uppercase; font-family:'Crimson Pro Medium'; }
#header-nav-root ul { top:-10000px; opacity:0; transition:opacity 0.2s, top 0s 0.2s; background:var(--layout-dark-color); }
#header-nav-root li:hover > ul { top:100%; opacity:1; transition:opacity 0.2s; }
#header-nav li li a { color:var(--layout-light-color); text-align:left; justify-content:flex-start; }
#header-nav li li:hover > a { background-color:var(--layout-ultradark-color); }
#header-nav a { padding:0.25em 0.8em; }
#header-nav li:hover > a { background-color:var(--layout-dark-color); color:var(--layout-light-color); }
#mobile-nav { display:none; }


#intro { background:url('../img/layout/intro.bkg.jpg') center no-repeat; background-size:cover; display:flex; justify-content:center; align-items:center; height:70vh; min-height:5in; }
#intro-layout { text-align:center; }
#intro * { color:var(--layout-ultralight-color); }
#intro h1 { font-size:400%; }
#intro-links { font-family:'Crimson Pro Light'; font-size:150%; letter-spacing:0.2em; }
#intro-links a:link, #intro-links a:visited { text-decoration:none; text-transform:uppercase; display:inline-block; margin:0 1em; }
#intro-links a:hover { text-decoration:underline; }
#intro-layout .button { margin-top:2em; }

#features { background:var(--layout-ultralight-color); }
#features h2 { text-align:center; font-size:200%; }
#features-links { background-color:var(--layout-ultralight-color); display:flex; justify-content:space-around; gap:1em; width:100%; }
a.features-link { display:flex; width:30%; flex-direction:column; background:var(--layout-dark-color); text-decoration:none; color:var(--layout-ultralight-color); font-family:'Crimson Pro'; }
a.features-link:hover { background:var(--layout-ultradark-color); }
a.features-link span { display:flex; justify-content:center; align-items:center; font-size:200%; height:2em; }
a.features-link img { display:block; margin:0; aspect-ratio:685/446; }

#about { background-color:var(--layout-light-color); }
#about-layout { display:flex; justify-content:space-around; align-items:flex-start; gap:2em; }
#about-image { display:block; width:27%; }
#about h1:first-line { font-size:50%; text-transform:uppercase; }

footer { background:var(--layout-dark-color); color:var(--layout-ultralight-color); }
#footer-layout { display:flex; justify-content:space-between; align-items:center; padding:0.5em 0; }
#footer-contact { display:flex; gap:2em; }
footer a:link, footer a:visited { color:var(--layout-ultralight-color); text-decoration:none; }
footer a:hover { text-decoration:underline; }
#footer-logo { height:0.5in; }
#footer-logo-space { display:flex; flex-direction:column; align-items:stretch; }
#footer-logo-space div { display:none; }

#internal-header { background:var(--layout-light-color) center no-repeat; background-size:cover;  }
#internal-header-layout { font-size:200%; }
#internal-header-layout h1 { color:var(--layout-ultralight-color); font-size:200%; text-shadow:0.05em 0.1em 0.1em rgba(0,0,0,0.8); }

@media (max-width:12.5in) {
.layout { width:auto; margin-left:0.25in; margin-right:0.25in }
#intro h1 { font-size:300%; }
}

@media (max-width:11in) {
#header-main-layout { height:5em; }
#header-logo { height:4em; }
#about-image { width:40%; }
}

@media (max-width:10in) {
#header-main { padding-top:0.1in; padding-bottom:0.1in; }
#header-main-layout { height:calc (var(--mobile-header-height) - 0.1in); }
#header-logo { height:0.7in; margin-left:-0.15in; }
#intro h1 { font-size:400%; }
}

@media (max-width:9in) {
#features-links,
#about-layout { flex-direction:column; align-items:center; gap:1em; }
.features-link { width:60% !important; }
#about-content { width:75%; }
#about-content h1 { text-align:center; }
#intro-links { letter-spacing:0; }
#header-main { position:fixed; left:0; right:0; top:0; height:var(--mobile-header-height); padding:0; box-shadow:0 0.1em 0.1em rgba(0,0,0,0.5); }
body { padding-top:var(--mobile-header-height); overflow-x:hidden; }
#header-contact { display:none; }
#header-nav { display:none; }
#mobile-nav { display:block; }

#header-main-layout { width:100%; margin:0; padding:0 0.1in !important; }
#header-logo { margin-left:-0.05in; }
#mobile-nav-buttons { display:flex; gap:0.1in; align-items:center; }
#mobile-nav-buttons a { aspect-ratio:1/1; height:calc(var(--mobile-header-height) - 0.2in); border-radius:5%; font-size:calc(var(--mobile-header-height) - 0.4in); display:flex; justify-content:center; align-items:center; text-decoration:none; }
#mobile-nav-buttons a#mobile-nav-toggle { height:calc(var(--mobile-header-height) - 0.1in); font-size:calc(var(--mobile-header-height) - 0.3in); }
.mobile-nav-active #mobile-nav-toggle,
#mobile-nav-buttons a:hover { color:var(--layout-ultralight-color); background:var(--layout-dark-color); }
#mobile-nav-root { position:fixed; right:-3.5in; width:3.5in; max-width:100%; top:var(--mobile-header-height); bottom:0; display:flex; flex-direction:column; justify-content:stretch; transition:right 0.2s; background:var(--layout-dark-color); }
#mobile-nav-root li { flex:1; }
#mobile-nav-root a { color:var(--layout-ultralight-color); justify-content:flex-start; font-size:200%; border-top:1px rgba(0,0,0,0.5) solid; padding-left:1em; }
#mobile-nav-root li:hover > a { background:var(--layout-ultradark-color); }
#mobile-nav-shroud { display:none; backdrop-filter:blur(0.25em); background-color:rgba(255,255,255,0.25); left:0; right:0; top:0; bottom:0; position:fixed; z-index:999; transition:opacity 0.5s, display 0s; opacity:0; }
.mobile-nav-active #mobile-nav-shroud { display:block; opacity:1; transition:opacity 0.5s, display 0s 0.5s;  }
.mobile-nav-active #mobile-nav-root { right:0; }
}

@media (max-width:7.5in) {
#intro h1 { font-size:300%; }
}

@media (max-width:7in) {
#intro-links a { margin:0 !important; }
#footer-contact,
#footer-layout { flex-direction:column; align-items:stretch; text-align:center; gap:1em; }
#footer-logo { margin:0 auto; height:0.75in; }
}

@media (max-width:6in) {
#intro h1 { font-size:250%; }
#internal-header-layout { padding:1em 0; }
}

@media (max-width:5.5in) {
#intro-links { font-size:120%; }
#header-main { height:var(--micro-header-height); display:flex; align-items:center; }
#header-main-layout { height:calc (var(--micro-header-height) - 0.1in); }
#header-logo { height:calc(var(--micro-header-height) - 0.1in); align-self:center; }
body { padding-top:var(--micro-header-height); }
#mobile-nav-buttons a { height:calc(var(--micro-header-height) - 0.1in) !important; font-size:calc(var(--micro-header-height) - 0.2in) }
#mobile-nav-root { top:var(--micro-header-height); }
}