:root{
    --blue: #0038ff;
    --black: #15151c;
    --pink: #ff22b4;
    --neongreen: rgb(158, 255, 11);
    --page-color: #f5f5f5;
    --heading-font: Buenard, Montsserat, serif;
    --body-font: Futura, Helvetica, sans-serif;
    --highlight: rgba(255, 34, 180, 0.3);
}

* {
    box-sizing: border-box;
}
a {
    text-decoration: none;
    margin-block: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0px;
}
header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 10;
}
main {
    position: relative;
    width: 100%;
    background-color: var(--page-color);
    z-index: 1;
}
ol, ul {
    font-family: var(--body-font);
    font-weight: 300;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}
ol li {
    margin-bottom: 8px;
}
blockquote {
    border-left: 1px var(--black) solid;
    margin: 1vh 2vw 1vh 4vw;
    padding-left: 2vw;
    color: var(--black);
    font-family: var(--heading-font);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
}

.highlight {
    background-color: var(--highlight);
}
.greenlight {
    background-color: rgba(158, 242, 32, 0.8);
}
.bold {
    font-weight: 400;
}
.blue {
    color: var(--blue);
}
.black {
    color: var(--black);
}
.white {
    color: white;
}
.neongreen {
    color: var(--neongreen);
}
.pink {
    color: var(--pink);
}
.test {
    color: rgb(89, 89, 89);
}
h1 { /*big blue heading*/
    color:var(--blue);
    font-family: var(--heading-font);
    font-size: 6rem;
    font-weight: bold;
    line-height: .9em;
    margin-top: 1vh;
    margin-bottom: 0vh;
}
h2 { /*bigger black subheading*/
    color:var(--black);
    text-align: center;
    font-family: var(--heading-font);
    font-size: 3.5rem;
    font-weight: bold;
    margin: 0px;
}
h3 { /*smaller black heading*/
    color:var(--black);
    font-family: var(--heading-font);
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: bold;
    margin-block: 0;
    margin-bottom: 0em;
}
h4 { /*small black heading*/
    color:var(--black);
    font-family: var(--heading-font);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: .20em;
}
h5 { /*big 5rem heading*/
    font-family: var(--heading-font);
    font-size: 5rem;
    font-weight: bold;
    line-height: 1em;
    margin-top: 1vh;
    margin-bottom: 0vh;
}
h6 { /*futura heading*/
    color:var(--black);
    text-align: center;
    font-family: var(--body-font);
    font-size: 2rem;
    font-weight: 400;
    margin: 0px;
}
p1 { /*black header p*/
    color: var(--black);
    font-family: var(--body-font);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 2.5rem;
    margin-top: 1em;
}
p2 { /*black body desc. p*/
    color: var(--black);
    font-family: var(--body-font);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 2rem;
    margin-top: .5rem;
    margin-bottom: 1rem;
}
.spacier {
    line-height: 1.9em;
}
p3 { /*black body text p*/
    color: var(--black);
    font-family: var(--body-font);
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.7em;
}
p4 { /*black body minor text p*/
    color: var(--black);
    font-family: var(--body-font);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
}
p5 { /*black small desc text p*/
    color: var(--black);
    font-family: var(--body-font);
    font-size: .8rem;
    font-weight: 300;
    line-height: 1.2rem;
}
.navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--blue);
    padding: 2vh 4vw;
}
.spin-logo img {
    object-position: center;
    transition: transform 400ms;
}
.spin-logo img:hover {
    transform: translate(2rem) rotate(180deg);
}
.navbarnav a:link, .navbarnav a:visited {
    font-family: var(--body-font);
    font-size: 1rem;
    font-weight: 400;
    color: white;
    transition: ease-in-out 300ms;
    padding: 1rem;
}
.navbarnav a:hover, .navbarnav a:active {
    text-decoration: underline;
    color: var(--pink);
}
.current {
    text-decoration: underline;
    color: white;
}

