/* code section ================= General styling =================  */
*{
    box-sizing: border-box;
    margin:0;
    padding:0;
}

::selection {
    background: #ff9ce0;
    background: #C0A4FA;
    /* color: black; */
    background: #C3ADF1;
    background: #8D6BED;
    color: white;

}

/* declaring global css varibales */
:root{
    --main-bodycopy-color: #000;
    --lighter-black: #212121;
    --secondary-bodycopy-color: #737373;
    --navbar-text-color: white;
    --navbar-color: #16874F;
    --main-bg-color: #ecebeb;
    --soft-accent-color:#b1b1b1;
    --primary-color: #16874F;
    --link-color: #fb5353;
    --link-hover-color: #00b649;
    --selection-color: #8D6BED;
    --card-bg-color: white;
}


.main-wrapper{
    display: flex;
    flex-direction:column;
    min-height: 100vh;
}


body{
    background-color: var(--main-bg-color);
}

img{
    display: block;
    height: auto;
    max-width:100%;
}


a{
    font-family: "abc-diatype-round", sans-serif;
    color: var(--link-color);
    word-break: break-word;
    text-decoration:underline;
}

a:hover, a:focus{
    color:var(--link-hover-color);
    text-decoration:underline;
}

p{
    font-family: "abc-diatype-round", sans-serif;
    color: var(--main-bodycopy-color);
    font-size:0.85rem;
    font-weight: 300;
}

.feel-free-points p{
    color: var(--lighter-black);
    font-size:0.89rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
}

.feel-free-points a{
color: var(--secondary-bodycopy-color);
color: var(--lighter-black);
font-weight: 400;
}


.feel-free-points a:hover, .feel-free-points a:focus {
color: var(--selection-color);

}


h1{
    font-family: "abc-diatype-round",sans-serif;
    color: var(--secondary-bodycopy-color);
    font-weight: 400;
}

h2{
    font-family: "abc-diatype-round",sans-serif;
    color: var(--secondary-bodycopy-color);
    font-weight: 300;
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 1.2rem;
}

h3{
    font-family: "abc-diatype-round",sans-serif;
    color: var(--secondary-bodycopy-color);
    font-weight: 300;
    font-style: italic;
    font-size: 1rem;
    /* margin-top: 2rem; */
    margin-bottom: 0.6rem;
}

h4{
    font-family: "abc-diatype-round",sans-serif;
    color: var(--main-bodycopy-color);
    font-weight: 500;
    font-style: normal;
    font-size: 0.95rem;

}

h5{
    font-family: "abc-diatype-round",sans-serif;
    color: var(--main-bodycopy-color);
    font-weight: 400;
    font-style: italic;
    font-size: 0.95rem;
    margin-top: 0.6rem;

}




/* mobile styling of nav section */
.nav-section{
    background-color: var(--navbar-color);
    color: var(--navbar-text-color);
    display : flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.7rem;
    z-index: 1;

}

.my-brand{
    display:flex;
    flex-direction: row-reverse;
    align-items: center ;
}


/* the star means apply these to all elements within the .my-brand-link */
.my-brand-link,
.my-brand-link *{ 
    text-decoration: none;
    color:inherit;
}

.my-brand-link:hover,
.my-brand-link:hover *{ 
    text-decoration: none;
    color:inherit;
}


.logotype{
    display: none;
}

.short-logotype{
    display:block;
    font-weight: 300;
    font-size: 1.85rem;
    color: var(--navbar-text-color);
    text-decoration: none;
    margin:0.2rem;
    margin-top: 0.4rem;
    padding:0;
}

.smiley-logo{
    width:1.7rem;
    height:auto;
}

.my-brand a:hover, .my-brand a:focus{
    color: var(--navbar-text-color);
    text-decoration: none;
}

