* {
    margin: 0;
    padding: 0;
}

:root {
    font-size: 12px;
}

/* For tablets (768px and up) */
@media (min-width: 768px) {
    :root {
        font-size: 14px;
    }
}

/* For desktops (1024px and up) */
@media (min-width: 1024px) {
    :root {
        font-size: 18px;
    }
}

/* For desktops (1800px and up) */
@media (min-width: 1800px) {
    :root {
        font-size: 24px;
    }
}

/*********************/
/* CUSTOM PROPERTIES */
/*********************/


:root {
    --main-color-one: #FFFAF2;
    --main-color-two: #FFC700;
    --main-color-three: #429FC1;
    --main-color-four: #82C363;
    --main-color-five: #DF5F79;
    --main-color-six: #000;
    --main-color-seven: #737377;
    --font-thin: "Josefin sans";
    --font-thick: "Rubik", sans-serif;
    --header-size: 4.5rem;
    --header-size-new: 8rem;
    --header-offset: 3rem;
}

.togreen,
.topink,
.toyellow,
.toblue,
.yellowchild,
.greenchild,
.pinkchild,
.bluechild {
    transition: .5s;
}


footer {
    padding-top: 5rem;
    background-color: var(--main-color-one);
    display: flex;
    flex-flow: row nowrap;
    font-family: var(--font-thin);
    justify-content: center;
    align-items: flex-start;
    height: 6em;
    font-size: 1rem;
    width: 100%;
    color: var(--main-color-seven);
}

footer div {
    width: 95%;
    display: flex;
    justify-content: space-between;
    flex-flow: row nowrap;
    border-top: black 1px solid;
}

footer p {
    margin-top: 1rem;
}

footer p:last-of-type {
    text-align: right;
}

footer span {
    display: block;
}

body,
main {
    background-color: var(--main-color-one);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

header {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background-color: var(--main-color-one);
    z-index: 3;
    padding-top: 1rem;
    /* managed by --header-offset below */
}

header nav {
    width: 95%;
    margin: 0 auto;
}

header ul {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    list-style: none;
    align-items: baseline;
    justify-content: flex-end;
    gap: 1.5rem;
    border-bottom: 1.5px var(--main-color-six) solid;
    font-family: var(--font-thin);
    margin: 0;
}

header ul li:first-of-type {
    font-family: var(--font-thick);
    margin-right: auto;
    font-size: 1.875rem;
}

header ul li:first-of-type:hover a {
    color: var(--main-color-four);
}

header ul li {
    margin: auto 0;
}

header ul li a {
    color: var(--main-color-six);
    text-decoration: none;
    justify-self: left;
    transition: .5s;
}


#home section:first-of-type {
    display: grid;
    column-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: .4fr 1fr 1fr;
    width: 95%;
    margin-top: 4rem;
}

#home section:first-of-type>div {
    /* make SVG size relative to this font-size */
    font-size: var(--home-h1-size, 5rem);
    grid-area: 1/1/2/2;
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
    /* baseline aligns h1 text and svg nicely */
    column-gap: 1rem;
    height: fit-content;
}

/* Make the hero SVG match the H1 height, keep intrinsic width */
#home section:first-of-type>div>svg {
    height: 1em;
    /* equals current font-size => same height as H1 */
    width: auto;
    /* don’t stretch horizontally */
    display: block;
    flex: 0 0 auto;
    align-self: center;
}

#home h1 {
    font-family: var(--font-thick);
    /* tie to the container’s font-size so SVG can match via 1em */
    font-size: inherit;
    line-height: 1;
    min-width: fit-content;
    padding-right: 1rem;
    align-self: center;
}

#home section:first-of-type>img {
    grid-area: 1 / 2 / 4 / 3;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 15px;
}

#home section:first-of-type>p {
    grid-area: 2 / 1 / 3 / 2;
    font-size: 1.2rem;
    font-family: var(--font-thin);
}