.page-header {
    position: relative;
    padding: 12vh 4vw;
    display: flex;
    flex-direction: row;
    gap: 4vw;
}
.lined-paper {
    position: relative;
    background-image: url(images/lined-paper-bg.png);
    background-color: rgba(256, 256, 256, 0.8);
    background-blend-mode: overlay;
    background-position: left top; 
    background-repeat: repeat-y; 
    background-size: cover; 
    background-attachment: scroll, scroll;
}
.top-left {
    position: absolute;
    top: 8vh;
    left: 4vw;
    height: 20%;
    width: auto; 
}
.bottom-right {
    position: absolute;
    bottom: 4vh;
    right: 5vw;
    height: 30%;
    width: auto; 
}
.lined-content {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    margin: 16vh 12vw;
    z-index: 1;
}
.about-me {
    display: flex;
    flex-direction: column;
    gap: 0rem;
    z-index: 1;
    margin: -2vh 0vw;
    padding-top: 0vh;
    padding-bottom: 2vh;
}
.mypic {
    object-fit: contain;
    width: 25vw;
    height: auto;
}
.smaller {
    height: 15%;
    width: auto;
}

.proj-header {
    position: relative;
    padding: 14vh 4vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 78vh;
}
.proj-header#walkytalky {
    background-image: url(images/walkytalky/wt-header.png);
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
}
.proj-header#studyspace {
    background-color: #ffebb8;
}
.proj-header#snoozehood {
    background-color: #e0e1f1;
}
.proj-header#sigmastore {
    background-image: url(images/sigmastore/Alpha\ Beta-Recruitment\ IG\ Promo\ PS3v.jpg);
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: overlay;
    background-position: 50% 38%; 
    background-repeat: no-repeat; 
    background-size: cover;
}
/*.proj-header#sigmastore .proj-hero1 {
    backdrop-filter: blur(16px);
}*/
.proj-header#happyday {
    background-image: url(images/happyday/girlllllll.png);
    background-color: rgba(0, 0, 0, 0.3);
    background-blend-mode: overlay;
    background-position: 50% 55%; 
    background-repeat: no-repeat; 
    background-size: cover;
}
.proj-header#dilloday {
    background-image: url(images/dilloday/dillo\ isolated.png);
    background-color: #0c0520;
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-size: 40%;
}
.proj-header#fouryears {
    background-image: url(images/4years/Alice2.jpg);
    background-color: rgba(0, 0, 0, 0.2);
    background-blend-mode: overlay;
    background-position: 50% 35%; 
    background-repeat: repeat-x; 
    background-size: cover;
}
.proj-header#fotos {
    background-image: url(images/IMG_0891.PNG);
    background-color: rgba(255, 255, 255, 0.8);
    background-blend-mode: overlay;
    background-position: 50% 10%; 
    background-repeat: no-repeat; 
    background-size: cover;
}
.proj-header#pin {
    background-color:rgb(210, 55, 51);
}
.proj-hero1 {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    max-width: 50%;
    gap: 4vh;
    padding: 2vh 2vw;
    border-radius: 1rem;
}
.proj-hero1 p4 {
    margin-top: -2vh;
}
.wider {
    max-width: 70%;
}
.proj-hero2 {
    display: flex;
    flex-direction: row;
    gap: 1vw;
    max-width: 50%;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}
