/*
* Elore
* Legacies of Knowledge for Those Who Live to Learn
* Elore Architecture Archive Editions: Essay
* 1995-2023 - Elore, Inc.
*/

/* Directory
–––––––––––––––––
- Foundation
- Typography
- Text Feature Styles & Formatting
- Elements
- Links
- Lists
- Layout
- Images
- Components
*/

/* FOUNDATION */

body {
    display: grid;
    grid-template-areas:
        "header header"
        "side-n feature"
        "side-n footer";
    grid-template-columns: 26% 1fr;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    height: 100vh;
    margin: 0;
    color: white;
    background-image: url(../../../_com/bg/gothic_stone.jpg);
    }
header, footer, article, nav, div {
    padding: 1.2em;
    background: black;
    }
#pageheader {
    grid-area: header;
    margin-left: 10px;
    margin-right: 15px;
    }
#pagefooter {
    grid-area: footer;
    margin-left: 10px;
    margin-right: 15px;
    }
#maincontent {
    grid-area: feature;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: white;
    margin-top: 20px;
    margin-right: 15px;
    margin-left: 10px;
    padding-left:2rem;
    padding-right: 2rem;
    background: black;
    }
#sidenav {
    grid-area: side-n;
    font-size: 1.2rem;
    line-height: 2rem;
    color: white;
    margin-top: 20px;
    margin-left: 10px;
    padding:1.5rem;
    }
#sidemain {
    grid-area: side-m;
    font-size: 1.2rem;
    line-height: 2rem;
    color: white;
    margin-left: 10px;
    padding:1.5rem;
    }

@media all and (max-width: 575px) {
    body {
        grid-template-areas:
            "header"
            "feature"
            "side-n"
            "footer";
        grid-template-columns: 1fr;
 }
}

/* TYPOGRAPHY */

html {
    --typescale-8pt: clamp(0.51rem, -0.02vw + 0.52rem, 0.5rem);
    --typescale-12pt: clamp(0.64rem, 0.05vw + 0.63rem, 0.67rem);
    --typescale-14pt: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
    --typescale-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
    --typescale-20pt: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
    --typescale-26pt: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
    --typescale-30pt: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
    --typescale-38pt: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
    --typescale-50pt: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
    --typescale-60pt: clamp(3.81rem, 5.18vw + 2.52rem, 6.66rem);
    --typescale-76pt: clamp(4.77rem, 7.48vw + 2.9rem, 8.88rem);
}

h1, h2, h3, h4, h5, h6 {
    display: block;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 300;
}
h1 {
    font-size: 2.5rem;
    line-height: 1.2;
}
h2 {
    font-size: 2rem;
    line-height: 1.3;
}
h3 {
    font-size: 1.7rem;
    line-height: 1.3;
}
h4 {
    font-size: 1.5rem;
    line-height: 1.3;
}

h5 {
    font-size: 1.2rem;
    line-height: 1.5;
}

h6 {
    font-size: 1.1rem;
    line-height: 1.6;
}

q {
    color: #FFF7DF;
    font-style: italic;
}

/* Text Feature Styles & Formatting */

.p1 {
    font-size: 1rem;
}

.p1b {
    font-size: 1rem;
    font-weight: bold;
}

.p1-5rem {
    font-size: 1.5rem;
}

.p2rem {
    font-size: 2rem;
}

.p3rem {
    font-size: 3rem;
}

.p_100 {
    padding: 100px 0px;
}

.in1 {
    text-indent: 1rem;
}

.in2 {
    text-indent: 2rem;
}

.first-letter {
    font-size: 35px;
    line-height: 36px;
}

.boldcap {
    font-size: 1.5rem;
    text-indent: 20px;
}

.black {
    color: #000000;
}

.strong-black {
    color: #000000; font-weight: bold;
}

.gold {
    color: #FFCC00;
}

.strong-gold {
    color: #FFCC00; font-weight: bold;
}

.aqua {
    color: #6EB9FF;
}

.strong-aqua {
    color: #6EB9FF; font-weight: bold;
}

.olive {
    color: #C9CC92;
}

.strong-olive {
    color: #C9CC92; font-weight: bold;
}


/* ELEMENTS */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1rem 0;
    padding: 0;
}


/* LINKS */

.navlinks {
    color: #CEC764;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
}

.navlinks:hover {
    color: #FDF6DE;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
}

.navlinks:active {
    color: #CF4C32;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
}


/* LISTS */

