/* Profile JS Styles */

.profile {
    position: absolute;
    top: 10vh;
    left: 0;
    width: 250px;
    height: 300px;
    border: 2px solid red;
}



/* HERO STYLES ------------ */

#hero-container {
    /* max-width: 80rem; */
    margin: 0 auto;
    /* flex-grow: 1; */
    display: flex;
    /* height: 100%; */
    /* gap: 20px; */
    /* padding-top: 5vh; */
    /* border: 1px solid red; */
    flex-direction: row;
    justify-content: center;
    /* gap: 20px; */
    flex-wrap: wrap;
    /* align-items: center; */
    /* background-color: #fff; */
}


#hero-profile-img {
    /* flex-grow: 1; */
    /* padding-left: 10px; */
    /* border: 1px solid red; */
    /* height: fit-content; */
    /* overflow: hidden; */
    /* margin: 0; */
    /* padding: 0; */
    display: flex;
    /* margin-right: auto; */
    /* flex-direction: column-reverse; */
    /* justify-content: space-around; */
    /* gap: 80px */

}



p#hello {
    font-family: "Doto", sans-serif;
    font-size: 3rem;
    font-weight: 250;
    color: black;
    /* border-bottom: 2px solid black; */
    padding-bottom: 20px;
    margin-left: auto;
    text-align: right;
    /* margin-top: -10px; */
    /* display: none; */
    /* border: 1px solid red; */
    /* text-align: right; */
}

p#hello span {
    /* color: #640bbc; */
}


#hero-img {
    margin: auto;
    /* padding: 0; */
    display: block;
    margin-inline: auto;
    /* margin-top: -10px; */
    /* width: 280px; */
    /* flex-shrink: 1; */
    height: 400px;
    /* scale: 1.2; */
    object-fit: cover;
    mix-blend-mode: multiply;
    /* filter: blur(1px); */
    opacity: 0.85;
    /* filter: contrast(100%); */
    /* z-index: 100; */
    /* border: 1px solid red; */
    /* -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); */
    /* mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); */
}



.courier {
    font-family: "Courier New", Courier, Monospace;
    font-size: 0.8em;
    /* color: rgb(174, 52, 52); */
}

.dotted-underline {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.13em;
    text-decoration-color: #9f11119c;
}

.matterA2 span {
    /* font-size: 1em; */
    font-weight: 400;
    color: rgba(159, 17, 17, 0.845);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.13em;
    text-decoration-color: #9f11119c;
    /* color: black */
    /* font-family: "Courier New", Courier, Monospace; */
}



#timeline-container {
    /* padding: 50px; */
    /* padding-left: 10px; */
    margin-inline: 20px;
    max-width: 60rem;
    min-height: 80vh; 
    /* padding-top: 40px; */
    display: grid;
    grid-template-columns: 1fr 50px 1fr;
    grid-template-rows: 1fr 1.2fr 0.2fr;
    grid-template-areas: 'matterA1 nodeA matterA2' 'matterB1 nodeB matterB2' 'matterC1 nodeC matterC2';
    row-gap: 5%;
    /* border: 1px solid red; */
    /* height: 100%; */
    overflow: hidden;
    /* flex-grow: 1; */
}

#timeline-container>* {
    /* border: 1px solid red; */
}

.matterA1 {
    grid-area: matterC1;
}

.matterA2 {
    grid-area: matterC2;
}

.matterB1 {
    grid-area: matterB1;
}

.matterB2 {
    grid-area: matterB2;
    /* margin-block: auto; */
    /* margin-right: auto; */
}



.matterC2 {
    grid-area: matterA1;
}

.node-1 {
    grid-area: nodeA;
}

.node-2 {
    grid-area: nodeB;
}

.node-3 {
    grid-area: nodeC;
}

.node-matter p {
    /* margin-top: px; */
    margin-left: auto;
    font-family: 'Josefin Sans';
    font-size: 1.4rem;
    font-weight: 350;
    text-align: right;
    /* border: 1px solid red; */
    padding-bottom: 10px;
}
.matterC1 {
    grid-area: matterA2;
    >p {
        text-align: left;
    /* border: 1px solid red; */

    }
    /* margin-block: auto; */
    /* margin-right: auto; */
    /* text-align: left; */
    /* margin-top: -20px; */
}

.side-note p {
    font-weight: 200;
    text-align: left;
}


.node-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* padding-top: 10%; */
    /* border: 5px solid red; */
}

.line {
    width: 0.1px;
    background-color: #6f6b6b;
    flex-grow: 1;
    /* border: 1px solid red; */
    /* max-height: 90px; */
}

.node {
    background: #000000;
    /* background: linear-gradient(to right, #5228a0 10%, #38138f 40%, #640bbc 100%); */
    width: 12px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    /* border: 1px solid #222; */
    margin-left: 1px;
    /* padding-top: 50px; */
}


.divider {
    width: auto;
    display: flex;
    place-content: center;
    /* border: 1px solid red; */
    /* width: fit-content; */
    margin: 0 auto;
}

#divider-1 {
    /* display: none; */
    width: auto;
    rotate: -10deg;
    margin-inline: 20px ;
}

#divider-2 {
    /* rotate: 90deg; */
    /* display: none; */
    width: auto;
    margin-inline: 20px ;
    /* transform: scaleX(-1); */
}

