/* DESCRIPTION
Th css below is designed to use a container which is 90vw wide with a maximum width of 60ch (60 "0" characters in Lora font). The size of each element ought to scale according to the defualt text size of the user's browser/operating system. Scale by changing the font-size of the html tag below.

The only-non-scalable element is border-radius, for risk of over-cropping on excessive zoom.#

The css is straightforward except for the menu; this uses a <main> tag and position: fixed cssfor the main banner, containing the menu as a <details> tag, which removes the "open" attribute when a link is clicked to collapse it. 
<h1> and <h2> padding is necessary because the menu consumes screen space, and a more code-verbose but visually minimal option is to use custom anchors for each menu link, as has been used for the first heading for SEO ("above-the fold" content") purposes.

For lists, the menu list uses list-style-type: none becuase it incorporates the icons in html, which should render in all recent browsers. ::marker is used for custom icons for the remainder of the page, which is unsupported in safari, and should render as an ordinary list.

Fonts are served locally to reduce slowdown, but only the normal (400) font-weight is available, and therefore bold text should not be used.
 */

/* Fonts */
body {font-family: Lora, serif}
h1 {font: 2.3rem Montserrat; sans-serif; font-variant: small-caps;}
h2 {font: 1.5rem Montserrat, sans-serif;}
h2.profile {font: 1.55rem Asap Condensed, sans-serif}
h3 {font: normal 1.5em Cormorant Upright}
h1, h2 {font-weight: 500}
p, li {font-size: 1.1rem}
span {font: 0.9rem Montserrat, sans-serif}
a {color: inherit}
ul.menubar li {font: 1.3rem Montserrat, sans-serif;} 

/* Formatting */
html {font-size: 100%}/*This scales the entire page */
body {text-align: justify; width: 90vw; max-width: 60ch; margin: 0 auto; background-color: #FFF1E0; hyphens: auto}
h1 {text-align: center; border-bottom: 1px solid; padding: 5rem 0 0 0}
h1.first {padding: 0}
h2 {text-align: left; border-bottom: 1px solid; padding: 5rem 0 0 0}
h2.profile {padding: 1rem 0 0 0}
p {white-space: pre-line;}
.largefirstletter3::first-letter {-webkit-initial-letter: 3; initial-letter: 3; margin: 0 0.3rem}
p::first-letter {-webkit-initial-letter: 2; initial-letter: 2; margin: 0 0.2rem}
img {display: block; margin: 0 auto; width: 90vw; max-width: 60ch; border-radius: 20px}
img.profile {width: 10rem; float: left; display: inline-block; margin: 0 1rem -0.2rem 0}
img.teamimg {margin: 6rem auto 0 auto}
.googlemap {max-width: 60ch; width: 90vw; height: 100vh}
span {display: block}
.noborder {border: none}
.nopadding {padding: 0 !important}

/* Menu Formatting */
main {display: block; padding:1.2rem 0; width: 100vw; background: #0013BF url("../images/simologo.png") center top/13rem no-repeat; position: fixed; top: 0; left: 0; max-height: 95vh; overflow-y: scroll; z-index: 1}
details summary {list-style: none;}
details summary::-webkit-details-marker {display: none;}
ul.menubar li {margin: 0.3rem 0 0 0}

/* List Formatting */
ul {text-align: left}
ul.menubar, ul.menubar ul {list-style-type: none; text-align: left}
details {margin: 0 0 0 0.5rem; color: white}
main.menu{background-image: none;}
ul.articlelist li {margin: 0.5rem 0 0 0}
ul.contactlist li {font-size: 1.2rem; margin: 0.5rem 0 0 0}
ul.contactlist a {white-space: nowrap}

/* List Icons - Safari */
ul.serviceslist li {list-style-type: '\002705  '}
ul.articlelist li {list-style-type: '\01F4F0  '}
ul.contactlist li.phone {list-style-type: '\01F4DE  '}
ul.contactlist li.email {list-style-type: '\01F4E7  '}
ul.contactlist li.map {list-style-type: '\01F4CC  '}

/* List Icons - Chrome, Firefox, Edge */
ul li::marker {font-family: 'FontAwesome'}
ul.serviceslist li::marker {content: '\f058' '   '}
ul.articlelist li::marker {content: '\f1ea' '   '}
ul.contactlist li.phone::marker {content: '\f095' '   '}
ul.contactlist li.email::marker {content: '\f0e0' '   '}
ul.contactlist li.map::marker {content: '\f041' '   '}



/* Other Novel Elements */
h2 mark {white-space: nowrap; background-color: transparent; font-size: 70%}
div {font: 0.8rem Tahoma, sans-serif; margin: 1rem 0}
div.anchor {margin: -5rem 0 0 0; visibility: hidden; position: absolute}

/* Font Import */
/* Cormorant Upright latin */
@font-face {
  font-family: 'Cormorant Upright';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/CormorantUpright400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lora latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/Lora400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Montserrat400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Asap Condensed latin */
@font-face {
  font-family: 'Asap Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/AsapCondensed400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Night Mode
h1, h2, h3, p, ul, li {color: white}
body {background-color: black}*/