nav{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

nav a{
    display: block;
    font-size: 1rem;
    font-weight: 300;
    color: var(--navbar-text-color);
    margin: 0 0.5rem;
    text-decoration: none;

}

nav a:hover, nav a:focus{
    color: var(--navbar-text-color);
    text-decoration: underline;
}

.callout p{
    font-family: "family",sans-serif;
    /* font-family: "abc-diatype-round",sans-serif; */
    font-weight: 100;
    font-weight: 400;
    font-weight: 300;
    font-size: 1.7rem;
    word-spacing: 0.15rem;
    color: var(--lighter-black);
}

.callout{
    margin-bottom: 2.1rem;
    margin-bottom: 2.4rem;
}

main{
    flex-grow:1;

    background-color: #FBFBFB;

    /* opacity: 1;
    background-image:  linear-gradient(#EFEEEE 1.1px, transparent 1.1px), linear-gradient(to right, #EFEEEE 1.1px, #FBFBFB 1.1px);
    background-size: 23px 23px; */

    opacity: 1;
    background-image:  linear-gradient(#f3f3f3 1.1px, transparent 1.1px), linear-gradient(to right, #f3f3f3 1.1px, #FBFBFB  1.1px);
    background-size: 23px 23px;

}

.main-section{
    padding: 1.5rem 0.95rem;
}

.side-footer{
    display: none;
}

footer{
    background-color: var(--navbar-color);
    padding: 1rem;

}

footer p{
    display: block;
    color:var(--navbar-text-color);
    text-align: center;
    font-size: 0.8rem;
    font-weight: 200;
}

.space-fixer-div{
    display: none;
}



/* project page starts here */

.project-main-section{
    /* background-color: pink;
    background-color: beige; */
    /* background-color: #FBFBFB ; */
}


.project-hero-img{
    margin: 1.7rem 0;
}


.sec-divider{
    display:flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.6rem 0;
    margin-top: 2rem;
    margin-bottom: 0.7rem;
/* 
    position: sticky;
    z-index: 1;
    top:2rem; */

}


.divider-line{
    height: 1.5px;
    background-color: var(--primary-color);
    flex-grow: 1;

}


.project-sec h3{
    font-family: "abc-diatype-round",sans-serif;
    color: var(--primary-color);
    font-weight: 300;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
    margin:0;
    padding:0;
}



.section-margin-control{
    margin: 0 auto;
    /* margin-left:9.8rem; */
    /* margin-right:0; */
    max-width: 42.7rem;
    max-width: 54rem;
    /* max-width: 38.6rem; */
    /* background-color: rgb(237, 220, 123); */
    /* height: 2rem; */
}

/* .overview-grid{
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items:first baseline;
} */

.overview-subsec{
    padding: 0.9rem 0;
    padding-top:1.2rem;
    padding-bottom:0.85rem;
    padding-bottom:0.2rem;
    border-bottom: solid 0.085rem var(--soft-accent-color);
}

.project-sec h4{
    padding-bottom: 0.3rem;

}

.project-sec p{
    padding-bottom: 1rem;

}

/* .project-overview-sec p{
    padding: 0.75rem 0;
    
} */

.no-border{
    border:none;
}

/* 
.project-detail{
    margin: auto 0;
}

.project-detail p{
    max-width: 32rem;
} */




.project-sec-one-column{
    grid-template-columns: 1fr ;
    gap: 1rem;
}


.project-body-img{
    margin: 1rem 0;
    margin-top:0;
}

.make-italic{
    font-style: italic;
}




/* project cards */
.project-card{
    background-color: var(--card-bg-color);
    border: solid 0.18rem var(--navbar-color);
    border-radius: 1.8rem;
    padding:0.8rem 0.7rem;
    padding-bottom:0.55rem;

    max-width: 45rem;
}

.project-card-heading{
    display:flex;
    flex-direction: column;
    border-bottom: solid 0.1rem var(--soft-accent-color);
    border-bottom: solid 0.1rem var(--primary-color);
    margin-bottom:0.5rem;
}

.project-card-heading h3{

    font-size: 1.2rem;

    font-weight: 500;

    font-style: normal;
    color:var(--primary-color);
    margin:0;
    padding:0;
    margin-left:0.35rem;

}

.project-card-heading p{

    font-family: "family",sans-serif;

    font-size:0.75rem;

    font-size:0.8rem;

    color: var(--secondary-bodycopy-color);
    margin-bottom: 0.4rem;

    margin: 0.3rem 0;
    margin-bottom: 0.65rem;

    margin-left:0.35rem;
}

.project-card-section a{
    text-decoration: none;
}


/* .project-card:hover p, .project-card:focus p{
color:white;
}

.project-card:hover h3, .project-card:focus h3{
    color:white;
} */


.project-card:hover, .project-card:focus{
    box-shadow: 0.0rem 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-out;
    transform: scale(1.007, 1.007);
    /* background-color: var(--primary-color); */
}


.project-card-img{
    /* filter:grayscale(100%); */
    border-radius: 0.5rem;
    border-radius: 1.5rem;
    padding:0.5rem;
    padding-top:0.6rem;
    padding-bottom:0.1rem;
}


.project-card-img:hover, .project-card-img:focus{
    transition: all 0.12s ease-out;
    transform: scale(1.015, 1.015);
    /* filter:grayscale(0%); */

}


/* .card-one-column{
    grid-template-columns: 1fr ;
    gap: 1rem;
} */

.card-grid{
    grid-template-columns: 1fr ;
    gap: 1rem;
}


.video-section{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    /* gap:1rem; */
    /* background-color: orange; */
    /* background-color: black; */
    padding:1.5rem 0.9rem;
    /* padding: 1rem 0; */
    gap:4rem;
}


/* .video-section p{
    color: var(--main-bg-color);
}

.video-section h4{
    color: var(--main-bg-color);

} */

.vid-descrip{
width:90%;
margin: auto 0;
/* padding-right:1rem; */
}

/* .video-section video{
    object-fit: fill;
} */
.vid-class{
    /* flex-grow: 1; */
    z-index:20;
    width: 100%;
    /* max-width: 17rem; */
    /* height: 100%; */
    height: auto;
    object-fit: contain;
    /* display: inline-block; */
    padding:4.8%;


}

.vid-container{
    position: relative;
    width: 30%;
}

.img-overlay{
    position:absolute;
    top:0;
    left:0;
    z-index:10;
    /* width: 30%; */
    height: auto;
    /* object-fit: contain; */

}

/* .video-section p{
    flex-grow: 1;
} */

.make-it-bold{
    font-weight: 500;

}

/* .reduce-m-b p{
    margin-bottom: 0rem;
    margin-top:1.4rem;
} */

/* chnage based on viewport */
.bio-container{
    margin-top:2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    flex-direction: column-reverse;
    gap:1rem;
}


/* chnage based on viewport */
/* .bio-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap:1.7rem;
    gap:5%;
} */



.bio-img-div{
    /* background-color: lightgreen; */
    /* max-width: 25rem; */
    /* max-width: 23rem; */
}

/* .bio-img{
    max-width: 23rem;

} */

.bio-container a{
    /* color:var(--secondary-bodycopy-color); */
    color:var(--primary-color);
}

.bio-container a:hover, .bio-container a:focus {
    color:var(--selection-color);
}


.bio-p{
    /* flex-grow: 1; */
    max-width: 34.2rem;
    max-width: 36rem;
    margin-bottom: 0.5rem;
}

.contact-div a{
    display: block;
    font-family: "abc-diatype-round", sans-serif;
    color:var(--primary-color);
    font-size: 0.95rem;
    font-weight: 400;
    margin:0.6rem 0;
    margin-right: 1rem;
}


/* chnage based on viewport */
.bio-copy-div{
    display:flex;
    flex-direction: column;
    gap:1.2rem;

}