/* :root {
    --calc: #; */

* {
    box-sizing: border-box;
    word-break: keep-all;
}

html {
    font-size: 75%;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body {
    color: #003;
    font-family: sans-serif;
    margin: 0;

    /* font-size: 1.2rem */
}

img {
    display: block;
    width: 100%;
    max-width: 600px;
    object-fit: cover;
    margin: 0 auto;
}

figure {
    margin: 0 auto;
}

figcaption {
    font-size: .8rem;
    width: 70%;
    text-align: center;
    margin: 7px auto;
}

table {
    margin: 0 auto;
}

label {
    display: block;
    cursor: pointer;
}

h2 {
    background-color: #eef;
    border-bottom: 2px solid #009;
    padding-top: 4px;
    padding-left: 10px;
    padding-bottom: 3px;
}

blockquote {
    /* quotes: "\201C" "\201D" "\2018" "\2019" */
    grid-column: 1 / -1;
    background-color: #ffc;
    font-size: 1.2rem;
    font-family: serif;
    text-align: center;
    padding: 1px 10px;
    box-shadow: 2px 1px 4px #660;
}

blockquote:before {
    content: "❝";
    font-size: 2.4rem;
    float: left;
    align-self: flex-start;
}

blockquote p {
    padding: 0 10px;
}

details {
    font-size: 1.4rem;
    border-top: 5px solid;
    border-bottom: 5px solid;
}

details span {
    display: grid;
    grid-gap: 7px;
    font-size: 1.1rem;
    white-space: nowrap;
    padding: 0 10px;
    margin: 0;
}

summary {
    cursor: pointer;
    padding: 10px 0;
}

summary::before {
    background-color: #fee;
    font-size: .6rem;
    vertical-align: middle;
    padding: 3px 8px;
    margin: 0 15px;
}

header,
footer {
    max-width: 1000px;
    background: #eef;
    background-image: url(../components/menu000/images/watbkgnd.gif);
    background-size: auto;
    background-repeat: repeat;
    background-position: center center;
    margin: 0 auto;
}

/* ========== FOOTER ========== */

footer {
    min-width: 370px;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 20px;
}

footer p {
    padding: 7px;
    margin: 0;
}

.flex {
    display: flex;
    width: 100%;
    max-width: 800px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 auto;
}

.flex a {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    padding: 10px 7px;
    margin: 5;
}

.flex a:hover,
.flex a:focus {
    color: #0cc;
}

.soc::before {
    content: "follow me";
    padding: 7px;
}

.soc::after {
    content: "on twitter";
    padding: 7px;
}

.tw {
    height: 30px;
    width: 30px;
}

.copyright {
    width: 150px;
    text-align: right;
}

.duck {
    font-size: 14px;
    color: #999;
    background-color: #ddd;
    border-radius: 4px;
    border: 1px solid #666;
    margin-left: 5px;
}

.duck:hover,
.duck:focus {
    border-color: #099;
}

/* =========== HEADER =========== */

.breadcrumb {
    display: flex;
    max-width: 700px;
    color: #003;
    font-size: 10px;
    list-style: none;
    padding: 6px 0 4px;
    margin: 0 auto;
}

.breadcrumb a {
    padding: 6px 8px 23px;
}

.breadcrumb li {
    padding-left: 0px;
}

.breadcrumb li:before {
    content: "  ⟩⟩";
    color: #f0f;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    color: #0cc;
}

.breadcrumb li:last-child a:hover {
    color: #003;
}

/* ====== VERT NAV ======= */

#toc {
    font-size: 1.25rem;
    position: fixed;
    right: -120px;
    width: 150px;
    transition: right 700ms;
    top: 15vh;
    z-index: 2;
    background: #eeed;
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    border-radius: 1rem 0 0 1rem;
}

#toc:hover,
#toc:focus {
    right: 0;
}

#toc a {
    background-image: url(null);
}

.toc_cap {
    padding: 0 11px;
    display: inline-block;
}

.redge {
    display: flex;
    background: #eeed;
    font-size: 1.2rem;
    width: 30px;
    height: 4rem;
    position: fixed;
    top: 82vh;
    right: 0;
    align-items: center;
    z-index: 1;
    padding: 0 5px;
    border-radius: 1rem 0 0 1rem;
    transition: padding   200ms;
}

.redge:hover {
    padding-bottom: 2rem;
}

/* ======== MAIN STYLES ========= */

.main-content {
    position: relative;
    min-width: 370px;
    max-width: 702px;
    line-height: 1.8;
    padding: 20px 10px;
    margin: 0 auto;
}

