:root {
    --INTRO-BW: 24rem;  /* BW = box-width */
    --ABOUT-BW: 25rem; /* 37.5 */
    --ABOUT--GAP: 5rem;
}

#intro {
    font-size: var(--FS-BIG);
    margin: 9.75rem 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2.5rem;
}

#greet {
    width: var(--INTRO-BW);
    line-height: 2;
    margin-top: 2.5rem;
}

#name, .subTitles {
    text-align: center;
}

.subTitles {
    display: block;
}

#headshot {
    width: var(--INTRO-BW);
    border-color: var(--GEN-SECCOLOR);
}

/* || 'ABOUT ME' SECTION || */
#about {
    opacity: 0;
}

#aboutTitle {
    text-align: center;
    margin-top: 2.5rem;
}

#aboutContent {
    margin: 2.5rem 0 4vh 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ABOUT--GAP);
}

.blocks {
    display: flex;
    flex-direction: row;
    gap: var(--ABOUT--GAP);
}

.blockText,
.blockAlt {
    width: var(--ABOUT-BW)
}

.blockText {
    border-color: var(--GEN-SECCOLOR);
    line-height: 1.5;
    padding: 0.75rem 1.5rem;
}

.blockAlt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.quote {
    font-style: italic;
    font-weight: 1;
    text-align: center;
    display: block;
}

#lastBlock {
    padding-bottom: 1.125rem;
}

#lastP {
    color: var(--GEN-SECCOLOR);
    text-align: center;
}

/* || 'ABOUT ME' IMAGES || */
.twoImgs {  /* Pairs of images */
    display: flex;
    gap: 0.75rem;
}

.horizontalImgs {  /* First set of ABOUT pics */
    width: 12.5rem; /* 300px */
    height: 27.8333333rem; /* 668px */
}

.verticalImgs {  /* Second set of ABOUT pics */
    width: var(--ABOUT-BW);
    height: 14.5416667rem;  /* 349px */
}

#horizontalImgContainer {
    flex-direction: row;
}

#verticalImgContainer {
    flex-direction: column;
}

#imgLeft {
    border-color: var(--DEV-SECCOLOR);
}

#imgRight {
    border-color: var(--MUS-SECCOLOR);
}

#imgTop {
    border-color: var(--DEV-SECCOLOR);
}

#imgBottom {
    border-color: var(--MUS-SECCOLOR);
}


#lastImg {
    width: var(--ABOUT-BW);
    height: 31.0416667rem;  /* 745px */
    border-color: var(--GEN-SECCOLOR); 
}

/* || BOTTOM LINKS || */
#bottomLinks {
    display: grid;
    grid-template-areas:
        "sw me"
        "sk le"
        "co co"
        "gt li";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    width: 100%;
    gap: 1.125rem;
}

.bottomLink {
    text-align: center;
}

#sw {
    border-color: var(--DEV-SECCOLOR);
    grid-area: sw;
}

#me {
    border-color: var(--MUS-SECCOLOR);
    grid-area: me;
}

#sk {
    border-color: var(--DEV-SECCOLOR);
    grid-area: sk;
}

#le {
    border-color: var(--MUS-SECCOLOR);
    grid-area: le;
/* Temporarily code ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
    color: whitesmoke;
    background: transparent;
    font-size: var(--FS);
    cursor: pointer;
}

#le:hover {
    color: rgba(255, 255, 255, 0.75);
}

#le:active {
    color: rgba(255, 255, 255, 0.575);
} /* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */

#co {
    border-color: var(--GEN-SECCOLOR);
    grid-area: co;
}

#gh {
    border-color: #6cc644;
    grid-area: gt;
}

#li {
    border-color: #0077B5;
    grid-area: li;
}

/* || Properties for JS || */
/* Each ID is a part of the intro sequence */
#hi, #myNameIs, #titleHr, #headshot, #dev, #mus, #teach, #lead {
    opacity: 0;
}

/* || MOBILE SETTINGS || */
@media screen and (max-width: 768px) {

    #intro {
        margin: 4rem 0;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }

    .blocks {
        flex-flow: column;
    }
    
    .box1 {
        order: 2;
    }

    .box2 {
        order: 1;
    }
}