.proj-hero2 img {
    max-width: 50%;
    height: auto;
    object-fit: contain;
}
.proj-hero3 {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
}
.proj-hero3 ol {
    margin-left: -6vw;
    padding-top: 2vh;
}
.proj-hero3 a:link, .proj-hero3 a:visited {
    color: var(--pink);
}
.page-body {
    display: flex;
    flex-direction: column;
    gap: 4vh;
    margin: auto;
    padding: 12vh 18vw 14vh 18vw;
}
.subheading{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    object-fit: fill;
    margin: 0 0 1vh 0;
}
.underline-png {
    align-self: stretch;
    width: 100%;
    height: 15px;
    margin-top: -8px;
    margin-left: 0;
    margin-right: 0;
}
ul.work {
    list-style: none;
}
.work a:link, .work a:active{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    margin-bottom: 8vh;
    transition: ease-in-out 400ms;
}
/*.work a:hover {
    opacity: 0.8;
}*/
.project-thumbnail {
    border-radius: 1rem;
    border: #15151c 1.5px solid;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: ease-in-out 200ms;
}
.work a:hover .project-thumbnail {
    box-shadow: 10px 10px 0px gray;
}
.project-description {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    height: 100%;
}
.skills-wrap {
    display: flex;
    flex-flow: row wrap;
    gap: 1vw;
    max-width: 100%;
}
.skillbtn {
    font-family: var(--body-font);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
    color: var(--black);
    background-color: white;
    border-radius: 1rem;
    border: 1px var(--black) solid;
    width: max-content;
    padding: .5vh 1vw;
}
.title-arrow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2vw;
    margin-top: 1vh;
}
.title-arrow img {
    object-fit: contain;
    width: 20%;
    height: auto;
    transition: transform 400ms;
}
.work a:hover .title-arrow img{
    transform: translate(2rem);
}
.other-work {
    display: flex;
    flex-flow: row;
    gap: 8vw;
} 
.more {
    width: 100%;
}
.work.more a {
    display: flex;
    flex-direction: column;
    gap: 2vh;
    margin-bottom: 8vh;
}
.proj{
    display: grid;
    grid-template-columns: 10vw auto;
    column-gap: 6vw;
    grid-auto-rows: auto;
    row-gap: 8vh;
    padding: 12vh 12vw 16vh 12vw;
}
.testing {
    display: grid;
    row-gap: 6vh;
    padding: 0;
    justify-items: stretch;
    justify-self: left;
}
ul.proj-nav  {
    list-style: none;
    position: sticky;
    top: 22vh;
    height: min-content;
    width: 100%;
    margin-left: -1rem;
    padding: 0 1vw;
    border-left: 1px #000000 solid;
}
.proj-nav a:link, .proj-nav a:visited {
    font-family: var(--body-font);
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 2rem;
    color: var(--black);
    transition: ease-in-out 300ms;
}
.proj-nav a:focus, .proj-nav a:hover, .proj-nav a:active {
    color: var(--blue) !important;
    text-decoration: underline !important;
}
.proj-write .subheading {
    scroll-margin-top: 16vh;
}
.proj-deets {
    grid-column: 1/ span 2;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 2vh 8vw 4vh 8vw;
    border-radius: 1rem;
    border: #15151c 1px solid;
}
.facts {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    column-gap: 2vw;
    margin: 0 -4vw;
    padding: 4vh 2vw 4vh 4vw;
    border-radius: 1rem;
    border: #15151c 1px solid;
    align-items: center;
    justify-content: space-between;
}
.facts ul {
    color: var(--black);
    font-family: var(--body-font);
    font-size: 1rem;
    line-height: 1.5em;
    align-self: flex-end;
}
.facts img {
    margin: 0 1vw 1vh 0;
}
.proj-deets-sub {
    display: flex;
    flex-direction: column;
    list-style: none;
    align-items: center;
    gap: 0rem;
}
.proj-write {
    display: flex;
    flex-flow: column;
    gap: 1rem;
    padding: 0vh 6vw 0vh 6vw;
    align-items: flex-start;
    align-self: stretch;
    /*padding: 0vh 8vw;*/
}
.bare-graphic {
    display: flex;
    flex-flow: row;
    gap: 2vw;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: fit-content;
}
.rokugrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-rows: auto;
    column-gap: 1vw;
    row-gap: 1.5rem;
    align-items: flex-start;
    width: 100%;
}
.rokugrid img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.onespantwo {
    grid-column: 1 / span 2;
}
.twospantwo {
    grid-column: 2 / span 2;
}
.twospanfour {
    grid-column: 2 / span 4;
}
.twospanfour ul {
    list-style-type: none;
}
.threespantwo {
    grid-column: 3 / span 2;
}
.fourspantwo {
    grid-column: 4 / span 2;
}
.fivespantwo {
    grid-column: 5 / span 2;
}
.onespanthree {
    grid-column: 1 / span 3;
}
.fourspanthree {
    grid-column: 4 / span 3;
}
.onespanfour {
    grid-column: 1 / span 4;
}
.threespanfour {
    grid-column: 3 / span 4;
}
.onespansix {
    grid-column: 1 / span 6;
}
#timelinepng {
    overflow-x: scroll;
}
#v2pdf {
    width: 100%;
    height: 60vh;
    align-items: flex-start;
    overflow-y: scroll;
}
#v2pdf img {
    width: 100%;
    object-fit: contain;
}
/*
.outlined-graphic {
    display: flex;
    flex-flow: row;
    margin: 1vh 0vw;
    padding: 4vh 2vw 5vh 2vw;
    gap: 2vw;
    border-radius: 1rem;
    border: var(--black) 1px solid;
    align-content: space-around;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
}
*/
.outlined-graphic {
    display: grid;
    padding: 4vh 2vw 5vh 2vw;
    grid-template-columns: 48% 48%;
    grid-auto-rows: 1fr;
    column-gap: 2vw;
    row-gap: 2vh;
    border-radius: 1rem;
    border: var(--black) 1px solid;
    justify-content: center;
    justify-items: center;
    align-items: flex-start;
    width: 100%;
    height: fit-content;
}
.figure-container, .figure-container a:link, .figure-container a:visited {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-height: fit-content;
    width: fit-content;
    align-items: flex-start;
    overflow-wrap: break-word;
    transition: ease-in-out 200ms;
}
.figure-container a:hover {
    opacity: 0.9;
}
.figure-container img{
    width: 100%;
    max-height: 52vh;
    object-fit: contain;
}
.single {
    grid-column: 1 / span 2;
}
.okii img {
    width: auto;
    max-height: 65vh;
    object-fit: contain;
}
.chisai img{
    width: auto;
    height: 100%;
    object-fit: contain;
}
.bruh img{
    width: 50%;
    height: auto;
}
.user-pro {
    display: grid;
    grid-template-columns: min-content 2fr 1fr 2fr;
    grid-template-rows: min-content .5fr .5fr;
    gap: 1rem;
    padding: 3vh 3vw 4vh 3vw;
}
.user-pro img {
    grid-column: 1 / span 1;
    grid-row: 1 / span 3;
    align-self: center;
    padding-right: 1vw;
    align-items: flex-start;
}
.user-pro a {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    justify-self: stretch;
    align-self: center;
    padding: 0;
}
#title {
    grid-column: 2 / span 3;
    grid-row: 1 / span 1;
    justify-self: left;
}
#attr {
    grid-column: 2 / span 1;
    grid-row: 2 / span 2;
    align-self: flex-start;
    justify-self: left;
}
#arrows {
    grid-column: 3 / span 1;
    grid-row: 2 / span 2;
    display: flex;
    flex-direction: column;
    padding: 7vh 0 5vh 0;
    align-items: stretch;
    justify-content: space-between;
    height: 100%;
}
#chall {
    grid-column: 4 / span 1;
    grid-row: 2 / span 2;
    justify-self: left;
}
#needs {
    grid-column: 3 / span 2;
    grid-row: 2 / span 2;
    justify-self: left;
}
#flora-desc {
    grid-column: 2 / span 3;
    grid-row: 1 / span 1;
    justify-self: left;
}
#criteria {
    grid-column: 1 / span 2;
    grid-row: 2 / span 2;
    justify-self: left;
}
#polar {
    grid-column: 3 / span 2;
    grid-row: 2 / span 2;
    justify-self: left;
    object-fit: contain;
    width: min-content;
}
#slidebyslide {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 1vw;
}
#pt1-2 a:link, #pt1-2 a:visited, .facts a:link, .facts a:visited {
    color: var(--blue);
}
#pt1-2 a:hover, .facts a:hover {
    color: var(--black);
}
.outlined-graphic ol{
    color: var(--black);
    font-family: var(--body-font);
    font-size: .8rem;
    font-weight: 300;
}