#home section:first-of-type ul {
    grid-area: 3 / 1 / 4 / 2;
    width: 100%;
    align-self: flex-end;
}

#home section:first-of-type ul li {
    list-style: none;
    font-family: var(--font-thick);
    font-size: 1.5rem;
}

#home section:first-of-type ul a {
    display: flex;
    flex-flow: row nowrap;
    justify-items: center;
    border-bottom: 1.5px var(--main-color-six) solid;
    align-items: center;
    justify-content: flex-end;
    padding: .9rem 0 .3rem 0;
    color: var(--main-color-six);
    text-decoration: none;
}

#home section:first-of-type ul a svg {
    margin-right: auto;
    margin-left: 0.5rem;
    width: 2rem;
    color: var(--main-color-six);
}

#home section:first-of-type ul a img {
    height: auto;
    width: 1.5rem;
    margin-left: 2rem;
}



#recproj {
    width: 95%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: fit-content(200px), 1fr;
}

#recproj h2,
.lineheader h2 {
    font-family: var(--font-thick);
    font-size: 2.5rem;
    width: fit-content;
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
    overflow-x: hidden;
    align-items: baseline;
    grid-area: 1 / 1 / 3 / 2;
    align-self: center;
}

#recproj>div,
.lineheader {
    margin: 8rem 0 1rem 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: 1rem;
}

#recproj>div>div,
.lineheader>div {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    grid-area: 2 / 2 / 3 / 3;
    border-top: black 1px solid;
}

#recproj h2 span,
#home section:nth-of-type(3) h2 span,
.lineheader span {
    font-family: var(--font-thin);
    width: 100%;
    font-weight: 400;
}

/* Carousel */
#recproj ul {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    flex-flow: row nowrap;
    gap: 1%;
}

/* Banner */
#recproj ul:first-of-type img {
    width: 100%;
    border-radius: 10px;
    filter: grayscale(1);
    transition: .5s;
    object-fit: cover;
    height: 100%;
}

#recworkimg li {
    transition: transform 0.5s ease;
    list-style: none;
    z-index: 2;
}

#recproj ul:last-of-type li:first-of-type {
    grid-column: 2;
}

.recfoc1 li:nth-of-type(2) {
    transform: translateX(101%);
}

.recfoc1 li:first-of-type img {
    filter: grayscale(0) !important;
    ;
}

.recfoc2 li:nth-of-type(2) img {
    filter: grayscale(0) !important;
    ;
}

.recfoc3 li:nth-of-type(3) img {
    filter: grayscale(0) !important;
    ;
}

.recfoc1 li:nth-of-type(3) {
    transform: translateX(101%);
}

.recfoc2 li:nth-of-type(3) {
    transform: translateX(101%);
}

#recproj ul:last-of-type li {
    list-style: none;
}

#recproj ul:last-of-type article,
#projtextit {
    display: flex;
    flex-flow: column nowrap;
    font-family: var(--font-thin);
    font-size: 1rem;
    justify-content: flex-end;
    height: 95%;
    align-self: center;
}

#recproj ul:last-of-type article div,
#projtextit div {
    order: -1;
    display: grid;
    grid-template-columns: .4fr 1fr;
    margin-bottom: auto;
    margin-top: .2rem;
}

#recproj ul:last-of-type article div p:first-of-type,
#recproj ul:last-of-type article div p:nth-of-type(3),
#projtextit div p:first-of-type,
#projtextit div p:nth-of-type(3) {
    color: #737373;
}

#recproj ul:last-of-type article h3,
#projtextit h3 {
    font-family: var(--font-thick);
    font-size: 1.5rem;
    margin-bottom: .5rem;
}

#recproj ul:last-of-type article a {
    color: #737373;
    display: flex;
    flex-flow: row nowrap;
    margin-top: .6rem;
    text-decoration: none;
    transition: .5s;
}

#recproj ul:last-of-type article a:hover {
    color: var(--main-color-six);
}

