: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;
}

.projhead {
    width: 95%;
    margin-top: 4rem;
}

.projhead img {
    width: 100%;
    height: 75svh;
    object-fit: cover;
    object-position: top;
}

.projhead article {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 1rem 0;
}

.projhead h1 {
    grid-area: 1 / 1 / 2 / 3;
    font-size: 2.5rem;
    font-family: var(--font-thick);
}

.undertitle {
    font-family: var(--font-thin);
    font-size: .7em;
    color: var(--main-color-seven);
    font-weight: 400;
}

.projhead article>div {
    grid-area: 1/3/2/4;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
}

.projhead article>div div {
    font-family: var(--font-thin);
    display: flex;
    flex-flow: column nowrap;
    row-gap: .4rem;
}

.projhead article>div div:first-of-type {
    color: var(--main-color-seven);
}

.ovrvw {
    display: flex;
    flex-flow: row nowrap;
    width: 95%;
    justify-content: space-between;
    align-self: center;
    border-top: 2px solid black;
    /* Top border */
    border-bottom: 2px solid black;
    /* Bottom border */
    padding: 2.13rem 0;
    margin-bottom: 6rem;
}

.ovrvw h2 {
    color: var(--main-color-six);
    font-family: var(--font-thick);
    font-size: 1rem;
    align-self: flex-start;
    margin-top: 4rem;
    margin-left: .5rem;
    width: 1rem;
    height: fit-content;
    transform: rotate(-90deg);

}

.ovrvw>p:first-of-type {
    margin-left: -3rem;
    width: 45%;
    font-family: var(--font-thin);
    font-size: 1.5rem;
    line-height: 1.5rem;
}

.ovrvw div {
    width: 45%;
}

.ovrvw div>p {
    width: 100%;
    justify-self: flex-end;
    font-size: 1rem;
    font-family: var(--font-thin);
    color: var(--main-color-six);
}

.ovrvw div a {
    color: var(--main-color-six);
}

.block1 {
    border-top: 1px black solid;
    padding-top: 1rem;
    width: 95%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 1rem;
    margin-bottom: 6rem;
}

.block1 h2 {
    font-size: 1.7rem;
    font-family: var(--font-thick);
}

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

.block2 {
    width: 95%;
    display: flex;
    margin-bottom: 4rem;
}

.block2 img {
    width: calc(100%/3);
    height: 18rem;
    object-fit: cover;
}


.meprovid {
    width: 95%;
    display: flex;
    justify-content: center;
    background-image: url("../projects/photos/meprovidback.png") ;
    margin-bottom: 3rem;
}