ul {
    list-style-image: url(http://elore.com/_com/diamonds/orange.gif);
}

li {
    margin-top: 0;
    margin-bottom: 2rem;
    line-height: 2;
}

.nobull {
    list-style-type: none;
}


/* LAYOUT */

.center {
    text-align: center
}

.headspace-20 {
    padding-top: 20px
}

.headspace-40 {
    padding-top: 40px
}

.headspace-60 {
    padding-top: 60px
}

.headspace-80 {
    padding-top: 80px
}

.basespace-20 {
    padding-bottom: 20px
}

.basespace-40 {
    padding-bottom: 40px
}

.basespace-60 {
    padding-bottom: 60px
}

.basespace-80 {
    padding-bottom: 80px
}

.leftspace-20 {
    padding-left: 20px
}

.leftspace-40 {
    padding-left: 40px
}

.leftspace-60 {
    padding-left: 60px
}

.rightspace-20 {
    padding-right: 20px
}

.rightspace-40 {
    padding-right: 40px
}

.rightspace-60 {
    padding-right: 60px
}

.full-width {
    width: 100%
}


/* IMAGES */

img {
    max-width: 100%;
    height: auto;
}

.imgcent {
    text-align: center;
}

.impace-l {
    float: right;
    padding: 1rem;
    margin: .5rem;
}

figure {
    position: relative;
    padding: 5px;
    margin: auto;
}

figcaption {
    text-align: center;
    font-size: 1rem;
    color: #C9CC92;
}

.mainfig {
    text-align: center;
}

.paraemblem {
    margin-right: 1rem;
    padding-top: 10px;
    float: left;
}

.imround-3 {
    border-radius: 3%;
}

.imround-5 {
    border-radius: 5%;
}

.imround-10 {
    border-radius: 10%;
}

.imround-50 {
    border-radius: 50%;
}

.img-ds3 {
    filter: drop-shadow(3px 3px 3px #000);
}

.img-ds6 {
    filter: drop-shadow(6px 6px 6px #000);
}


/* COMPONENTS */

.topnav {
    font-size: 1rem;
    text-align: center;
    padding: .5rem;
    position: relative;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 1rem;
    margin-left: 0px;
    border-radius: 1rem;
    background: url(../../../_com/bg/gothic_stone.jpg);
}

.basenav {
    font-size: 1rem;
    text-align: center;
    padding: .5rem;
    position: relative;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 1rem;
    margin-left: 0px;
    border-radius: 1rem;
    background: url(../../../_com/bg/gothic_stone.jpg);
}

.local-nav-frame {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
    margin: 0 auto;
    max-width: 100%;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 1rem;

}

.topic-frame {
    font-size: 1.5rem;
    padding:1rem;
    border-radius: 1rem;
}

.local-navigation {
    color: #EAE9B8;
    font-size: 1.5rem;
    line-height: 2rem;
    padding-left: 2.5rem;
    padding-right: 1.5rem;
    border-radius: 1rem;
}

.body-excerpt {
    font-size: 1.2rem;
    line-height: 2rem;
    background-color: #2e2e2e;
    background: url(../../../_com/bg/gothic_stone.jpg);
}

.footer-heading {
    text-align: center;
    background: black;
}

#footer-main {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    background: black;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 5px;
    max-width: 100%;
}

.footer-logo {
    font-size: 1.5rem;
    line-height: 2rem;
    padding-right:10px;
}

.footer-verse {
    font-size: 1rem;
    line-height: 1.5rem;
}

.footer-contact {
    font-size: 1.3rem;
    line-height: 1.5rem;
    padding-left:20px;
    padding-right: 20px;
}

.footer-credits {
    font-size: 1rem;
    padding:10px;
}

.lead-row {
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.footer-promo {
    font-size: 1.5rem;
    line-height: 2rem;
    padding-left:10px;
}

.footer_copyright {
    text-align: center;
    font-size: 1rem;
    margin-top: 10px;
    padding:20px;
    background: black;
}


/* BLOCKQUOTES */

.quotedark1 {
    font-size: 1.5rem;
    line-height: 1.2;
    color: #F0F9C2;
    padding: 40px;
    display: inline-block;
    box-sizing: border-box;
}

.quotedark2 {
    font-size: 1.2rem;
    line-height: 1.2;
    color: #F0F9C2;
    padding: 10px;
    display: inline-block;
    box-sizing: border-box;
}

.insetquote-hdark {
    font-size: 1.5rem;
    line-height: 2rem;
    color: #F2F2C6;
    margin-left: .5rem;
    margin-right: .5rem;
    margin-bottom: .5rem;
    padding: 20px;
    max-width: 40%;
    float: right;
    border-radius: 1rem;
    filter: drop-shadow(3px 3px 4px #000);
    background-image: url(../../../_com/bg/gothic_stone.jpg);
}