#recproj ul:last-of-type article a img,
#projtextit a img {
    width: 50%;
    margin-left: .4rem;
}


#home section:nth-of-type(3) {
    width: 95%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 2rem;
    height: fit-content;
    margin-top: 7rem;
}

#home section:nth-of-type(3)>div {
    border-right: solid black 1px;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

#home section:nth-of-type(3) h2 {
    font-family: var(--font-thick);
    font-size: 2.5rem;
    width: 70%;
}

#home section:nth-of-type(3) ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    list-style: none;
    column-gap: 2rem;
}

#home section:nth-of-type(3) .gtkmicon1 {
    display: grid;
    grid-template-columns: .3fr 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: .5rem;
}

#home section:nth-of-type(3) .gtkmicon2 {
    display: grid;
    grid-template-columns: .7fr .3fr;
    grid-template-rows: 1fr 1fr;
}

#home section:nth-of-type(3) .gtkmicon1>svg {
    grid-area: 1 / 1 / 3 / 2;
    height: 7rem;
}

#home section:nth-of-type(3) .gtkmicon2>svg {
    grid-area: 1 / 2 / 3 / 3;
    height: 7rem;
    margin-left: 1rem;
}

#home section:nth-of-type(3) h3 {
    font-family: var(--font-thick);
    font-size: 1.5rem;
    margin-top: 1rem;
    ;

}

#home section:nth-of-type(3) p {
    font-family: var(--font-thin);
    color: var(--main-color-seven);
    margin-bottom: 1rem;
    min-width: fit-content;
    margin-right: 0.5rem;
}

#home section:nth-of-type(3) div svg {
    display: inline-block;
    justify-self: center;
    width: 100%;
}

#home section:nth-of-type(3) div path {
    width: 100%;
}

#home section:nth-of-type(3) a div {
    display: flex;
    flex-flow: row nowrap;
    align-self: flex-end;
}


#home section:nth-of-type(4) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 5rem;
    align-items: center;
    width: 95%;
    margin-top: 8rem;
    height: 20vh;
}

#home section:nth-of-type(4) h2 {
    font-family: var(--font-thick);
    font-size: 2.5rem;
    width: fit-content;
    flex-flow: row nowrap;
    gap: 1rem;
    overflow-x: hidden;
    align-items: baseline;
    grid-area: 1 / 2 / 2 / 3;
    text-align: center;
    justify-self: center;
}

#home section:nth-of-type(4) h2 span {
    display: inline-block;
    font-family: var(--font-thin);
    font-weight: 400;
    transition: .5s;
}

#home section:nth-of-type(4) h2 span:hover {
    border-bottom: var(--main-color-five) 3px solid;
    transition: .5s;
}

#home section:nth-of-type(4)>a:first-of-type,
#contdet>a {
    font-family: var(--font-thin);
    font-size: 1rem;
    color: var(--main-color-seven);
    font-weight: 400;
    text-decoration: none;
}

#home section:nth-of-type(4)>a:first-of-type h3,
#home section:nth-of-type(4) article h3,
#contdet>a h3,
#contdet article h3 {
    font-family: var(--font-thin);
    font-size: 1rem;
    color: var(--main-color-seven);
    font-weight: 400;
    margin-bottom: .4rem;
}

#home section:nth-of-type(4)>a:first-of-type span,
#contdet>a span {
    font-family: var(--font-thick);
    font-size: 1.5rem;
    color: var(--main-color-six);
}

#home section:nth-of-type(4)>a:first-of-type div,
#contdet>a div {
    display: flex;
    flex-flow: row nowrap;
}

#home section:nth-of-type(4)>a:first-of-type div p,
#contdet>a div p {
    min-width: fit-content;
    margin-right: .4rem;
}

#home section:nth-of-type(4) article,
#contdet article {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: .1fr 1fr;
}

