/*-----Body Base-----*/
.body-base {
    background-position: top left;
    /*height: 100vh;*/
}

/*-----Body Tiled-----*/
.body-tiled {
    background-repeat: repeat;
    padding: 0.25vh 0.25vw;
}

/*-----Body Page Specific-----*/
.body-home {
    background-image: url("../images/WaterBKG11c.webp");
    background-repeat: repeat-y;
    background-size: contain;
}

.body-about {
    background-color: wheat;
    padding: 0.25vh 0.25vw;
}

.body-nm {
    background: var(--stucco);
    background-image: url("../images/Stucco.jpg");
}

.body-TX {
    background: var(--redclay);
    background-image: url("../images/redclay1.jpg");
}

.body-ep {
    background:
        url('../images/mosaictile.png') left top repeat-y,
        url('../images/mosaictile.png') right top repeat-y,
        url('../images/sparkletile.jpeg') center top repeat;
    background-color: whitesmoke;
    background-size: auto 8vmin, auto 8vmin, auto auto;
}

.body-study-guides {
    color: wheat;
    background-image: url("../images/background.jpeg");
    background-size: cover;
    line-height: 3;
    text-align: center;
}

/*-----Wraps + Components-----*/
.wrap1 {
    /*floating left logo layout*/
    display: grid;
    grid-template-areas:
        'beg beg'
        'logolft txt'
        'heel heel';
    grid-template-columns: 12vw 1fr;
    background-color: transparent;
    margin: 0.25vh 0.25vw;
}

.topnav {
    grid-area: topnav;
    margin-top: 1.5vmin;
}

.beg {
    grid-area: beg;
    justify-content: center;
    justify-items: stretch;
    align-content: center;
    /*top: 0;*/
}

.logolft {
    grid-area: logolft;
    /*width: 12vw;*/
    align-self: center;
}

.txt {
    grid-area: txt;
    background-color: rgba(255, 255, 255, 0.1);
    /* soft ivory lift */
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    margin: 0 8.5vw;
}

.heel {
    grid-area: heel;
    margin-bottom: 1vmin;
}

.footer {
    grid-area: footer;
}

.wrap2 {
    /*logos as top bookmarks*/
    display: grid;
    grid-template-areas:
        'logolt beg2 logort'
        'topnav topnav topnav'
        'txt txt txt'
        'heel heel heel';
    grid-template-columns: 8.5vw 1fr 8.5vw;
    margin: 0.5vw 0.5vw;
    background-color: transparent;
}

.logolt {
    grid-area: logolt;
    align-self: center;
}

.wrap2>.logolt,
.wrap2>.logort {
    max-width: fit-content;
    align-content: center;
    margin-top: 0.5vh;
}

.beg2 {
    grid-area: beg2;
    text-align: center;
    align-content: center;
    justify-self: stretch;
    outline: 5px ridge var(--blackblue);
    margin: 0.5vh 0.5vw 0.4vh;
}

.wrap2>.beg2 {
    justify-items: stretch;
}

.logort {
    grid-area: logort;
    align-self: center;
}

.wrap3 {
    /*Top flat logo layout*/
    display: grid;
    grid-template-areas:
        'logotop logotop logotop'
        'header header header'
        'topnav topnav topnav'
        'txt3 txt3 txt3'
        'heel heel heel';
    grid-template-columns: fit-content 1fr fit-content;
    margin: 0.5vmax 0.5vmax;
    background-color: transparent;
}

.logotop {
    grid-area: logotop;
    align-self: center;
    justify-self: center;
}

.header2,
.cmnt1,
.orgs {
    background-image: linear-gradient(to bottom left,
            darkturquoise 5%,
            var(--midnightblue) 15%,
            var(--oldgold) 30%,
            var(--midnightblue) 40%,
            darkturquoise 45%,
            var(--midnightblue) 65%,
            var(--oldgold) 75%,
            var(--midnightblue) 90%,
            darkturquoise 95%);
    background-repeat: no-repeat;
    background-size: 100% 1vmax;
}

.header2 {
    grid-area: header;
    align-self: center;
    justify-self: stretch;
    text-align: center;
    padding: 0.5vh 0.5vw 2.5vh;
    background-position: bottom;
}

.txt3 {
    grid-area: txt3;
    padding: 0.5rem 0.5rem;
    display: grid;
    grid-template-areas:
        'cmnt cmnt'
        'leftcolumn center'
        'orgs orgs'
        'cmnt1 cmnt1'
        'center1 rightcolumn';
    grid-template-columns: repeat(auto-fit, 45vw);
    justify-content: center;
    gap: 1vmax;
}

.cmnt {
    grid-area: cmnt;
}

.cmnt1 {
    grid-area: cmnt1;
}

.cmnt1,
.orgs {
    background-position: top;
    padding: 2.5vh 0.5vw 0.5vh;
}

.center {
    grid-area: center;
}

.center1 {
    grid-area: center1;
}

.center,
.center1 {
    text-align: left;
    background: url("../images/NMb.png");
    background-size: contain;
    background-position: 10% 0%;
    background-repeat: no-repeat;
    padding: 1rem 0.5rem 5rem;

}

.leftcolumn {
    grid-area: leftcolumn;
}

.rightcolumn {
    grid-area: rightcolumn;
}

.leftcolumn,
.rightcolumn {
    text-align: left;
    background: url("../images/NMb.png");
    background-size: contain;
    background-position: 10% 0%;
    background-repeat: no-repeat;
    padding: 1rem 0.5rem 5rem;
}