.main-content a {
    background-image: linear-gradient(
        transparent 0%, 
        transparent 45%, 
            #0f06 85%,
            #0f06 100%);
    text-decoration: none;
    padding: 4px 0;
    text-shadow: 0px 1px 1px #0033;
    margin: 0;
}

.main-content a:visited {
    color: #606;
}

.main-content a:hover,
.main-content a:focus {
    background-image: linear-gradient(
        transparent 0%, 
        transparent 45%, 
            #0ff6 85%,
            #0ff6 95%,
            #0f06 100%);
    background-size: 100% 200%;
    background-position: left bottom;
}

.hot {
    display: flex;
    background: #fef;
    font-size: 1.4rem;
    letter-spacing: 2px;
    white-space: nowrap;
    margin-bottom: 15px;
    border: 5px solid #909;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.hot p {
    color: #c0c;
    font-weight: 700;
    font-style: italic;
    padding: 4px 15px;
    margin: 0;
}

.prereq {
    background-color: #efe;
    text-align: center;
    border-color: #009;
}

.prereq span {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto auto auto;
    grid-auto-flow: column;
}

.prereq summary::before {
    content: "learn more";
}

.prereq a {
    background-image: url(null);
}

.opener-alert {
    background-color: #fee;
    font-size: 1.1rem;
}

[target="_blank"]:not(.url):after {
    content: " ➹";
}

#tab-wrapper {
    margin: 0 auto;
}

/* ========== THINKING ========= */

.closer {
    background: #efe;
    box-shadow: 2px 1px 4px #060;
}

.sci {
    background-color: #ffe;
    border-color: #009;
    margin-bottom: 30px;
}

.sci summary::before {
    content: "learn more";
}

.stress {
    background: #eef;
    box-shadow: 2px 1px 4px #006;
    margin: 30px 0;
    padding: 10px;
}

/* =========== DEFUND ========== */

.faxnos {
    background: linear-gradient(
        160deg, 
        rgb(255, 255, 255) 0%, 
        rgba(0, 0, 0, 0.42) 100%);
    border-color: #111;
}

.faxnos span {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-auto-rows: auto;
}

.faxnos summary:before {
    content: "see all members";
}

.faxnos a {
    background-image: url(null);
}

.credit p {
    padding: 0 10px;
}

.credit {
    display: flex;
    min-width: 390px;
    align-items: center;
}

.spear {
    background-color: #fee;
    padding: 1px 20px;
    margin: 0 40px;
    box-shadow: 2px 1px 4px #303;
}

/* =========== PILIARS ========== */

.bar {
    background-color: #ccf;
    padding-top: 3px;
    padding-left: 8px;
    padding-bottom: 3px;
    margin: 0 0;
}

.table5 {
    display: grid;
    grid-template-columns: 18px repeat(5, minmax(40px, 1fr));
    grid-gap: 4px;
    margin: 10px 0;
}

.table5 a {
    color: #421;
    background-image: url(null);
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 9px 5px 6px;
    margin: 3px;
}

.table5 h6 {
    background-color: #ff9;
    font-size: .9rem;
    padding: 7px 5px;
    margin: 0 3px;
}

.table5 a,
.table5 h6 {
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-shadow: 1px 1px 1px #999;
}

.table5 a:hover,
.table5 a:focus {
    background: #9ff;
}

.top-bottom {
    grid-row: span 7;
    width: 18px;
    height: 275px;
    background-repeat: no-repeat;
    background-image: url(../images/t-b.JPG);
    background-position: center center;
    background-size: contain;
}

.flt {
    background-color: #ec5b;
}

.lt {
    background-color: #e44b;
}

.ct {
    background-color: #a7bb;
}

.rt {
    background-color: #5b6b;
}

.frt {
    background-color: #5bcb;
}

.flb {
    background-color: #c83b;
}

.lb {
    background-color: #c45b;
}

.cb {
    background-color: #86ab;
}

.rb {
    background-color: #090b;
}

.frb {
    background-color: #29cb;
}

/* ============ NEWS ========== */

.search input,
.search button {
    height: 28px;
    padding: 0 6px;
    border-radius: 5px;
}

.search p {
    font-size: .7rem;
    margin: 0;
}

.search img {
    height: 30px;
    margin: 0 0px;
    width: 30px;
}

.search form {
    display: flex;
    justify-content: center;
}

/* -- for twitter screen grab -- */

.hide {
    /* display: none */
}

/* ========== MODAL ========== */

.modal {
    color: #003;
    background-color: #cfc;
    z-index: 12;
    overflow: auto;
    padding: 20px;
    border-radius: 25px;
    border: 5px solid #000099;
}

.modal_up {
    display: none;
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 30px;
    max-width: 700px;
}

.modal_dn {
    display: none;
    position: fixed;
    min-width: 320px;
    max-width: 600px;
    left: 5%;
    right: 5%;
    bottom: 30px;
    margin-right: auto;
}

.modal-btn {
    color: #009;
    background-color: #eff;
    text-align: right;
    float: right;
    cursor: pointer;
    padding: 1rem 15px;
    border-radius: 10px;
    border: 2px solid;
    margin: 0 10px;
}

.modal-btn:hover,
.modal-btn:focus {
    background-color: #9ff;
}

/* ========== READING  ========= */

.flair {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 3px;
    font-style: italic;
    vertical-align: middle;
    margin: 0 auto;
}

.feat {
    background: #fee;
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

.feat_topic {
    color: #003;
    background-color: #ccc;
    font-size: 2.0rem;
    font-weight: 600;
    letter-spacing: 1;
    text-align: center;
    padding: 20px 10px;
    border-bottom: 3px solid #003;
    border-top: 3px solid #003;
}

.feat_link {
    color: #060;
    font-size: 1.4rem;
    font-weight: bold;
    padding: 20px 0 5px;
    margin: 0 20px;
}

.stat {
    background: #ccc;
    list-style: none;
    padding: 0;
    margin: 0;
}

.more_topic {
    color: #003;
    background-color: #ccc;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    padding: 10px;
    border-bottom: 3px solid #003;
    border-top: 3px solid #003;
}

.more {
    background: #9f9;
    list-style: none;
    padding: 20px 0;
    margin: 0;
    border-bottom: 5px solid #333333;
}

.more_link {
    color: #060;
    font-size: 1.2rem;
    font-weight: bold;
    padding-bottom: 5px;
    margin: 0 20px;
}

.feature-wrapper {
    position: relative;
    overflow: hidden;
    padding: 10px 20px 40px;
}

/* ======= FREEDOMETER ======== */

.formwrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px,1fr));
    grid-template-rows: auto;
    grid-gap: 20px;
    max-width: 800px;
}