#home section:nth-of-type(4) article img,
#contdet article img {
    width: 3rem;
    height: auto;
    grid-area: 1 / 1 / 3 / 2;
}

#home section:nth-of-type(4) article h3,
#contdet article h3 {
    grid-area: 1 / 1 / 2 / 3;
}

#home section:nth-of-type(4) article a,
#contdet article a {
    display: grid;
    grid-template-columns: .3fr 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap: .5rem;
}

#home section:nth-of-type(4) article a span,
#contdet article a span {
    font-family: var(--font-thick);
    font-size: 1.1rem;
}

#home section:nth-of-type(4) article a div,
#contdet article a div {
    grid-area: 2 / 2 / 3 / 3;
    display: flex;
    flex-flow: row nowrap;
    column-gap: .5rem;
    align-self: flex-end;
    font-family: var(--font-thin);
    color: var(--main-color-seven);
}

#home section:nth-of-type(4) article a:first-of-type,
#contdet article a:first-of-type {
    padding-right: 1rem;
    border-right: 1px solid black;
    margin-right: 1rem;
}


#mywork section:first-of-type {
    margin-top: 7rem;
    display: flex;
    width: 95%;
    column-gap: .5rem;
    margin-bottom: -5rem;
}

#mywork h1 {
    font-family: var(--font-thick);
    font-size: 5rem;
    justify-self: left;
    min-width: fit-content;
}

#mywork section:first-of-type div {
    border-bottom: solid 1.5px var(--main-color-six);
    margin-bottom: 1rem;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

#mywork section:first-of-type p {
    font-family: var(--font-thin);
    text-align: right;
    margin-bottom: .5rem;
    font-size: 1.3rem;
}

#projtextit>div:last-of-type {
    order: 5;
    margin-bottom: 0;
    margin-right: .1rem;
}

#projtextit>div:last-of-type img {
    width: 100%;
}

#mywork section:nth-of-type(4) a {
    color: var(--main-color-six);
    text-decoration: none;
}

#mywork section:nth-of-type(3) {
    display: flex;
    column-gap: 8rem;
    height: 12rem;
    margin: 4rem 0 0 0;
    align-items: flex-end;
    width: 70%;
}

#mywork section:nth-of-type(3) svg {
    height: 60%;
}


#mywork section:nth-of-type(4) {
    width: 95%;
}

#mywork section:nth-of-type(4) ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 2rem;
}

#mywork section:nth-of-type(4)>div {
    grid-area: 1 / 1 / 2 / 3;
}

#mywork section:nth-of-type(4) li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    list-style: none;
}

#mywork section:nth-of-type(4) li>img {
    height: 16rem;
    width: 205%;
    z-index: 1;
    transition: .7s;
    transform-origin: left center;
    border-radius: 20px;
    object-fit: cover;
    filter: grayscale(1);
}

#mywork section:nth-of-type(4) li:hover>img {
    width: 100%;
    border-radius: 20;
    filter: grayscale(0);

}

#mywork section:nth-of-type(5) {
    width: 95%;
    margin-top: 8rem;
}

#mywork section:nth-of-type(5) h2 {
    font-family: var(--font-thick);
    font-size: 2.5rem;
    width: fit-content;
    flex-flow: row nowrap;
    gap: 1rem;
    overflow-x: hidden;
    align-items: baseline;
    grid-area: 1 / 2 / 2 / 3;
}

#mywork section:nth-of-type(5) h2 span {
    font-family: var(--font-thin);
    font-weight: 400;
    transition: .5s;
}

#mywork section:nth-of-type(5) ul {
    display: flex;
    flex-flow: column nowrap;
}

#mywork section:nth-of-type(5) li {
    list-style: none;
    /* Use max-height for animating open/close (height:auto/fit-content cannot animate) */
    max-height: 1.9rem;
    border-bottom: 1px solid black;
    overflow: hidden;
    margin-top: .8rem;
    transition: max-height 4s ease;
}