.orgs {
    grid-area: orgs;
    text-align: center;
    font-size: 3vmin;
}

.wrap-tx {
    /*Top flat logo layout*/
    display: grid;
    grid-template-areas:
        'logotop logotop logotop'
        'header-tx header-tx header-tx'
        'topnav-tx topnav-tx topnav-tx'
        'cmnt-tx cmnt-tx cmnt-tx'
        'txt-tx txt-tx txt-tx'
        'orgs-tx orgs-tx orgs-tx'
        'heel-tx heel-tx heel-tx';
    grid-template-columns: fit-content 1fr fit-content;
    margin: 0.5vmax 0.5vmax;
    color: wheat;
}

.topnav-tx {
    grid-area: topnav-tx;
    margin-top: 1.5vmin;
}

.heel-tx {
    grid-area: heel-tx;
    margin-bottom: 1vmin;
}

.header-tx {
    grid-area: header-tx;
    align-self: center;
    justify-self: stretch;
    text-align: center;
    padding: 0.5vh 0.5vw 2.5vh;
    background-color: transparent;
    background-image: linear-gradient(to bottom left,
            wheat 5%,
            var(--bluebonnet) 15%,
            var(--oldgold) 30%,
            var(--bluebonnet) 40%,
            wheat 45%,
            var(--bluebonnet) 65%,
            var(--oldgold) 75%,
            var(--bluebonnet) 90%,
            wheat 95%);
    background-repeat: no-repeat;
    background-size: 100% 1vmax;
    background-position: bottom;
}

.cmnt-tx {
    grid-area: cmnt-tx;
    margin: 0.5rem 5rem;
}

.txt-tx {
    grid-area: txt-tx;
    text-align: left;
    background: url("../images/TXc.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1rem 0.5rem 5rem;
    min-height: 65vh;
    justify-items: center;
}

.orgs-tx {
    grid-area: orgs-tx;
    margin-bottom: 1rem;
    text-align: center;
    padding: 2.5vh 0.5vw 0.5vh;
    background-image: linear-gradient(to bottom right,
            wheat 5%,
            var(--bluebonnet) 15%,
            var(--oldgold) 30%,
            var(--bluebonnet) 40%,
            wheat 45%,
            var(--bluebonnet) 65%,
            var(--oldgold) 75%,
            var(--bluebonnet) 90%,
            wheat 95%);
    background-repeat: no-repeat;
    background-size: 100% 1vmax;
    background-position: top;
}

.form-wrap {
    /*Top flat logo with no navigation grids for forms*/
    display: grid;
    grid-template-areas:
        'logotop logotop'
        'header header'
        'cmnt2 cmnt2'
        'txt2 txt2'
        'footer footer';
    grid-template-columns: repeat(auto, minmax(200px, 1fr));
    margin: 0.5vmax 0.5vmax;
}

.txt2 {
    grid-area: txt2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    /* Stretch children to fill row height */
    gap: 2rem;
    appearance: none;
    padding: 0.5rem 0.5rem;
    margin: 0.5rem;
}

.cmnt2 {
    grid-area: cmnt2;
    display: grid;
    grid-template-columns: 8vw 1fr 8vw;
    column-gap: 1.5vw;
    margin: 0.5rem 0.5rem;
    align-content: center;
    justify-content: center;
}

/*-----Grids-----*/
.mid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(34vw, 1fr));
    gap: 2vw;
    justify-content: space-between;
    justify-items: stretch;
    align-items: start;
    margin: 0vh 1vw;
    min-height: 60vh;
}

.mid>.p3 {
    grid-column: 1 / 1;
}

.mid>.p4>ul {
    grid: 2/2;
}

.body-ep>.wrap2>.topnav {
    grid-area: topnav;
}

.body-ep>.wrap2>.heel {
    grid-area: heel;
}

.imgtxt-grid {
    display: grid;
    grid-template-areas:
        'itxt1 itxt1 itxt1'
        'itxt2 itxt2 img2'
        'itxt3 itxt3 itxt3'
        'itxt4 itxt4 itxt4'
        'img5 itxt5 itxt5'
        'itxt6 itxt6 itxt6';
    grid-template-columns: repeat(auto, minmax(0.25vw, 1fr));
    justify-content: center;
    align-items: center;
    padding: 0.125rem;
    margin: 0.125rem;
}

.img1 {
    grid-area: img1;
}

.img2 {
    grid-area: img2;
}

.img3 {
    grid-area: img3;
}

.img4 {
    grid-area: img4;
}

.img5 {
    grid-area: img5;
}

.img6 {
    grid-area: img6;
}

.imgtxt1 {
    grid-area: itxt1;
}

.imgtxt2 {
    grid-area: itxt2;
    grid-column: span 2;
    width: 100%;
}

.imgtxt3 {
    grid-area: itxt3;
}

.imgtxt4 {
    grid-area: itxt4;
}

.imgtxt5 {
    grid-area: itxt5;
    grid-column: span 2;
    width: 100%;
}

.imgtxt6 {
    grid-area: itxt6;
}

/*-----Flex-----*/
.imgtxt1 .img1,
.imgtxt3 .img3,
.imgtxt4 .img4,
.imgtxt6 .img6 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0;
}

.paperCuts {
    display: flex;
    align-items: center;
    gap: 2vw;
    margin-bottom: 1rem;
}

.wraptxt {
    flex: 1;
    min-width: 20vw;
}

.nav {
    display: flex;
    flex-direction: row;
}