.slide {
    min-height: auto;
    max-height: 72vh;
}
.carousel-indicators [data-bs-target] {
    width: 20px;
    height: 4px;
}
.carousel-inner {
    height: 100%;
    background-color: white;
}
.carousel-item {
    background-repeat: repeat-x;
    background-position: 50%;
    background-size: contain;
}
#slidee3 {
    background-image: url(images/sigmastore/Alpha\ Beta-Recruitment\ IG\ Promo\ PS3v.jpg);
}
#slidee7 {
    background-image: url(images/sigmastore/Alpha\ Beta-Recruitment\ IG\ Promo\ PS7v.jpg);
    background-position: 0%;
}
#slidee8 {
    background-image: url(images/sigmastore/Alpha\ Beta-Recruitment\ IG\ Promo\ PS8v.jpg);
    background-position: 40% 100%;
}
#slidee14 {
    background-image: url(images/sigmastore/Alpha\ Beta-Recruitment\ IG\ Promo\ PS14v.jpg);
}
.clear {
    opacity: 0;
}
.btm-pic {
    grid-column: 1 / span 2;
    align-self: center;
    justify-self: center;
}
.btm-pic img{
    object-fit: contain;
    max-width: 20vw;
    height: 100%;
}

section.photos {
    display: flex;
    flex-direction: column;
    gap: 4vh;
    padding: 6vh 4vw 16vh 4vw;
    align-items: center;
}
section h3 {
    scroll-margin-top: 16vh;
}
.photos a {
    position: sticky;
    top: 16vh;
    color: var(--page-color);
    font-family: var(--body-font);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5rem;
    width: fit-content;
    padding: 1vh 1vw;
    align-self: flex-start;
    border-radius: 1rem;
    backdrop-filter: blur(5px);
}
.mason {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    padding-bottom: 12vh;
    gap: 1vw;
}
.smason {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.mason-col {
    display: flex;
    flex-direction: column;
    gap: 2vh;
} 

footer {
    position: sticky;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}
.footerbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--blue);
    margin: auto;
    padding: 6vh 5vw 6vh 4vw;
}
.navbarnav#footer {
    display: flex;
    flex-direction: column;
}