#mywork section:nth-of-type(5) li div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: .1fr .5fr auto;
    column-gap: 1rem;
    row-gap: .5rem;
    transition: 1s;
    padding-bottom: 1rem;
}

#mywork section:nth-of-type(5) li div p {
    font-family: var(--font-thin);
}

#mywork section:nth-of-type(5) li p:first-of-type {
    grid-area: 1/1/2/2;
    height: fit-content;
    margin-top: 2%;
}

#mywork section:nth-of-type(5) li p:nth-of-type(2) {
    grid-area: 1/2/2/3;
    height: fit-content;
    margin-top: 2%;
}

#mywork section:nth-of-type(5) li h3 {
    grid-area: 1/3/2/5;
    height: fit-content;
    font-family: var(--font-thick);
    transition: 1s;
}

#mywork section:nth-of-type(5) li svg {
    grid-area: 1/6/2/7;
    margin-top: .3rem;
    width: fit-content;
    justify-self: flex-end;
    transition: .5s;
}

#mywork section:nth-of-type(5) li img {
    grid-area: 2/1/4/3;
    width: 100%;
    height: 100%;
}

#mywork section:nth-of-type(5) li p:nth-of-type(3) {
    grid-area: 3/3/4/5;
    align-self: flex-end;
}

#mywork section:nth-of-type(5) li p:nth-of-type(4) {
    grid-area: 3/5/4/7;
    align-self: flex-end;
}

#mywork section:nth-of-type(5) .archac {
    /* Set a generous ceiling so it can expand smoothly */
    max-height: 50rem;
}

#mywork section:nth-of-type(5) .archac h3 {
    grid-area: 2/3/3/5;
    font-size: 1.5rem;
}

#mywork section:nth-of-type(5) .archac svg {
    transform: rotate(180deg);
}

#mywork section:nth-of-type(5) .archac h3.archgreen {
    color: var(--main-color-four);
}

#mywork section:nth-of-type(5) .archac h3.archyellow {
    color: var(--main-color-two);
}

#mywork section:nth-of-type(5) .archac h3.archpink {
    color: var(--main-color-five);
}

#mywork section:nth-of-type(5) .archac h3.archblue {
    color: var(--main-color-three);
}


/* About Me page layout: fill the viewport minus the fixed header */
#aboutme {
    height: calc(100svh - var(--header-offset));
    /* exact space below header */
    margin-top: var(--header-offset);
    /* sit directly under header */
    box-sizing: border-box;
    width: 100%;
    display: flex;
}

#aboutme h1 {
    position: fixed;
    top: 7.5%;
    right: 2.5%;
    font-size: 5rem;
    font-family: var(--font-thick);
    z-index: 2;
    transition: font-size 0.6s ease;
    pointer-events: none;
}


#aboutme .h1resize {
    font-size: 3rem;
}

/* About Me menu layout */
#abtmenu {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: 100%;
    /* fill #aboutme’s height */
    align-items: stretch;
    /* children stretch to full height */
    margin: 0;
    /* no stray gaps */
    overflow-y: hidden;
}

/* Per-item accent colors */
#abtmenu li:nth-child(1) {
    --hover-bg: var(--main-color-two);
}

#abtmenu li:nth-child(2) {
    --hover-bg: var(--main-color-five);
}

#abtmenu li:nth-child(3) {
    --hover-bg: var(--main-color-four);
}

#abtmenu li:nth-child(4) {
    --hover-bg: var(--main-color-three);
}

/* Item base */
#abtmenu li {
    width: 25%;
    display: flex;
    flex-flow: column nowrap;
    padding: 0 1rem;
    position: relative;
    z-index: 0;
    background: transparent;
    color: var(--hover-bg, var(--main-color-six));
    transition: transform 2s ease, color 1s ease;
    /* ← update this line */
}

#abtmenu {
    position: relative;
    z-index: 1;
}

#abtmenu li {
    will-change: transform;
}

