/* BASE */

body {
    background-color: #E9E2D7;
}

.cTop {
    padding-top: 15vh;
}

.container {
    width: 90vw;
    margin: 0 auto;
}

.flex {
    display: flex;
    justify-content: space-between;
}

/* HOME */

/* Base header (applies everywhere) */
.siteHeader {
    width: 100%;
}

/* HOME header fixed always */
body.homeHeader .siteHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    min-height: 50vh;
    padding: 48px 0 28px;
    background: #ff2b2b;

    display: flex;
    align-items: flex-end;

    transition:
        background .45s ease,
        padding .45s ease,
        min-height .45s ease,
        box-shadow .45s ease;
}


/* Compact header */
body.homeHeader .siteHeader.isCompact {
    min-height: 64px;
    padding: 14px 0;
    background: #e9e2d8;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

/* Logo swap (two-logo method) */
.logoHeader .compactLogo {
    display: none !important;
}

.siteHeader.isCompact .logoHeader .custom-logo-link {
    display: none !important;
}

.siteHeader.isCompact .logoHeader .compactLogo {
    display: block !important;
}

/* Logo sizes (applies to both logos on home) */
body.homeHeader .logoHeader img {
    height: 200px;
    width: auto;
    display: block;
    transition: height .25s ease;
}

body.homeHeader .siteHeader.isCompact .logoHeader img {
    height: 34px;
}

/* Link colors */
body.homeHeader .siteHeader a {
    color: #f3e8d8;
    text-decoration: none;
    transition: color .25s ease;
}

body.homeHeader .siteHeader.isCompact a {
    color: #ff2b2b;
}

/* Content offset under the header */
body.homeHeader {
    --headerSpace: 30vh;
}

body.homeHeader.isCompactHeader {
    --headerSpace: 64px;
}

body.homeHeader main {
    padding-top: var(--headerSpace);
    transition: padding-top .45s ease;
}

/* Menu size (home) */
body.homeHeader .mainNav .menu-item a {
    font-size: 25px;
    line-height: 1;
    transition: font-size .25s ease, padding .25s ease;
}

body.homeHeader .siteHeader.isCompact .mainNav .menu-item a {
    font-size: 19px;
}

/* Menu spacing (home) */
body.homeHeader .mainNav .menu-item {
    margin: 0 15px;
    transition: margin .25s ease;
}

body.homeHeader .siteHeader.isCompact .mainNav .menu-item {
    margin: 0 8px;
}

/* HERO */
.homeHero {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../img/hero.jpeg);

    background-position: 50% var(--heroY, 30%);
    transition: background-position .35s ease;
}

/* Compact hero framing */
body.homeHeader.isCompactHeader .homeHero {
    padding-top: 64px;
    box-sizing: border-box;
    background-position: 50% 25%;
}

/* HEROTEXT */
.homeHero .flex {
    display: flex;
    flex-direction: column;
    align-content: center;
}

.heroText1 {
    width: 50vw;
    background-color: #FC3636;
    color: rgb(255, 255, 255);
    padding: 25px;
}

/* CARDS */
.projectsGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.projectsGrid>* {
    flex: 0 0 calc((100% - 48px) / 3);
    box-sizing: border-box;
}

/* Card */
.projectCard {
    border: 0px solid rgba(0, 0, 0, .08);
    border-radius: 16px;
    overflow: hidden;
    background-color: #FC3636;
    color: rgb(255, 255, 255);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.projectCard:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    border-color: rgba(0, 0, 0, .12);
}

/* Make the whole card clickable */
.projectCardLink {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Image */
.projectCardMedia {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, .04);
    overflow: hidden;
}

.projectCardImg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .2s ease;
}

.projectCard:hover .projectCardImg {
    transform: scale(1.03);
}

/* Body */
.projectCardBody {
    padding: 16px 16px 18px;
}

.projectTitle {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

/* Tags */
.projectTags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.projectTag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    margin-right: 8px;
    border-radius: 999px;
    font-size: .85rem;
    line-height: 1;
    border: 1px solid rgb(255, 255, 255);
    background: rgba(0, 0, 0, .03);
    text-decoration: none;
    color: inherit;
    transition: background .15s ease, border-color .15s ease;
}

.projectTag:hover {
    background: rgba(0, 0, 0, .06);
    border-color: rgba(0, 0, 0, .18);
}

/* Excerpt */
.projectExcerpt {
    margin: 12px 0 0;
    font-size: .95rem;
    line-height: 1.5;
    opacity: .8;
}

/* Cover */
.cover {
    display: flex;
    flex-direction: row;
    max-height: 80vh;
    overflow: hidden;
    margin: 15px 0;
}

.coverImage img {
    height: auto;
    width: 50vw;
    position: relative;
    xtransform: translateY(-25vh);

}

.coverText {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    width: 50vw;
    background-color: #FC3636;

    padding: 25px;
}



.compactLogoLink {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}






/* Better: apply to common section types */
section, [id]{
  scroll-margin-top: 250px;
}