/* 
color palette

dark green 555524
light green 909a38
yellow f1ba1b
orange d88f28
burnt orange bd6d28
brown 412312
cool neutral f8f7f2
warm neutral fffdee

even darker orange 8c4613

ARBORIA BOOK: 
font-family: "arboria", sans-serif;
font-weight: 400;
font-style: normal;

    light: 300
    thin: 100

GIMLET DISPLAY BLACK:
font-family: "gimlet-display", serif;
font-weight: 800;
font-style: normal;

    bold: 700

GIMLET DISPLAY BLACK ITALIC:
font-family: "gimlet-display", serif;
font-weight: 800;
font-style: italic;

    bold-italic: 700

*/

/* styles for all pages */

html, body{
    margin: 0;
    padding: 0;
}

h1,
h2,
h3 {
    font-family: "gimlet-display", serif;
    font-weight: 800;
    font-style: normal;
    color: #555524;
}

p {
    color: #412312;
    font-family: "arboria", sans-serif;
    font-weight: 400;
    font-style: normal;
}

a,
a:visited {
    color: #bd6d28;
}

header {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
    font-family: "arboria", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.moreDLB a,
.moreRFA a,
.moreGOGL a,
.moreWLT a,
.moreDLW a {
    font-family: "gimlet-display", serif;
    font-weight: 800;
    font-style: normal;
    background-color: #bd6d28;
    border: solid 5px #bd6d28;
    color: #fffdee;
    font-size: 30px;
    text-decoration: none;
    border-radius: 50px;
    padding: 10px;
}

.moreDLB a:hover,
.moreRFA a:hover,
.moreGOGL a:hover,
.moreWLT a:hover,
.moreDLW a:hover {
    background-color: #8c4613;
}

/* mobile nav */

.topNav {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    color: #412312;
    background-color: #fffdee;
    position: fixed;
    width: 100%;
    z-index: 200;
}

.topNav img {
    max-width: 250px;
}

.topNav p {
    color: #fffdee;
    font-size: 16px;
}

.logo {
    font-size: 1.5rem;
    margin: .5rem;
    color: #555524;
}

.links {
    height: 100%;
}

.links ul {
    display: flex;
    margin: 0;
    padding: 0;
}

.links li {
    list-style: none;
}

.links li a {
    display: inline-block;
    text-decoration: none;
    color: #bd6d28;
    padding: .5rem;
    font-family: "gimlet-display", serif;
    font-weight: 800;
    font-style: normal;
}

.links li:hover {
    background-color: #f1ba1b;
}

.toggle {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle .bar {
    height: 3px;
    width: 100%;
    background-color: #bd6d28;
    border-radius: 10px;
}

/* ALL home page */

.tagline p {
    font-size: 20px;
    color: #555524;
}

.homeNav {
    grid-row: 3;
    grid-column: 1 / 6;
    place-self: center;
}

.logoLg {
    grid-row: 1;
    grid-column: 1 / 6;
    max-width: 700px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.homeNav ul {
    display: flex;
    margin: 0;
    padding: 0;
}

.homeNav li {
    display: inline-block;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
}

.homeNav li a {
    display: inline-block;
    text-decoration: none;
    color: #bd6d28;
    padding: 1rem;
    font-size: 26px;
    font-family: "gimlet-display", serif;
    font-weight: 800;
    font-style: normal;
    text-align: center;
    height: 175px;
    width: 175px;
    line-height: 175px;
    transition: background-color 0.5s ease-in;
    border-radius: 50%;
}

.homeNav a:hover {
    background-color: rgba(240, 186, 28, 0.5);
    /* border: 5px solid #f1ba1b;  */
    border-radius: 50%;
    color: #8c4613;
    /* transition: background-color 0.5s ease-in, border-radius 0.5s ease-in; */
} 

/* All non-home pages top nav */

.secondaryNav ul {
    margin: 0;
    padding: 0;
}

.secondaryNav li {
    display: inline-block;
    list-style: none;
    /* height: 175px;
    width: 175px;
    line-height: 175px; */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

.secondaryNav li a {
    display: inline-block;
    text-decoration: none;
    color: #bd6d28;
    padding: 1rem;
    font-size: 20px;
    font-family: "gimlet-display", serif;
    font-weight: 800;
    font-style: normal;
    text-align: center;
    height: 140px;
    width: 140px;
    line-height: 140px;
    transition: background-color 0.5s ease-in;
    border-radius: 50%;
}

.secondaryNav a:hover {
    background-color: rgba(240, 186, 28, 0.5);
    color: #8c4613;
    /* border: 5px solid #f1ba1b; */
    border-radius: 50%;
}

/* all non-home page headers */

.headerSecondary {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* grid-template-rows: 1fr auto; */
}

.logoSec {
    grid-row: 1;
    grid-column: 3;
    justify-self: start;
    align-self: center;
}

.navSec {
    grid-row: 1;
    grid-column: 4 / 7;
    justify-self: start;
}

.logoMd {
    max-width: 300px;
    /* width: 100%; */
    height: auto;
    display: block;
}

/* ALL About styles */

.headingWrapperAbout{
    grid-row: 1;
    grid-column: 3;
    /* display: flex; */
    text-align: center;
    align-self: end;
}

.headingWrapper h1 {
    margin-right: 30px;
}

.pWrapper p {
    text-align: left;
}

/* .headingWrapperSub {
    grid-row: 1;
    grid-column: 3 / span 2;
    text-align: center;
    align-items: start;
} */

.imgWrapper {
    grid-row: 1;
    grid-column: 3 / 5;
    justify-content: center;
    display: flex;
    filter: drop-shadow(0 1rem .75rem rgb(98, 92, 92));
    /* justify-content: center; */
}

.pWrapper p {
    font-family: "arboria", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #412312;
}

.headingWrapper h1, 
.headingWrapper2 h1 {
    font-family: "gimlet-display", serif;
    font-weight: 800;
    font-style: normal;
    color: #555524;
}

.imgWrapper img {
    border-radius: 50%;
    max-width: 300px;
}

/* ALL Portfolio top-level page styles */

.bodyPortfolio header {
    margin-bottom: 12%;
}

.portCircle {
    max-width: 450px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 1rem .75rem rgb(136, 129, 129));
}

.port1Text a:link,
        .port1Text a:visited,
        .port1Text a:hover, 
        .port1Text a:active,
        .port2Text a:link,
        .port2Text a:visited,
        .port2Text a:hover, 
        .port2Text a:active,
        .port3Text a:link,
        .port3Text a:visited,
        .port3Text a:hover, 
        .port3Text a:active, 
        .port4Text a:link,
        .port4Text a:visited,
        .port4Text a:hover, 
        .port4Text a:active,
        .port5Text a:link,
        .port5Text a:visited,
        .port5Text a:hover, 
        .port5Text a:active {
            text-decoration: none;
        }

/* ALL Contact page styles */

.desktopContact > * {
    font-family: "arboria", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.form {
    background-color: #bd6d28;
    border-radius: 20px;
    font-family: "arboria", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 22px;
    color: #fffdee;
    padding: 5px 15px;
    margin-bottom: 5%;
    filter: drop-shadow(0 1rem .75rem rgb(98, 92, 92));
}



input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    background-color: #fffdee;
  }
  
  input[type=submit] {
    background-color: #909a38;
    color: #fffdee;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 2%;
    font-family: "gimlet-display", serif;
    font-weight: 800;
    font-style: normal;
    font-size: 20px;
  }

  ::placeholder {
    font-family: "arboria", sans-serif;
    font-weight: 400;
    font-style: normal;
  }

/* ALL RFA Poster and Social Media page styles */

.moreRFA a {
    font-size: 20px;
}

.p1i1 img {
    max-width: 500px;
    width: 100%;
    height: auto;
}
.p1i2 img,
.p1i3 img {
    max-width: 300px;
}

/* ALL DLB Drafting Lizard Designs Logo & Branding page styles */

.lizard img {
    /* max-width: 75px; */
}

.dlLogo img {
    max-width: 400px;
    width: 100%;
    height: auto;
}

.styleGuide img {
    max-width: 600px;
    width: 100%;
    height: auto;
}

.moreDLB a {
    font-size: 20px;
}

/* ALL GOGL Get Out and Get Lost Composition Layouts page styles */

.gogl1 img,
.gogl2 img,
.gogl3 img {
    max-width: 600px;
    width: 100%;
    height: auto;
}

.moreGOGL a {
    font-size: 20px;
}

/* ALL DLW Drafting Lizard Designs Website Design page styles */

.DLWimage1 img {
    max-width: 1000px;
    width: 100%;
    height: auto;
}

/* Footer - all pages */

.footerDesktop,
.footerTablet,
.footerMobile {
    margin-top: auto;
}
#footerPortfolio {
    padding-top: 90%;
}

.footDtContainer {
    position: relative;
    text-align: center;
}

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

.copyright {
    display: flex;
    justify-content: flex-start;
    font-family: "arboria", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: transparent;
    margin-left: 1%; 
}

/* ALL White Lion Tea Website Redesign page styles */

.WLTimage1 img,
.WLTimage2 img,
.WLTimage3 img {
    max-width: 500px;
    width: 100%;
    height: auto;
}

/* ************ media queries */

    /* desktop media queries */

    @media (min-width: 1025px) {

        /* background settings for each page */

    /* desktop Home */

    .bodyPrimary {
        margin: 0;
        padding: 0;
        display: grid;
        min-height: 100vh;
        /* display: grid;
        grid-template-columns: repeat(minmax(min-content, 300px));
        grid-template-rows: 1fr auto; */
        background-image: url("BG_desktop_home.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
    }

    .desktopHome {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* grid-template-rows: 1fr auto; */
        align-items: center;
    }

    .logoLg {
        margin-top: 45%;
        grid-row: 1;
        grid-column: 2;
    }

    .tagline {
        grid-row: 2;
        grid-column: 2;
        justify-self: center;
    }

    .homeNav {
        grid-row: 3;
        grid-column: 2;
        justify-self: center;
    }

    /* About */

    .bodyAbout {
        margin: 0;
        padding: 0;
        display: grid;
        min-height: 100vh;
        /* display: grid;
        grid-template-columns: repeat(minmax(min-content, 300px));
        grid-template-rows: 1fr auto; */
        background-image: url("BG_desktop_home.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
    }

    .tabletAbout {
        display: none;
    }

    .mobileAbout {
        display: none;
    }

    /* Portfolio top-level */

    .bodyPortfolio {
        margin: 0;
        padding: 0;
        display: grid;
        /* min-height: 100vh; */
        background-image: url("BG_desktop_portfolio.png");
        background-size: cover;
        background-repeat: no-repeat;
        /* background-attachment: fixed; */
        /* background-position: center; */
    }

    /* Contact */

    .bodyContact {
        margin: 0;
        padding: 0;
        display: grid;
        /* min-height: 100vh; */
        /* display: grid;
        grid-template-columns: repeat(minmax(min-content, 300px));
        grid-template-rows: 1fr auto; */
        background-image: url("BG_desktop_home.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
    }

    /* RFA Rowley Farmhouse Ales Poster and Social Media */

    .bodyRFA {
        margin: 0;
        padding: 0;
        display: grid;
        /* min-height: 100vh; */
        background-image: url("BG_desktop_rfa.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        /* background-attachment: fixed; */
        background-position: center;
        background-color: #f1ba1b;
    }

    /* DLB Drafting Lizard Designs Logo and Branding */

    .bodyDLB {
        margin: 0;
        padding: 0;
        display: grid;
        min-height: 100vh;
        /* display: grid;
        grid-template-columns: repeat(minmax(min-content, 300px));
        grid-template-rows: 1fr auto; */
        background-image: url("BG_desktop_home.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
    }

    /* Get out and Get Lost Composition Layouts */

    .bodyGOGL {
        margin: 0;
        padding: 0;
        display: grid;
        min-height: 100vh;
        /* display: grid;
        grid-template-columns: repeat(minmax(min-content, 300px));
        grid-template-rows: 1fr auto; */
        background-image: url("BG_desktop_home.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
    }

    /* Drafting Lizard Website Design */

    .bodyDLW {
        margin: 0;
        padding: 0;
        display: grid;
        min-height: 100vh;
        /* display: grid;
        grid-template-columns: repeat(minmax(min-content, 300px));
        grid-template-rows: 1fr auto; */
        background-image: url("BG_desktop_home.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
    }

    /* White Lion Tea */

    .bodyWLT {
        margin: 0;
        padding: 0;
        display: grid;
        min-height: 100vh;
        /* display: grid;
        grid-template-columns: repeat(minmax(min-content, 300px));
        grid-template-rows: 1fr auto; */
        background-image: url("BG_desktop_home.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
    }

        .topNav, .footerMobile {
            display: none;
        }

        .mobileHome {
            display: none;
        }

        /* desktop about page */

        .desktopAbout {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat (4, 1fr);
            row-gap: 3%;
        }

        .desktopAbout p {
            background-color: #fffdee;
        }

        .imgWrapper {
            grid-row: 1;
            grid-column: 2 / 6;
            justify-content: center;
        }

        .headingWrapperAbout {
            grid-row: 2;
            grid-column: 2 / 6;
            justify-content: center;
        }

        .pWrapper {
            grid-row: 3;
            grid-column: 2 / 6;
            text-align: center;
            margin: 0 15% 4%;
        }

        /* desktop portfolio page */

        .desktopPortfolio {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat (4, auto);
        }

        header.headerPortfolio {
            margin-bottom: 0;
        }

        .headingWrapper2 {
            grid-row: 1;
            grid-column: 3 / span 2;
            text-align: center;
            align-items: start;
            margin-bottom: 24%;
        }

        .port1 {
            grid-row: 2;
            grid-column: 1 / span 2;
            justify-self: center;
            text-align: center;
            position: relative;
            margin: 5% 5%;
        }
        
        .port1Text,
        .port2Text,
        .port3Text, 
        .port4Text,
        .port5Text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 100;
            text-align: center;
            font-family: "arboria", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 1.5vw;
            width: 100%;
        }
        
        .port2 {
            grid-row: 2;
            grid-column: 3 / span 2; 
            justify-self: center;
            text-align: center;
            position: relative;
            margin: 0 5%;
        }
        
        .port3 {
            grid-row: 2;
            grid-column: 5 / span 2;
            justify-self: center;
            text-align: center;
            position: relative;
            margin: 0 5%;
        }
        
        .port4 {
            grid-row: 3;
            grid-column: 2 / span 2;
            justify-self: center;
            text-align: center;
            position: relative;
            margin: 0 5%;
        }
        
        .port5 {
            grid-row: 3;
            grid-column: 4 / span 2;
            justify-self: center;
            text-align: center;
            position: relative;
            margin: 0 5%;
        }
        
        .port1Hover, 
        .port2Hover,
        .port3Hover,
        .port4Hover,
        .port5Hover {
            display: none;
        } 
        
        .port1:hover {
        
            .port1Info {
                display: none;
            }
        
            .port1Hover {
                display: block;
            }
            
        }
        
        .port2:hover {
        
            .port2Info {
                display: none;
            }
        
            .port2Hover {
                display: block;
            }
            
        }
        
        .port3:hover {
        
            .port3Info {
                display: none;
            }
        
            .port3Hover {
                display: block;
            }
            
        }
        
        .port4:hover {
        
            .port4Info {
                display: none;
            }
        
            .port4Hover {
                display: block;
            }
            
        }
        
        .port5:hover {
        
            .port5Info {
                display: none;
            }
        
            .port5Hover {
                display: block;
            }
            
        }
        
        .space {
            grid-row: 4;
            margin-bottom: 50px;
        }
        
        /* desktop contact page */

        .desktopContact {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-auto-rows: minmax(10px, auto);
        }

        .headingWrapperContact {
            grid-row: 1;
            grid-column: 6 / span 2;
            justify-self: center;
        }
        
        .connected {
            grid-row: 2;
            grid-column: 5 / span 2;
        }
        
        .linkedIn {
            grid-row: 3;
            grid-column: 5;
        }
        
        .behance {
            grid-row: 3;
            grid-column: 6;
        }
        
        .aboutMe {
            grid-row: 3;
            grid-column: 7;
        }
        
        .gitHub {
            grid-row: 3;
            grid-column: 8;
        }
        
        .resume {
            grid-row: 4;
            grid-column: 6 / span 2;
            margin-top: 5%;
        }
        
        .linkedIn,
        .behance,
        .aboutMe,
        .gitHub,
        .resume {
            justify-self: center;
        }
        
        .message {
            grid-row: 5;
            grid-column: 5 / span 2;
        }
        
        .form {
            grid-row: 6;
            grid-column: 5 / 9;
        }

        /* desktop RFA Rowley page */

        .desktopRFA {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            /* grid-template-rows: repeat (6, 1fr); */
            /* row-gap: 3%; */
        }
        
        .headingWrapperRFA {
            grid-row: 1;
            grid-column: 3 / span 2;
            text-align: center;
            align-items: start;
        }
        
        .p1p1 {
            grid-row: 2;
            grid-column: 2 / 6;
            justify-self: center;
            margin: 25% 15% 2%;
        }
        
        .p1i1 {
            grid-row: 3;
            grid-column: 3 / 5;
            justify-self: center;
            margin: 2%;
        }
        
        .p1p2 {
            grid-row: 4;
            grid-column: 2 / 6;
            justify-self: center;
            margin: 2%;
        }
        
        .p1i2 {
            grid-row: 5;
            grid-column: 3 / 4;
            justify-self: center;
            margin: 2%;
        }
        
        .p1i3 {
            grid-row: 5;
            grid-column: 4 / 5;
            justify-self: center;
            margin: 2%;
        }
        
        .moreRFA {
            grid-row: 6;
            grid-column: 3 / span 2;
            justify-self: center;
            margin-top: 6%;
            margin-bottom: 2%;
        }        

        /* desktop DLB Drafting Lizard Designs Logo and Branding page */

        .desktopDLB {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            /* grid-template-rows: repeat (6, 1fr); */
            /* row-gap: 3%; */
        }

        .desktopDLB p {
            background-color: #fffdee;
        }
        
        .headingWrapperDLB {
            grid-row: 1;
            grid-column: 3 / span 2;
            text-align: center;
            align-items: start;
        }
        
        .lizard {
            grid-row: 2 / span 2;
            grid-column: 3;
            justify-self: start;
        }

        .dlLogo {
            grid-row: 2 / span 2;
            grid-column: 4 / span 2;
            justify-self: start;
            align-self: center;
            margin-top: 4%;
        }

        .dlbp1 {
            grid-row: 5;
            grid-column: 2 / 6;
            justify-self: center;
            margin: 2% 15%;
        }
        
        .styleGuide {
            grid-row: 6 ;
            grid-column: 2 / span 4;
            justify-self: center;
        }

        .dlbp2 {
            grid-row: 8;
            grid-column: 2 / 6;
            justify-self: center;
            margin: 2% 15%;
        }

        .seeDLW {
            grid-row: 9;
            grid-column: 3 / span 2;
            justify-self: center;
            margin-top: 5%;
            margin-bottom: 2%;
        }

        .seeDLW a {
            font-size: 20px;
        }
        
        .moreDLB {
            grid-row: 10;
            grid-column: 3 / span 2;
            justify-self: center;
            margin-top: 5%;
            margin-bottom: 2%;
        }

        /* desktop GOGL Design Composition page */

        .desktopGOGL {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            /* grid-template-rows: repeat (6, 1fr); */
            /* row-gap: 3%; */
        }
        
        .headingWrapperGOGL {
            grid-row: 1;
            grid-column: 3 / span 2;
            text-align: center;
            align-items: start;
        }
        
        .goglP {
            grid-row: 2;
            grid-column: 3 / 5;
        }
        
        .gogl1 {
            grid-row: 3;
            grid-column: 3 / span 2;
            justify-self: center;
            margin: 5% 0;
        }
        
        .gogl2 {
            grid-row: 4;
            grid-column: 3 / span 2;
            justify-self: center;
            margin: 5% 0;
        }
        
        .gogl3 {
            grid-row: 5;
            grid-column: 3 / span 2;
            justify-self: center;
            margin: 5% 0;
        }

        .moreGOGL {
            grid-row: 6;
            grid-column: 3 / span 2;
            justify-self: center;
            margin-top: 5%;
            margin-bottom: 2%;
        }

        /* desktop DLW Drafting Lizard Designs Website Design page */

        .DLWimage2,
        .DLWimage3 {
            display: none;
        }

        .desktopDLW {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            /* grid-template-rows: repeat (6, 1fr); */
            /* row-gap: 3%; */
        }
        
        .headingWrapperDLW {
            grid-row: 1;
            grid-column: 3 / span 2;
            text-align: center;
            align-items: start;
        }
        
        .DLWp {
            grid-row: 2;
            grid-column: 2 / 6;
            justify-self: center;
            margin-left: 200px;
            margin-right: 200px;
        }
        
        .DLWimage1 {
            grid-row: 3;
            grid-column: 3 / span 2;
            justify-self: center;
            margin-top: 5%;
        }
        
        .DLWp2 {
            grid-row: 4;
            grid-column: 3 / span 2;
            justify-self: center;
        }

        .seeDLB {
            grid-row: 5;
            grid-column: 3 / span 2;
            justify-self: center;
            margin: 4%;
        }

        .moreDLW {
            grid-row: 6;
            grid-column: 3 / span 2;
            justify-self: center;
            margin: 4%;
        }

        /* desktop WLT White Lion Tea Website Redesign page */

        .desktopWLT {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
        }

        .headingWrapperWLT {
            grid-row: 1;
            grid-column: 3 / span 2;
            text-align: center;
            align-items: start;
        }

        .WLTp1 {
            grid-row: 2;
            grid-column: 3 / 5;
            justify-self: center;
            margin: 2% 0;
        }

        .WLTimage1 {
            grid-row: 3;
            grid-column: 3 / 5;
            justify-self: center;
            margin: 2% 0;
        }

        .WLTp2 {
            grid-row: 4;
            grid-column: 3 / 5;
            justify-self: center;
            margin: 2% 0;
        }

        .WLTimage2 {
            grid-row: 5;
            grid-column: 3 / 5;
            justify-self: center;
            margin: 2% 0;
        }

        .WLTp3 {
            grid-row: 6;
            grid-column: 3 / 5;
            justify-self: center;
            margin: 2% 0;
        }

        .WLTimage3 {
            grid-row: 7;
            grid-column: 3 / 5;
            justify-self: center;
            margin: 2% 4%;
        }

        .WLTimage3 img {
            max-width: 600px;
        }

        .moreWLT {
            grid-row: 10;
            grid-column: 3 / 5;
            justify-self: center;
            margin-top: 5%;
        }

        /* desktop footer styles */

        .footerTablet {
            display: none;
        }

        .footerMobile {
            display: none;
        }
    
    }


    /* tablet media queries */

    @media (min-width: 480px) and (max-width: 1024px) {

        /* tablet home page */
        
        .bodyPrimary {
            margin: 0;
            padding: 0;
            display: grid;
            min-height: 100vh;
            background-image: url("BG_tablet_home.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
        }

        .mobileHome {
            display: none;
        }

        .desktopHome {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            margin-top: 40%;
        }

        .logoLg {
            grid-row: 1;
            grid-column: 1 / 4;
            justify-self: center;
            margin: 5% 5% 5% 5%;
        }

        .tagline {
            grid-row: 2;
            grid-column: 2 / 3;
            justify-self: center;
            text-align: center;
        }

        .homeNav {
            grid-row: 3;
        }

        /* tablet about page */

        .bodyAbout {
            margin: 0;
            padding: 0;
            display: grid;
            min-height: 100vh;
            background-image: url("BG_tablet_secondary.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: local;
            background-position: top;
            background-color: #fffdee;
        }

        .headerSecondary {
            display: none;
        }

        .desktopAbout,
        .mobileAbout {
            display: none;
        }

        .tabletAbout {
            display: grid;
            grid-template-columns: 1;
        }
        
        .headingWrapperAboutTab {
            grid-row: 1;
            text-align: center;
            justify-self: center;
            margin-top: 140px;
        }
        
        .imgWrapperTab {
            grid-row: 2;
            justify-content: center;
            text-align: center;
            /* display: flex; */
            filter: drop-shadow(0 1rem .75rem rgb(98, 92, 92));
            margin: 4% 4% 6%;
        }

        .imgWrapperTab img {
            border-radius: 50%;
            max-width: 300px;
        }
        
        .pWrapper {
            grid-row: 3;
            margin: 4% 6% 10%;
            max-width: 100%;
        }

        .pWrapper p {
            text-align: left;
        }
        
        .headingWrapper h1, 
        .headingWrapper2 h1 {
            font-family: "gimlet-display", serif;
            font-weight: 800;
            font-style: normal;
            color: #555524;
        }

        /* tablet portfolio page */

        .bodyPortfolio {
            margin: 0;
            padding: 0;
            display: grid;
            min-height: 100vh;
            background-image: url("BG_tablet_port.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: local;
            background-position: top;
            background-color: #f1ba1b;
        }

        .desktopPortfolio {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat (4, 1fr);
        }

        header.headerPortfolio {
            margin-bottom: 0;
        }

        .headingWrapper2 {
            grid-row: 1;
            grid-column: 3 / span 2;
            /* display: flex; */
            text-align: center;
            align-items: start;
            margin-top: 50px;
            margin-bottom: 110px;
        }

        .port1 {
            grid-row: 2;
            grid-column: 1 / span 2;
            justify-self: center;
            text-align: center;
            position: relative;
            margin: 0 5%;
        }
        
        .port1Text,
        .port2Text,
        .port3Text, 
        .port4Text,
        .port5Text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 100;
            text-align: center;
            font-family: "arboria", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 2vw;
            width: 100%;
        }
        
        .port2 {
            grid-row: 2;
            grid-column: 3 / span 2; 
            justify-self: center;
            text-align: center;
            position: relative;
            margin: 0 5%;
        }
        
        .port3 {
            grid-row: 2;
            grid-column: 5 / span 2;
            justify-self: center;
            text-align: center;
            position: relative;
            margin: 0 5%;
        }
        
        .port4 {
            grid-row: 3;
            grid-column: 2 / span 2;
            justify-self: center;
            text-align: center;
            position: relative;
            margin: 0 5%;
        }
        
        .port5 {
            grid-row: 3;
            grid-column: 4 / span 2;
            justify-self: center;
            text-align: center;
            position: relative;
            margin: 0 5%;
        }
        
        .port1Hover, 
        .port2Hover,
        .port3Hover,
        .port4Hover,
        .port5Hover {
            display: none;
        } 
        
        .port1:hover {
        
            .port1Info {
                display: none;
            }
        
            .port1Hover {
                display: block;
            }
            
        }
        
        .port2:hover {
        
            .port2Info {
                display: none;
            }
        
            .port2Hover {
                display: block;
            }
            
        }
        
        .port3:hover {
        
            .port3Info {
                display: none;
            }
        
            .port3Hover {
                display: block;
            }
            
        }
        
        .port4:hover {
        
            .port4Info {
                display: none;
            }
        
            .port4Hover {
                display: block;
            }
            
        }
        
        .port5:hover {
        
            .port5Info {
                display: none;
            }
        
            .port5Hover {
                display: block;
            }
            
        }
        
        .space {
            grid-row: 4;
            margin-bottom: 50px;
        }

        /* tablet contact page */

        .bodyContact {
            margin: 0;
            padding: 0;
            display: grid;
            min-height: 100vh;
            background-image: url("BG_tablet_secondary.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
        }

        .desktopContact {
            display: grid;
            grid-template-columns: 1;
            margin: 0 4% 0;
            /* grid-auto-rows: minmax(10px, auto); */
        }

        .headingWrapperContact {
            grid-row: 1;
            margin-top: 120px;
            justify-self: center;
        }
        
        .connected {
            grid-row: 2;
        }

        .connected h3,
        .message h3 {
            text-align: center;
        }
        
        .linkedIn {
            grid-row: 3;
        }
        
        .behance {
            grid-row: 4;
        }
        
        .aboutMe {
            grid-row: 5;
        }
        
        .gitHub {
            grid-row: 6;
        }
        
        .resume {
            grid-row: 7;
            margin-top: 5%;
        }
        
        .linkedIn,
        .behance,
        .aboutMe,
        .gitHub,
        .resume {
            justify-self: center;
        }
        
        .message {
            grid-row: 8;
            margin-top: 20px;
        }
        
        .form {
            grid-row: 9;
            margin: 0 10% 2%;
        }

        /* tablet RFA page */

        .bodyRFA {
            margin: 0;
            padding: 0;
            display: grid;
            min-height: 100vh;
            background-image: url("BG_tablet_secondary.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: local;
            background-position: top;
            background-color: #fffdee;
        }

        .desktopRFA {
            display: grid;
            grid-template-columns: 1;
            max-width: 100%;;
            /* grid-template-rows: repeat (6, 1fr); */
            /* row-gap: 3%; */
        }
        
        .headingWrapperRFA {
            grid-row: 1;
            text-align: center;
            align-items: start;
            margin: 150px 5% 0;
        }
        
        .p1p1 {
            grid-row: 2;
            justify-self: center;
            margin: 4% 5% 4%;
        }
        
        .p1i1 {
            grid-row: 3;
            justify-self: center;
            margin: 4% 5% 4%;
        }
        
        .p1p2 {
            grid-row: 4;
            justify-self: center;
            margin: 4% 5% 4%;
        }
        
        .p1i2 {
            grid-row: 5;
            justify-self: center;
            margin: 4% 5% 4%;
        }
        
        .p1i3 {
            grid-row: 6;
            justify-self: center;
            margin: 4% 5% 4%;
        }
        
        .moreRFA {
            grid-row: 7;
            justify-self: center;
            margin-top: 5%;
            margin-bottom: 2%;
        }

        /* tablet DLB page */

        .bodyDLB {
            margin: 0;
            padding: 0;
            display: grid;
            min-height: 100vh;
            background-image: url("BG_tablet_secondary.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: local;
            background-position: top;
            background-color: #fffdee;
        }

        .desktopDLB {
            display: grid;
            grid-template-columns: 1;
        }
        
        .headingWrapperDLB {
            grid-row: 1;
            text-align: center;
            align-items: start;
            margin-top: 150px;
        }
        
        .lizard {
            grid-row: 2;
            justify-self: center;
            margin: 0 4%;
        }

        .dlLogo {
            grid-row: 3;
            align-self: center;
            justify-self: center;
            margin-top: 4%;
        }

        .dlbp1 {
            grid-row: 4;
            justify-self: center;
            margin: 2% 4%;
        }
        
        .styleGuide {
            grid-row: 5;
            justify-self: center;
            margin: 2% 4%;
        }
        
        .dlbp2 {
            grid-row: 6;
            justify-self: center;
            margin: 2% 4%;
        }

        .seeDLW {
            grid-row: 7;
            justify-self: center;
            margin: 2% 4%;
        }
        
        .moreDLB {
            grid-row: 8;
            justify-self: center;
            margin-top: 5%;
            margin-bottom: 2%;
        }

        /* tablet GOGL */

        .bodyGOGL {
            margin: 0;
            padding: 0;
            display: grid;
            min-height: 100vh;
            background-image: url("BG_tablet_secondary.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: local;
            background-position: top;
            background-color: #fffdee;
        }

        .desktopGOGL {
            display: grid;
            grid-template-columns: 1;
        }
        
        .headingWrapperGOGL {
            grid-row: 1;
            text-align: center;
            margin-top: 150px;
        }
        
        .goglP {
            grid-row: 2;
            margin: 2% 4%;
        }
        
        .gogl1 {
            grid-row: 3;
            margin: 4% 4%;
            justify-self: center;
        }
        
        .gogl2 {
            grid-row: 4;
            margin: 4% 4%;
            justify-self: center;
        }
        
        .gogl3 {
            grid-row: 5;
            margin: 4% 4%;
            justify-self: center;
        }

        .moreGOGL {
            grid-row: 6;
            justify-self: center;
            margin-top: 5%;
            margin-bottom: 2%;
        }

        /* tablet DLW */

        .bodyDLW {
            margin: 0;
            padding: 0;
            display: grid;
            min-height: 100vh;
            background-image: url("BG_tablet_secondary.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: local;
            background-position: top;
            background-color: #fffdee;
        }

        .desktopDLW {
            display: grid;
            grid-template-columns: 1;
        }
        
        .headingWrapperDLW {
            grid-row: 1;
            text-align: center;
            align-items: start;
            margin-top: 150px;
        }
        
        .DLWp {
            grid-row: 2;
            justify-self: center;
            margin: 4% 4%;
        }
        
        .DLWimage1 {
            display: none;
        }

        .DLWimage2 {
            grid-row: 3;
            margin: 4% 4%;
            justify-self: center;
        }

        .DLWimage3 {
            grid-row: 4;
            margin: 4% 4%;
            justify-self: center;
        }

        .DLWimage2 img,
        .DLWimage3 img {
            max-width: 350px;
            width: 100%;
            height: auto;
        }
        
        .DLWp2 {
            grid-row: 5;
            justify-self: center;
            margin: 4% 4%;
        }

        .moreGOGL {
            grid-row: 6;
        }

        /* tablet WLT */

        .bodyWLT {
            margin: 0;
            padding: 0;
            display: grid;
            min-height: 100vh;
            background-image: url("BG_tablet_secondary.jpg");
            background-size: 100%;
            background-repeat: no-repeat;
            background-attachment: local;
            background-position: top;
            background-color: #fffdee;
        }

        .desktopWLT {
            display: grid;
            grid-template-columns: 1;
        }

        .headingWrapperWLT {
            grid-row: 1;
            text-align: center;
            /* align-items: start; */
            justify-self: center;
            margin-top: 150px;
        }

        .WLTp1 {
            grid-row: 2;
            justify-self: center;
            margin: 4% 4%;
        }

        .WLTimage1 {
            grid-row: 3;
            justify-self: center;
        }

        .WLTp2 {
            grid-row: 4;
            justify-self: center;
            margin: 4% 4%;
        }

        .WLTimage2 {
            grid-row: 5;
            justify-self: center;
        }

        .WLTp3 {
            grid-row: 6;
            justify-self: center;
            margin: 4% 4%;
        }

        .WLTimage3 {
            grid-row: 7;
            justify-self: center;
            margin: 4% 4%;
        }

        .WLTimage4 {
            grid-row: 8;
            margin: 4% 4%;
        }

        .moreWLT {
            grid-row: 9;
            justify-self: center;
        }

        /* tablet footer */

        .footerDesktop {
            display: none;
        }

        .footerMobile {
            display: none;
        }

        .footerTablet {
            display: block;
        }

        .footTabContainer {
            max-width: 100%;
        }

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

    }

    /* mobile media queries */

    @media (max-width: 480px) {

        /* mobile home */

        .bodyPrimary {
            background-image: url("BG_mobile_home.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
        }

        .logoSec {
            display: none;
        }

        .topNav {
            flex-direction: column;
            align-items: flex-start;
        }

        .toggle {
            display: flex;
        }

        .links {
            display: none;
            width: 100%;
        }

        .links ul {
            width: 100%;
            flex-direction: column;
        }

        .links ul li {
            text-align: center;
        }

        .links ul li a {
            padding: .5rem 1rem;
        }

        .links.active {
            display: flex;
        }

        .secondaryNav {
            display: none;
        }

        /* mobile Home page */


        .desktopHome {
            display: none;
        }

        .mobileHome {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /* grid-template-rows: auto auto auto; */
        }

        .logoMob {
            grid-row: 1;
            grid-column: 1 / 4;
            max-width: calc(100% - 40px);
            margin-top: 200px;
            margin-left: 20px;
            margin-right: 20px;
            justify-self: center;
        }
        
        .logoMob img {
            width: 100%; 
            height: auto;
        }

        .taglineMob {
            grid-row: 2;
            grid-column: 1 / 4;
            justify-self: center;
        }

        .homeNavMobile {
            grid-row: 3;
            grid-column: 2;
        }

        .homeNavMobile ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            justify-self: center;
        }

        .homeNavMobile li {
            margin: 25px 0;
        }

        .homeNavMobile a {
            text-decoration: none;
            font-size: 24px;
            font-family: "gimlet-display", serif;
            font-weight: 800;
            font-style: normal;
        }


        /* mobile subpage backgrounds */

        .bodyAbout,
        .bodyContact {
            margin: 0;
            padding: 0;
            display: grid;
            min-height: 100vh;
            background-image: url("BG_mobile_sub.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: local;
            background-color: #fffdee;
        }

        .bodyPortfolio {
            background-color: #f1ba1b;
            background-image: none;
        }

        .bodyRFA,
        .bodyDLB,
        .bodyGOGL,
        .bodyDLW,
        .bodyWLT {
            background-color: #fffdee;
            background-image: none;
        }
        
        
        /* mobile footer */

        .footerDesktop {
            display: none;
        }

        .footerTablet {
            display: none;
        }

        .footerMobile {
            display: block;
        }

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

        /* mobile About page */

        .desktopAbout {
            display: none;
        }

        .tabletAbout {
            display: none;
        }
        
        .mobileAbout {
            display: grid;
            grid-template-columns: 1;
        }
        
        .headingWrapperAboutMob {
            grid-row: 1;
            /* grid-column: 3; */
            /* display: flex; */
            text-align: center;
            margin-top: 140px;
        }
        
        .imgWrapperMob {
            grid-row: 2;
            justify-content: center;
            display: flex;
            filter: drop-shadow(0 1rem .75rem rgb(98, 92, 92));
            margin: 4% 4% 6%;
        }

        .imgWrapperMob img {
            border-radius: 50%;
            max-width: 300px;
        }
        
        .pWrapper {
            grid-row: 3;
            /* grid-column: 2 / 6; */
            margin: 4% 4% 10%;
            max-width: 100%;
        }

        .pWrapper p {
            text-align: left;
        }
        
        .headingWrapper h1, 
        .headingWrapper2 h1 {
            font-family: "gimlet-display", serif;
            font-weight: 800;
            font-style: normal;
            color: #555524;
        }

        /* mobile portfolio page */

        .desktopPortfolio {
            display: grid;
            grid-template-columns: 1;
            row-gap: 2%;
            /* margin: 0;
            padding: 0; */
        }

        .headingWrapper2 {
            grid-row: 1;
            text-align: center;
            align-items: start;
            margin-top: 6%;
        }

        .port1 {
            grid-row: 2;
            justify-self: center;
            text-align: center;
            position: relative;
        }
        
        .port1Text,
        .port2Text,
        .port3Text, 
        .port4Text,
        .port5Text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 100;
            text-align: center;
            font-family: "arboria", sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 5vw;
            width: 100%;
        }

        .port1 img,
        .port2 img,
        .port3 img,
        .port4 img,
        .port5 img {
            max-width: 300px;
        }
        
        .port2 {
            grid-row: 3;
            justify-self: center;
            text-align: center;
            position: relative;
        }
        
        .port3 {
            grid-row: 4;
            justify-self: center;
            text-align: center;
            position: relative;
        }
        
        .port4 {
            grid-row: 5;
            justify-self: center;
            text-align: center;
            position: relative;
        }
        
        .port5 {
            grid-row: 6;
            justify-self: center;
            text-align: center;
            position: relative;
        }
        
        .port1Hover, 
        .port2Hover,
        .port3Hover,
        .port4Hover,
        .port5Hover {
            display: none;
        } 
        
        .space {
            grid-row: 7;
            margin-bottom: 150px;
        }
        
        /* mobile Contact page */

        .desktopContact {
            display: grid;
            grid-template-columns: 1;
            margin: 0 4% 0;
            /* grid-auto-rows: minmax(10px, auto); */
        }

        .headingWrapperContact {
            grid-row: 1;
            margin-top: 120px;
            justify-self: center;
        }
        
        .connected {
            grid-row: 2;
        }

        .connected h3,
        .message h3 {
            text-align: center;
        }
        
        .linkedIn {
            grid-row: 3;
        }
        
        .behance {
            grid-row: 4;
        }
        
        .aboutMe {
            grid-row: 5;
        }
        
        .gitHub {
            grid-row: 6;
        }
        
        .resume {
            grid-row: 7;
            margin-top: 5%;
        }
        
        .linkedIn,
        .behance,
        .aboutMe,
        .gitHub,
        .resume {
            justify-self: center;
        }
        
        .message {
            grid-row: 8;
            margin-top: 20px;
        }
        
        .form {
            grid-row: 9;
        }

        /* mobile RFA page */

        .desktopRFA {
            display: grid;
            grid-template-columns: 1;
        }
        
        .headingWrapperRFA {
            grid-row: 1;
            text-align: center;
            align-items: start;
            margin-top: 75px;
        }
        
        .p1p1 {
            grid-row: 2;
            justify-self: center;
            margin: 4%;
        }
        
        .p1i1 {
            grid-row: 3;
            justify-self: center;
            margin: 4%;
        }
        
        .p1p2 {
            grid-row: 4;
            justify-self: center;
            margin: 4%;
        }
        
        .p1i2 {
            grid-row: 5;
            justify-self: center;
            margin: 4%;
        }
        
        .p1i3 {
            grid-row: 6;
            justify-self: center;
            margin: 4%;
        }
        
        .moreRFA {
            grid-row: 7;
            justify-self: center;
            margin-top: 5%;
            margin-bottom: 2%;
        }

        /* mobile DLB branding page */

        .desktopDLB {
            display: grid;
            grid-template-columns: 1;
        }
        
        .headingWrapperDLB {
            grid-row: 1;
            text-align: center;
            align-items: start;
            margin-top: 75px;
        }
        
        .lizard {
            grid-row: 2;
            justify-self: center;
            margin: 0 4%;
        }

        .dlLogo {
            grid-row: 3;
            align-self: center;
            margin-top: 4%;
            margin: 2% 4%;
        }

        .dlbp1 {
            grid-row: 4;
            justify-self: center;
            margin: 2% 4%;
        }
        
        .styleGuide {
            grid-row: 5;
            justify-self: center;
            margin: 2% 4%;
        }
        
        .dlbp2 {
            grid-row: 6;
            justify-self: center;
            margin: 2% 4%;
        }

        .seeDLW {
            grid-row: 7;
            justify-self: center;
            margin: 2% 4%;
        }
        
        .moreDLB {
            grid-row: 8;
            justify-self: center;
            margin-top: 5%;
            margin-bottom: 2%;
        }

        /* mobile GOGL composition page */

        .desktopGOGL {
            display: grid;
            grid-template-columns: 1;
        }
        
        .headingWrapperGOGL {
            grid-row: 1;
            text-align: center;
            align-items: start;
            margin-top: 75px;
        }
        
        .goglP {
            grid-row: 2;
            margin: 2% 4%;
        }
        
        .gogl1 {
            grid-row: 3;
            margin: 4% 4%;
            justify-self: center;
        }
        
        .gogl2 {
            grid-row: 4;
            margin: 4% 4%;
            justify-self: center;
        }
        
        .gogl3 {
            grid-row: 5;
            margin: 4% 4%;
            justify-self: center;
        }

        .moreGOGL {
            grid-row: 6;
            justify-self: center;
            margin-top: 5%;
            margin-bottom: 2%;
        }

        /* mobile DLW website page */

        .desktopDLW {
            display: grid;
            grid-template-columns: 1;
        }
        
        .headingWrapperDLW {
            grid-row: 1;
            text-align: center;
            align-items: start;
            margin-top: 75px;
        }
        
        .DLWp {
            grid-row: 2;
            justify-self: center;
            margin: 4% 4%;
        }
        
        .DLWimage1 {
            display: none;
        }

        .DLWimage2 {
            grid-row: 3;
            margin: 4% 4%;
            justify-self: center;
        }

        .DLWimage3 {
            grid-row: 4;
            margin: 4% 4%;
            justify-self: center;
        }

        .DLWimage2 img,
        .DLWimage3 img {
            max-width: 350px;
            width: 100%;
            height: auto;
        }
        
        .DLWp2 {
            grid-row: 5;
            justify-self: center;
            margin: 4% 4%;
        }

        .seeDLB {
            grid-row: 6;
            margin: 2% 4%;
            justify-self: center;
        }

        .moreDLW {
            grid-row: 7;
            margin: 8% 2%;
            justify-self: center;
        }

        /* mobile WLT page */

        .desktopWLT {
            display: grid;
            grid-template-columns: 1;
        }

        .headingWrapperWLT {
            grid-row: 1;
            text-align: center;
            /* align-items: start; */
            justify-self: center;
            margin-top: 75px;
        }

        .WLTp1 {
            grid-row: 2;
            justify-self: center;
            margin: 4% 4%;
        }

        .WLTimage1 {
            grid-row: 3;
            justify-self: center;
        }

        /* .WLTimage1 img,
        .WLTimage2 img {
            max-width: 350px;
        } */

        .WLTp2 {
            grid-row: 4;
            justify-self: center;
            margin: 4% 4%;
        }

        .WLTimage2 {
            grid-row: 5;
            justify-self: center;
        }

        .WLTp3 {
            grid-row: 6;
            justify-self: center;
            margin: 4% 4%;
        }

        .WLTimage3 {
            grid-row: 7;
            justify-self: center;
            margin: 4% 4%;
        }

        /* .WLTimage3 img {
            max-width: 350px;
        } */

        .WLTimage4 {
            grid-row: 8;
            margin: 4% 4%;
        }

        .WLTimage5 {
            grid-row: 9;
            margin: 4% 4%;
        }

        .moreWLT {
            grid-row: 10;
            justify-self: center;
        }

    }