#abtmenu li.focus-left {
    border-left: none;
    border-right: solid 1px var(--main-color-six);
}

/* Keep text black by default */
#abtmenu p {
    font-family: var(--font-thin);
    color: var(--main-color-six);
    position: fixed;
}

#abtmenu p:last-of-type {
    bottom: 7%;
}

#abtmenu h3 {
    font-family: var(--font-thick);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: var(--main-color-six);
    position: fixed;
    bottom: 0%;
}

#abtmenu li div {
    position: relative;
    /* establish stacking context */
    width: 95%;
    height: 100%;
    /* fill the li's height */
    overflow: hidden;
    /* clip the two dim SVGs while stacked */
}

#abtmenu li svg {
    position: absolute;
    /* position inside the relative div */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* precise center */
    color: inherit;
    /* enables fill="currentColor" */
    transition: color 1s cubic-bezier(0, 0.24, 0.01, 0.96);
    width: 100%;
    height: auto;
    pointer-events: none;
    /* clicks go to the li */
    z-index: 1;
    /* default above dim duplicates */
}

/* The two duplicates are hidden and sit under the main one by default */
#abtmenu li svg.dim {
    z-index: 0;
    opacity: .5;
    /* not visible while stacked */
    transition: 1s;
    transition: 1s, color 1s cubic-bezier(0, 0.24, 0.01, 0.96);
}

/* When a tile is focused, duplicates can become visible (you will animate/move them) */
#abtmenu li.focus-left svg.dim {
    opacity: .5;
    /* ready for your movement animation */
}

#abtmenu svg {
    width: 100%;
    height: auto;
    /* keep aspect ratio */
}

/* Vertical separators between items */
/* #abtmenu li+li {
    border-left: 1px solid var(--main-color-seven);
} */
#abtmenu li {
    border-right: 1px solid black;
}

/* Desktop-only hover wipe */
@media (hover: hover) and (pointer: fine) {

    /* Bottom-to-top color overlay */
    #abtmenu li::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--hover-bg);
        transform: scaleY(0);
        /* collapsed */
        transform-origin: bottom center;
        /* grow upward */
        transition: transform .6s ease;
        /* sharp wipe */
        z-index: -1;
        /* behind text/SVG and border */
    }

    #abtmenu li:hover::before {
        transform: scaleY(1);
    }

    /* Invert foreground to site ivory */
    #abtmenu li:hover {
        color: var(--main-color-one);
    }

    /* Keep headings and body text black even during hover */
    #abtmenu li:hover p,
    #abtmenu li:hover h3 {
        color: var(--main-color-six);
    }
}

.abtoffscreen {
    transform: translateY(120%);
}

#abtmenu li .acclose {
    margin-top: 2rem;
    align-self: center;
    margin-right: .7rem;
    opacity: 0;
    transition: 1s;
    color: var(--main-color-seven);
}

#abtmenu li.focus-left p.acclose {
    opacity: 1;
    z-index: 2;
}

#abtmenu li.focus-left svg.dim:nth-of-type(1) {
    transform: translate(-50%, -150%);
}

#abtmenu li.focus-left svg:not(.dim) {
    transform: translate(-50%, -50%);
}

#abtmenu li.focus-left svg.dim:nth-of-type(3) {
    transform: translate(-50%, 50%);
}

.abtmeart {
    position: fixed;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
    width: 71.25%;
    row-gap: .5rem;
    transition: 1s;
    opacity: 1;
    z-index: 2;
    right: 2.5%;
}

.abtmeart h2 {
    font-family: var(--font-thick);
    font-size: 2.5rem;
}

.abtmeart h2 span {
    font-family: var(--font-thin);
    font-weight: 400;
}

.abtmeart>div:first-of-type {
    grid-area: 1/1/2/4;
}

.abtmeart>div:first-of-type p {
    color: var(--main-color-seven);
    margin-bottom: -.5rem;
}

