/*
* World Museums
* Engaged Learning Within the World's Preserved Legacies
* Page Form
* Copyright 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"
        "splash splash"
        "leads leads"
        "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: #000000;
    background-color: #FFF9E6;
}
header, footer, main, div {

    }
#pageHeader {
    grid-area: header;
    padding: .7em;
    padding-bottom: .5em;
    background-color: #FFFFFF;
    background-image: url(../_com/bg/musae_white.png);
    }
#pageFooter {
    grid-area: footer;
    padding: 1em;
    background-color: #FFFFFF;
    background-image: url(../_com/bg/musae_white.png);
    }
#mainContent {
    grid-area: content;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 4em;
    padding-right: 4em;
    background-color: #FFFFFF;
    background-image: url(../_com/bg/musae_white.png);
    }
#mainSplash {
    grid-area: splash;
    padding: 1em;
    background-color: #FFFFFF;
    background-image: url(../_com/bg/musae_white.png);
    }
#mainLeads {
    grid-area: leads;
    padding: 1em;
    background-color: #FFFFFF;
    background-image: url(../_com/bg/musae_white.png);
    }

@media all and (max-width: 575px) {
    body {
        grid-template-areas:
            "header"
            "splash"
            "leads"
            "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: 22px; text-indent: 20px;
}

.gold {
    color: #FFCC00;
}

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

.violetrose {
    color: #BD4C5B;
}

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

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

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: #BD4C5B;
    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: #BD4C5B;
    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;
    background : White;
}

/* LISTS */

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

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

.in1 {
    text-indent: 1rem;
}

.in2 {
    text-indent: 2rem;
}

/* LAYOUT */

.center {
    text-align: center
}

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

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

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

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

/* IMAGES */

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

.imgcent {
    text-align: center;
}

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

}

.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 */

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

.lead-one {
    font-size: 1rem;
    padding:20px;
}

.lead-two {
    font-size: 1rem;
    padding:20px;
}

.lead-three {
    font-size: 1rem;
    padding:20px;
}

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

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

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

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