.projects {
    position: relative;
    margin-inline: 20px;
    width: auto;
    /* margin-bottom: 100px; */
    /* border: 1px solid red; */
    /* margin-block: 40px; */
    /* background-color: var(--yellow-green-accent); */
}

#creative {
    margin-inline: 0;
}

.container {
    position: relative;
    max-width: 70rem;
    /* border: 1px solid red; */
    margin: 10px auto;
    border-radius: 20px;
    /* padding-inline: 20px; */
    /* margin-inline: 20px; */
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 35px 2fr;
    gap: 5px;
}

.points {
    /* display: none; */
    /* position: relative; */
    /* background-color: var(--yellow-green-accent); */
    /* background-color: #222; */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    /* gap: 2px;     */
    transition: grid-template-rows 0.5s ease;
    /* padding-bottom: 20px; */
    border-radius: 20px;
}

.points,
.list {
    height: 80vh;
}


.heading,
.creative-heading {
    /* display: none; */
    /* background-color: #222; */
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 20px; */
}

.heading p,
.creative-heading p {
    /* border: 1px solid red; */
    font-family: 'Josefin Sans', sans-serif;
    /* transform: skewX(-20deg); */
    /* color: var(--yellow-green-accent); */
    color: black width: fit-content;
    font-size: 1.8em;
    /* rotate: -90deg; */
}


.list {
    position: relative;
    /* color: var(--yellow-green-accent); */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 1px;
    transition: grid-template-rows 0.5s ease;
    /* padding-bottom: 20px; */
    cursor: pointer;

}

.acad-list {
    /* color: var(--yellow-green-accent); */
    position: relative;
    /* background-color: #222; */
    /* background-color: ; */
    /* background-color: var(--yellow-green-accent); */
    overflow-y: hidden;
    border-bottom: 2px dashed #222;
    /* border-radius: 20px; */
    /* transition: background-color 0.2s ease-out; */
}

/* .acad-list:first-child {
    border-radius: 0 20px 0 0;
}
.acad-list:last-child {
    border-radius: 0 0 20px 0;
} */

/*

img.acad-img {
    display: block;
    position: absolute;
    bottom:20%;
    width: 25%;
    left: 0%;
    opacity: 0.9;
    transition: display 1s ease-out;
    margin-left: 20px;
} */




.focus {
    /* background-color: inherit; */
    /* background-color: var(--yellow-green-accent); */
    color: var(--yellow-green-accent);
    z-index: 10;
    /* opacity: 0.8; */
    /* border: 2px solid #222; */
    background-color: #222;
    /* color: var(--yellow-green-accent); */
    /* background-color: rgb(255, 255, 255); */
    /* font-weight: 600; */
    /* background: url('assets/images/trek-dither.png'); */
}

.acad-item {
    position: absolute;
    bottom: 10px;
    right: 20px;
    /* font-family: 'Courier New', Courier, monospace; */
    font-family: 'Satoshi';
    font-size: 1.5rem;
    font-weight: 800;
    /* color: #2e2c2c; */
    /* color: var(--yellow-green-accent); */
}

.expand {
    grid-template-rows: var(--expandedRows);
    /* align-items: start, */
}

.acad-description {
    padding: 20px;
    font-family: 'Playfair Display';
    color: #fff;
    /* color: #4b0e0e; */
    /* font-weight: 500; */
    display: none;
    font-size: 0.9em;
    /* transition: display 1s ease; */
    /* opacity: 1; */
    letter-spacing: 0.3px;
    line-height: 25px;
}


.point {
    /* border: 1px solid red; */
    position: relative;
    /* display: none; */
}

.point::before {
    /* border: 1px solid red; */
    content: "";
    position: absolute;
    left: 5px;
    bottom: -5px;
    height: 10px;
    aspect-ratio: 2 / 1;
    border-radius: 100vw;
    /* background-color: var(--yellow-green-accent); */
    background-color: #000000;
    overflow: visible;
}

/* .focus-point {
    background-color: var(--yellow-green-accent);
} */

#rest {
    /* background-color: #222; */
    /* background: linear-gradient(to bottom, #5228a0 10%, #38138f 40%, #640bbc 100%); */
    height: auto;
}


h2 {
    /* font-weight: normal; */
    font-family: 'Bodoni Moda';
    font-weight: 600;
    text-align: center;
    /* font-family: "Josefin Sans", sans-serif; */
    font-size: 5rem;
    color: #000
}

.acad-img {
    position: absolute;
    top: 25%;
    left: 0;
    width: 300px;
    overflow: hidden;
    /* rotate: -20deg; */
    rotate: -20deg;
}

#ads-cft {
    width: 600px;
    /* height: 50px; */
    /* object-fit: cover; */
    filter: invert(100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.736), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.623), rgba(0, 0, 0, 0));

}

#alert {
    margin-block: 20px;
    font-family:'Courier New', Courier, monospace;
    color: #ffffff;
    background: linear-gradient(to right, #5228a0 10%, #38138f 40%, #640bbc 100%);
    /* background-color: antiquewhite; */
    /* position: absolute; */
    /* top: 12vh; */
    width: fit-content;
    margin-inline: auto;
    padding: 8px;
    padding-inline: 20px;
    border-radius: 100vw;
    /* margin-top: 50px; */
    font-size: 0.8em;
    opacity: 0.9;
}


@media screen and (max-width:560px) {
    /* h2 {
        font-size: 4rem;
    }     */
    html {
        font-size: 12px;
    }
    p#hello {
        font-size: 1.4rem;
    }
}