#wiaart {
    top: 30%;
    grid-template-rows: .3fr 1fr;
}

.abtmeart p {
    font-family: var(--font-thin);
}


#wiaart video,
#widart video {
    border-radius: 20px;
}


#wiaart>p:first-of-type,
#widart>p:first-of-type {
    grid-area: 2/1/3/2;

}

#wiaart>div:last-of-type,
#widart>p:last-of-type {
    grid-area: 2/2/3/3;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}

#wiaart>video,
#widart>video {
    grid-area: 1/3/3/4;
}

#wiaart div button {
    display: flex;
    align-items: center;
    gap: .5rem;
    align-self: flex-end;
    border: none;
    background: none;
}

.abtmeart a p,
#wiaart div button p {
    min-width: fit-content;
    color: var(--main-color-seven);
    font-size: 1rem;
}

#wilart {
    top: 25%;
    grid-template-rows: .3fr 1fr;
}

#wilart div:last-of-type {
    grid-area: 2/2/3/3;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    row-gap: 2rem;
}

#wilart>img {
    grid-area: 1/3/3/4;
    align-self: flex-end;
}

#wilart img {
    width: 100%;
}

#widart {
    grid-template-rows: .1fr 1fr;
    top: 35%;
}
#wibart{
    grid-template-rows: auto 1fr;
    top: 30%;
}
#wibart>p:first-of-type{
    grid-area: 2/1/3/2;
}
#wibart>p:last-of-type{
    grid-area: 2/2/3/3;
}
#wibart>div:last-of-type{
    grid-area: 2/3/3/4;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
#wibart>div a{
    display: flex;
    align-items: center;
    gap: .5rem;
    align-self: flex-end;
    margin-top: .5rem;
}

.abtmeart.inactive{
    transform: translateY(100%);    
    opacity: 0;
    z-index: 0;
}

#contact {
    width: 95%;
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr .8fr;
    height: calc(100svh - var(--header-offset));
    /* exact space below header */
    margin-top: var(--header-offset);
    /* sit directly under header */
    box-sizing: border-box;
    align-items: flex-end;
}

#contactline {
    grid-area: 1/2/2/3;
    display: flex;
    flex-flow: row nowrap;
    height: 60%;
    width: 100%;
}

#contactline div:first-of-type {
    border-right: 1px solid black;
    width: 50%;
}

#contact>article p {
    font-family: var(--font-thin);
}

#contact>article p:first-of-type {
    color: var(--main-color-seven);
}

#contact>article h1 {
    font-size: 3rem;
    font-family: var(--font-thick);
    margin-bottom: .5rem;
}

#contact>article span {
    font-family: var(--font-thin);
}

#contdet {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 2rem;
    margin-bottom: 2rem;
}

#contballs {
    grid-area: 2 / 1 / 3 / 4;
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    margin-bottom: 1rem;
    height: 100%;
    align-items: flex-end;
}

#contballs div {
    width: calc(95vw/10);
    height: calc(95vw/10);
    aspect-ratio: 1/1;
    border-radius: 1000px;
    background-color: var(--main-color-five);
    transition: .2s;
}

#contdet {
    grid-area: 1 / 3 / 2 / 4;
}

#contballs div:nth-of-type(1):hover,
#contballs div:nth-last-of-type(1):hover {
    height: calc(95vw/8.5);
}

#contballs div:nth-of-type(2):hover,
#contballs div:nth-last-of-type(2):hover {
    height: calc(95vw/7.5);
}

#contballs div:nth-of-type(3):hover,
#contballs div:nth-last-of-type(3):hover {
    height: calc(95vw/6.5);
}

#contballs div:nth-of-type(4):hover,
#contballs div:nth-last-of-type(4):hover {
    height: calc(95vw/5.5);
}

#contballs div:nth-of-type(5):hover,
#contballs div:nth-last-of-type(5):hover {
    height: calc(95vw/4.5);
}