.upside,
.dnside {
    width: 250px;
    margin: 0 auto 10px;
}

.tw-share {
    display: flex;
    font-weight: 900;
    text-decoration: none;
    justify-content: space-around;
    align-items: center;
}

.flex-table {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.points {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

.points a {
    color: #00c;
    background-image: url('null');
}

/* .dnside {
    grid-column: span 1/-1;
    width: 250px;
    margin: 0 auto 10px;
} */

.title {
    font-size: 24px;
    font-weight: bold;
    font-variant: small-caps;
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 20px 0 5px;
    border-radius: 33px;
    border: 6px solid;
}

.most {
    position: relative;
    font-size: 105px;
    font-weight: 700;
    border-top: 6px solid;
    border-bottom: 6px solid;
}

.rest {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.smash {
    color: #003;
    font-size: 24px;
    font-weight: 900;
    cursor: pointer;
    letter-spacing: 4px;
    padding: 18px 36px;
    margin: 18px;
    border-radius: 33px;
    border: 6px solid #003;
}

.smash:hover,
.smash:focus {
    color: #066;
    border-color: #0ff;
}

.val {
    height: 45px;
    flex-shrink: 0;
    flex-basis: 20px;
}

.error {
    color: #f00;
}

/* ========== SITE MAP ========= */

.map {
    width: 360px;
    margin: 30px auto;
    box-shadow: 2px 2px 30px;
    border-bottom: 1px solid;
}

.map a {
    width: 60%;
    background-color: #ccf;
    text-decoration: none;
    padding-left: 15px;
    border-left: 1px solid;
}

.map a.tier2 {
    width: 55%;
}

.map a.tier3 {
    width: 50%;
}

.map a.tier4 {
    width: 45%;
}

.map a:hover,
.map a:focus {
    color: #6ff;
}

.map p {
    padding: 0 10px;

    /* display: inline-block */
}

.map details {
    border-top: 0 solid;
}

.map summary {
    display: flex;
    background-color: #ccc;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.map summary::before {
    content: "learn more";
}

.map summary:hover,
.map summary:focus {
    background: #0cc;
}

.map details[open] summary {
    border-bottom: 1px solid;
}

.map details[open] summary:before {
    content: "";
    background: #ccc;
}

/* ========== BEHAVIOR ========== */

#tmod_1:checked ~ .modal_up {
    display: block;
}

#tmod_2:checked ~ .modal_dn {
    display: block;
}

/* ======= MEDIA QUERIES ======== */
@media (min-width: 547px) {
    html {
        font-size: 87.5%;
    }

    aside {
        grid-column: span 2;
        grid-column-end: -1;
    }

    .gridwrap {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-template-rows: auto;
        grid-gap: 10px;
        max-width: 1040px;
        grid-auto-flow: dense;
    }

    .tall {
        grid-row: span 2;
    }

    .full {
        grid-column: 1/-1;
        margin-bottom: 50px;
    }

    .wide {
        grid-column: 1/span 2;
    }

    .xtall {
        grid-row: span 3;
    }


}

@media (min-width: 807px) {
    #toc {
        right: 0;
    }

    .toc_cap {
        padding-right: 0;
    }

    .redge {
        width: 60px;
        padding-right: 35px;
    }

    aside {
        grid-column: span 1;
        grid-column-end: -1;
    }

    .upside,
    .dnside {
        grid-column-end: -1;
    }


}

@media (min-width: 1500px) {
    html {
        font-size: 100%;
    }

    .bigwrap {
        display: grid;
        max-width: 1250px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-gap: 20px;
        grid-auto-flow: dense;
    }

    .gridwrap {
        max-width: 1300px;
    }

    .wide-over {
        grid-column: span 2;
    }

    aside {
        grid-column: span 2;
        grid-column-end: -1;
    }

    header,
    footer {
        max-width: 1400px;
    }

    .formwrap {
        grid-template-columns: repeat(auto-fill, 605px);
        max-width: 1500px;
    }

    .upside,
    .dnside {
        grid-column-start: span 2;
    }


}