.left-aligned {
    text-align: left;
    align-items: flex-start;
    align-self: flex-start;
    justify-content: flex-start;
}
.centered {
    text-align: center;
}

@media (max-width: 992px) {
    h1 { /*big blue heading*/
        font-size: 5rem;
        line-height: .9em;
    }
    h2 { /*bigger black subheading*/
        font-size: 3rem;
    }
    h3 { /*smaller black heading*/
        font-size: 2rem;
        line-height: 1.25em;
    }
    h4 { /*small black heading*/
        color:var(--black);
        font-family: var(--heading-font);
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: bold;
        margin-top: 1rem;
        margin-bottom: .20em;
    }
    h5 { /*big 5rem heading*/
        font-size: 4rem;
    }
    p1 { /*black header p*/
        font-size: 1.25rem;
        line-height: 1.5em;
    }
    p2 { /*black body desc. p*/
        color: var(--black);
        font-family: var(--body-font);
        font-size: 1.25rem;
        font-weight: 300;
        line-height: 2rem;
        margin-top: 0rem;
    }
    p3 { /*black body text p*/
        color: var(--black);
        font-family: var(--body-font);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.75rem;
    }
    p4 { /*black body minor text p*/
        color: var(--black);
        font-family: var(--body-font);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5rem;
    }
    p5 { /*black small desc text p*/
        color: var(--black);
        font-family: var(--body-font);
        font-size: .8rem;
        font-weight: 300;
        line-height: 1.2rem;
    }
    .facts {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .facts img {
        width: 80%;
    }
    .work a:link, .work a:active {
        display: flex;
        flex-direction: column;
        gap: 4vh;
    }
    .other-work {
        display: flex;
        flex-flow: column;
        gap: 4vh;
    }
    .work.more a{
        gap: 2vh;
        margin-bottom: 6vh;
    }
    .project-thumbnail {
        width: auto;
        height: auto;
    }
    .title-arrow {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2vw;
        margin-top: 1vh;
        margin-bottom: 1vh;
    }
    .proj-header {
        position: relative;
        gap: 2vh;
        padding: 8vh 4vw 8vh 4vw;
        justify-content: space-between;
        height: 64vh;
    }
    .proj-hero1 {
        display: flex;
        flex-direction: column;
        align-content: space-between;
        max-width: 50%;
        gap: 4vh;
        padding: 2vh 2vw;
        border-radius: 1rem;
    }
    .wider {
        max-width: 100%;
    }
    .proj-hero1 p4 {
        margin-top: -2vh;
    }
    .proj-hero2 {
        display: flex;
        flex-direction: row;
        gap: 1vw;
        max-width: 50%;
        height: 100%;
        align-items: center;
        justify-content: flex-end;
        justify-self: flex-end;
    }
    .proj-hero2 img {
        width: 30%;
        height: auto;
        object-fit: contain;
    }
    .proj{
        display: grid;
        grid-template-columns: vw auto;
        column-gap: 6vw;
        grid-auto-rows: auto;
        row-gap: 8vh;
        padding: 10vh 8vw 12vh 8vw;
    }
    .proj-nav a:link, .proj-nav a:visited {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .proj-write {
        padding: 0vh 3vw 0vh 3vw;
    }
    #v2pdf {
        height: 43vh;
    }
}

@media (max-width: 576px) { 
    h1 { /*big blue heading*/
        font-size: 3.75rem;
        font-weight: bold;
        line-height: 0.9em;
        margin-top: 1vh;
        margin-bottom: 0vh;
    }
    h2 { /*bigger black subheading*/
        font-size: 2.5rem;
        font-weight: bold;
        margin: 0px;
    }
    h3 { /*smaller black heading*/
        font-size: 1.5rem;
        line-height: 1.25em;
    }
    h4 { /*small black heading*/
        font-size: 1.5rem;
        line-height: 1.25em;
        margin-top: 1rem;
        margin-bottom: .20em;
    }
    h5 { /*big 5rem heading*/
        font-family: var(--heading-font);
        font-size: 4rem;
        font-weight: bold;
        line-height: 1em;
        margin-top: 1vh;
        margin-bottom: 0vh;
    }
    p1 { /*black header p*/
        color: var(--black);
        font-family: var(--body-font);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5em;
        margin-top: 1em;
    }
    p2 { /*black body desc. p*/
        color: var(--black);
        font-family: var(--body-font);
        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5em;
        margin-top: 0em;
    }
    .spacier {
        line-height: 1.5em;
    }
    p4 { /*black body text p*/
        color: var(--black);
        font-family: var(--body-font);
        font-size: 0.8rem;
        font-weight: 300;
        line-height: 1.2em;
    }
    .navbarnav a{
        padding: 0;
    }
    .page-header {
        position: relative;
        padding: 6vh 4vw;
        display: flex;
        flex-direction: column;
        gap: 2vw;
    }
    .lined-paper {
        background-position: center;
        background-size:contain;
    }
    .top-left, .bottom-right {
        height: 15%;
        width: auto;
    }
    .smaller {
        height: 10%;
        width: auto;
    }
    .mypic {
        width: 50vw;
        height: auto;
        align-self: center;
    }
    .facts {
        display: flex;
        flex-direction: column;
        gap: 0vw;
        padding: 2vh 4vw 2vh 4vw;
        align-items: flex-start;
    }
    .facts img {
        align-self: center;
        width: 50%;;
    }
    .facts ul {
        align-self: flex-start;
    }
    .page-body {
        gap: 4vh;
        margin: auto;
        padding: 6vh 8vw 8vh 8vw;
    }
    .work a:link, .work a:active {
        gap: 1vh;
    }
    .other-work {
        display: flex;
        flex-flow: column;
        gap: 0vh;
    }
    .work.more a{
        gap: 1vh;
        margin-bottom: 6vh;
    }
    .title-arrow img{
        display: none;
    }
    .proj-header {
        position: relative;
        display: flex;
        flex-flow: column-reverse;
        gap: 2vh;
        padding: 6vh 4vw 4vh 4vw;
        align-items: flex-start;
        height: fit-content;
    }
    .proj-hero1 {
        max-width: 100%;
        height: min-content;
        padding: 0;
        gap: 1vh;
    }
    .proj-hero1 p4 {
        margin-top: 1vh;
    }
    .proj-hero2 {
        display: flex;
        flex-direction: row;
        gap: 1vw;
        width: 100%;
        height: auto;
        align-items: center;
        justify-content: flex-start;
    }
    .proj-hero2 img {
        width: 50%;
        height: auto;
        object-fit: contain;
    }
    .proj{
        display: flex;
        flex-direction: column;
        padding: 6vh 4vw 8vh 4vw;
        gap: 4vh;
    }
    .testing {
        display: grid;
        row-gap: 4vh;
        padding: 0;
        justify-items: flex-start;
    }
    ul.proj-nav  {
        display: none;
    }
    .proj-deets {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: space-around;
        gap: 1vh;
        padding: 1vh 4vw 3vh 4vw;
        border-radius: 1rem;
        border: #15151c 1px solid;
        align-self: center;
    }
    .proj-deets-sub {
        display: flex;
        flex-direction: column;
        list-style: none;
        align-items: center;
        gap: 0rem;
    }
    .proj-write {
        display: flex;
        flex-flow: column;
        gap: 1em;
        padding: 0vh 2vw 0vh 2vw;
        align-items: flex-start;
        align-self: stretch;
        /*padding: 0vh 8vw;*/
    }
    .outlined-graphic {
        padding: 2vh 1vw 2vh 1vw;
        column-gap: 1vw;
        row-gap: 1vh;
    }
    .figure-container img{
        width: 100%;
        max-height: 25vh;
        object-fit: contain;
    }
    .user-pro {
        display: grid;
        grid-template-columns: minmax(min-content, 12em) minmax(min-content, 5em) minmax(min-content, 12em);
        grid-template-rows: auto auto auto;
        grid-auto-rows: auto;
        column-gap: 1vw;
        row-gap: 1vh;
        padding: 2vh 2vw 2vh 2vw;
    }
    .user-pro img {
        grid-column: 1 / span 3;
        grid-row: 1 / span 1;
        align-self: center;
        padding: 0;
    }
    .user-pro a {
        grid-column: 2 / span 1;
        grid-row: 1 / span 1;
        align-items: center;
        align-self: center;
        padding: 0;
    }
    #title {
        grid-column: 1 / span 3;
        grid-row: 2 / span 1;
        align-items: flex-start;
    }
    #attr {
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;
        align-self: flex-start;
    }
    #arrows {
        grid-column: 2 / span 1;
        grid-row: 3 / span 1;
        display: flex;
        flex-direction: column;
        padding: 7vh 0 4vh 0;
        align-items: stretch;
        justify-content: space-between;
    }
    #arrows img {
        height: 2vh;
    }
    #chall {
        grid-column: 3 / span 1;
        grid-row: 3 / span 1;
        align-self: flex-start;
    }
    #needs {
        grid-column: 2 / span 2;
        grid-row: 3 / span 1;
        justify-self: left;
    }
    #flora-desc {
        grid-column: 1 / span 3;
        grid-row: 2 / span 1;
        align-self: flex-start;
    }
    #criteria {
        grid-column: 1 / span 3;
        grid-row: 3 / span 1;
        align-self: flex-start;
    }
    #polar {
        grid-column: 1 / span 3;
        grid-row: 4 / span 1;
        align-self: flex-start;
        object-fit: contain;
        width: 100%;
    }
    #polar img {
        object-fit: contain;
        width: 100%;
        height: auto;
    }
    #labeleditems {
        display: flex;
        flex-direction: column;
    } 
    #v2pdf {
        height: 27vh;
    }
}