/*
* Elore
* Legacies of Knowledge for Those Who Live to Learn
* Main Frame
* 2023 - Elore, Inc.
*/

/* Directory
–––––––––––––––––
- Foundation
- Typography
--- Feature Styles
- Links
- Lists
- Layout
- Images
- Buttons
- Forms
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
- Components
*/

/* FOUNDATION */

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);
}

body {
    display: grid;
    grid-template-areas:
        "header header"
        "content content"
        "footer footer";

    grid-template-columns: 20% 1fr;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    height: 100vh;
    margin: 0;
    line-height: 1.6;
    font-weight: 400;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #FAFBE9;
    background-color: #000000;
}
header, footer, main, div {

    }
#pageHeader {
    grid-area: header;

    }
#pageFooter {
    grid-area: footer;
    padding: 1em;
    color: #FFFFFF;
    background-color: #0F0F0F;
    }
#mainContent {
    grid-area: content;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 1.5em;
    padding-right: 1em;
    }

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

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6 {
    display: block;
    margin-top: 0;
    margin-bottom: 1.5rem;
    font-weight: 300;
}
h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: -.1.50rem;
}
h2 {
    font-size: 2rem;
    line-height: 1.25;
    letter-spacing: -.1.25rem;
}
h3 {
    font-size: 1.75rem;
    line-height: 1.3;
    letter-spacing: -.1.25rem;
}
h4 {
    font-size: 1.50rem;
    line-height: 1.35;
    letter-spacing: -.1.15rem;
}

h5 {
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: -.75rem;
}

h6 {
    font-size: 1.10rem;
    line-height: 1.6;
    letter-spacing: -.50rem;
}


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

/* Text Feature Styles */

.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;
}

.violetrose {
    color: #BD4C5B;
}

.strong-violetrose {
    color: #BD4C5B; font-weight: bold;
}

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

.p2rem {
    font-size: 2rem;
}

.p3rem {
    font-size: 3rem;
}

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

.overlay1 {
    margin: 0%;
    position: relative;
}

.over-title {
    position: absolute;
    bottom: 2px;
    left: 18px;
}

.over-slogan {
    position: absolute;
    top: 17px;
    left: 150px;
}

.highlight {
    display: inline;
    padding: .25em 0;
    background: #FFCC00;
    box-shadow: .3em 0 0 #FFCC00, -.3em 0 0 #FFCC00;
    opacity: 0.9;
}

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


/* LINKS */

.navlinks{
    font-family: "Times New Roman", Times, serif;
    color: #AAAAFF;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
}

.navlinks:hover{
    font-family: "Times New Roman", Times, serif;
    color: #FF0000;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
}

.bodylinks{
    font-family: "Times New Roman", Times, serif;
    color: #DDDDFF;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
}

.bodylinks:hover{
    font-family: "Times New Roman", Times, serif;
    color: #FF0000;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
}

.bodylinks2{
    font-family: "Times New Roman", Times, serif;
    color: #DDDDFF;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}

.bodylinks2:hover{
    font-family: "Times New Roman", Times, serif;
    color: #FF0000;
    font-weight: bold;
    font-size: 1.5rem;
    text-decoration: none;
}

/* LISTS */

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

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

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

/* LAYOUT */

.center {
    text-align: center
}

.p_100 {
    padding: 100px 0px;
}

.in1 {
    text-indent: 1rem;
}

.in2 {
    text-indent: 2rem;
}

.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
}

/* IMAGES */

img {
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}

.imgcent {
    text-align: center;
}

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

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

.mainfig {
    text-align: center;
}

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

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

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

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

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

.impace-r {

}

.impace-t {

}

.impace-b {

}

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

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

/* COMPONENTS */

.cont-intro {
    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;
    line-height: 2rem;
    padding-left: 10px;
    padding-right: 10px;
}

.cont-intro-one {
    font-size: 1rem;
    padding:10px;
}

.cont-intro-two {
    font-size: 1rem;
    padding:10px;
}

.cont-dir-row1 {
    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;
}

.cont-dir-row2 {
    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;
    line-height: 2rem;
    padding-left: 10px;
    padding-right: 10px;
}

.cont-dir-row3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 40px;
    margin: 0 auto;
    max-width: 100%;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
}

.cont-dir-row4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 10px;
    margin: 0 auto;
    max-width: 100%;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
}

.cont-feature-one {
    font-size: 1rem;
    padding:10px;
}

.cont-feature-two {
    font-size: 1rem;
    padding:10px;
}

.cont-feature-three {
    font-size: 1rem;
    padding:10px;
}

.cont-bios-one {
    font-size: 1rem;
    line-height: 2rem;
    padding:10px;
}

.cont-bios-two {
    font-size: 1rem;
    line-height: 2rem;
    padding:10px;
}

.cont-bios-three {
    font-size: 1rem;
    line-height: 2rem;
    padding:10px;
}

.cont-resources-one {
    font-size: 1rem;
    line-height: 2rem;
    padding:10px;
}

.cont-resources-two {
    font-size: 1rem;
    line-height: 2rem;
    padding:10px;
}

.cont-resources-three {
    font-size: 1rem;
    line-height: 2rem;
    padding:10px;
}

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

#footer-main {
    border-bottom: 1px solid gray;
    padding: 20px;
}

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

.footer-logo {
    font-size: 1rem;
    padding:20px;
}

.footer-contact {
    font-size: 1rem;
    padding:20px;
}

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

.footer-promo {
    font-size: 1rem;
    padding:20px;
}
.footer_copyright {
    text-align: center;
    font-size: 1rem;
    padding:20px;
}

/* BLOCKQUOTES */

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