/* Starter Classes */

.container {
    @media (min-width: 640px) {
            max-width: 640px;
        }
    
        @media (min-width: 768px) {
            max-width: 768px;
        }
    
        @media (min-width: 1024px) {
    
            max-width: 1024px;
        }
    
        @media (min-width: 1280px) {
            max-width: 1280px;
        }
    
        @media (min-width: 1536px) {
            max-width: 1536px;
        }
    
        @media (min-width: 1600px) {
            max-width: 1600px;
        }
                @media (min-width: 1900px) {
                    max-width: 1900px;
                }
}

body {
    background-color: moccasin;
        width: 100%;
        
        
        /* @media (min-width: 640px) {
            max-width: 640px;
        }
        
        @media (min-width: 768px) {
                max-width: 768px;
        }
        
        @media (min-width: 1024px) {
            
                max-width: 1024px;
        }
        
        @media (min-width: 1280px) {
                max-width: 1280px;
        }
        
        @media (min-width: 1536px) {
                max-width: 1536px;
        }
        
        @media (min-width: 1600px) {
                max-width: 1600px;
        }
        */
        
}

body * {
    font-family: 'American Typewriter', serif;
    margin-right: auto;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    
}

header {
    display: grid ;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1.25rem;
    padding-bottom: 2.5rem      /* 40px */;
    
}

nav.desktop {
    display: none;
    grid-column: span 2 / span 2;
    height: inherit;
    width: 100%;
    
    padding-right: 1rem;
    padding-left: 1rem;
    @media (min-width: 768px) {
        display: inline;
        
        height: 100%;
    }

}

nav  div   {
    display: inline;
    grid-column: span 1 / span 1;
    vertical-align: middle;
    height: 100%;
    font-size: 3rem;
    
    /* float: inline-start; */
}

div.navMenu ul {
    display: flex;
    float: inline-end;
    vertical-align: middle;
    height: inherit;
    font-size: 1.25rem  /* 20px */  ;
    line-height: 1.75rem /* 28px */ ;
}

div.navMenu ul li {
    padding-left: 0.5rem /* 8px */;
    padding-right: 0.5rem            /* 8px */        ;
    
    
}

ul.links li:hover {
    text-decoration-line: underline;
}

ul.links li.button {
    background-color: rgba(226, 92, 30, 0.644);
        border-color:  #64748b      ;
    border-width: 2px;
    font-weight: 900;
    font-style: italic;
    cursor: pointer;
    color: black;
    Color Means Text Color;
}



ul.links li.button:hover {
    text-decoration-line: none;
    
        background-color: #008b8b;    ;
    
        color: #ffffff 
        ;
    

}

.headerText {
    grid-column: span 2 / span 2;
    text-align: center;
    font-size: 6rem;
    
    @media (min-width: 768px) {
        font-size: 8rem;
        
    }
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    border-bottom-width: 1px;
    border-top-width: 1px;
    border-color: black;
    justify-content: space-between;
    font-weight: 900;
}

.bioText {
    font-size: 1.5rem;
}



.cta {
    border-color: black
        /* #64748b */
    ;
    background-color:rgba(226, 92, 30, 0.644) ;
    border-width: 2px;
    padding-left: 1.25rem
        /* 20px */
    ;
    padding-right: 1.25rem
        /* 20px */
    ;
    padding-top: 0.5rem
        /* 8px */
    ;
    padding-bottom: 0.5rem
        /* 8px */
    ;
    cursor: pointer;
    font-size: 1.5rem
        /* 16px */
    ;
    text-align: center;
    font-weight: 900;
}

.cta:hover {
    background-color:#008b8b ;
        /* #64748b */
    ;
    color: white;
}

.serviceCTA {
    margin: auto;
    text-align: center;
    align-self: self-end;
    grid-row-end: 5;
    align-self: end;
}

main div.bioSection {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4rem  /* 40px */;
}

main div.bioSection > * {
    grid-column: span 1 / span 1;
    height: 100%;
    justify-content: center;
    display: grid;
    grid-auto-flow: row;
    font-size: 1.875rem/* 30px */;
      /* 36px */    ;
}

div.bioSectionTitle {
    font-size: 3.75rem;
    font-weight: 700;
}

.bioSectionTitle + div {
    font-size: 2.25rem /* 30px */;
    font-weight: 600;
}

main div.bioSection>div:nth-child(1) {
    font-size: 2.25rem /* 36px */;
    height: auto;
}

main div.bioSection > div > img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    grid-column: span 1 / span 1;
}

nav.mobile {
    --tw-border-opacity: 1;
        border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
            /* #e5e7eb */
        ;
    --tw-bg-opacity: 1;
        background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
            /* #f9fafb */
        ;
    grid-column: span 2 / span 2;
}

.servicesTitle {
    font-size: 3.75rem;
    font-weight: 700;
    display: grid;
    grid-area: title;
    grid-column: 1 / 5;
    grid-row-start: 1;
}

.firstSection {
    display: grid;
    padding-top: 1.25rem /* 20px */;
    padding-bottom: 2.5rem /* 40px */;
    margin-top: 5rem;
    justify-content: space-between;
    vertical-align: bottom;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-rows: repeat(5, auto); */
    width: 100%;
    /* max-height: 80dvh; */
}

.servicesTitle ~ div {
    height: 100%;
    text-align: center;
    display: grid;
    grid-template-rows: repeat(4, auto); 
    row-gap: 10dvh;
    margin-top: 0rem;
    /* column-gap: 20px; */
    border-color: black;
    /* border-width: 1px; */
    /* background-color: azure; */
    /* align-content: space-between; */
}

.firstSection picture {
    margin-top: 0rem;
    width: 100%;
}



.servicesTitle ~ div div {
    font-size: 1.25rem;
    margin-inline: 2rem;
    /* place-self: end center; */
    
}

.servicesTitle~div div:not(.serviceCTA) {
    text-align: left;
    margin-top: 0;
    align-self: start;
}

.firstSection img {
    margin-top: 0;
    /* border-width: 1px; */
    border-color: brown;
    object-fit: fill;
}

.firstSection h1 {
    font-size: 2rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    line-height: 2.2rem;
    font-weight: 900;
}

footer {
    background-color: darkcyan;
    margin-top: 5rem;
    gap: 1rem;
    width: 100%;
    font-size: 3rem;
    text-align: center;
}

.footerTitle {
    grid-area: footerTitle;
    font-size: 8rem;
}

footer .container {
    display: grid;
    grid-template-areas: '. . .' 'footerTitle footerTitle footerTitle';
    grid-template-columns: 1fr 3fr 1fr;
    
}

footer .siteMap {
    margin-right: 0rem;
    margin-left: 0rem;
}

footer .links {
    display: flex;
    /* grid-template-columns: auto auto;  */
    /* row-gap: 1rem; */
    /* max-height: 10dvh; */
    /* object-fit: contain; */
    margin-right: 0rem;
    margin-left: 0rem;
    align-content: start;
    align-items: start;
    padding-left: 0rem;
}
/* Line up side by side */
footer img {
    cursor: pointer;
    max-height: 7dvh;
    object-fit: fill;
    
}

footer .cta {
    color: black;
    border-width: 0;
    font-size: 3rem;
}

.footerCTA {
    text-decoration: underline;
}

.footerCTA:hover {
    text-decoration: underline;
    background-color: none;
    color: white;
}

footer a {
    margin: 0rem;
}

footer li {
    font-size: 1.5rem;
    text-align: right;
}

footer li:hover {
    text-decoration: underline;
    color: white;
}