:root{
    --black1: #121212;
    --black2: #1A0909;
    --black3: #1A1A1A;
    --white1: #FFE9E9;
    --white2: #FFF6F6;
    --red: #FF5454;
    --emergency-black: #862727;

    --red-gradient: repeating-linear-gradient( 135deg, var(--red) 0px, var(--red) 1px, var(--black1) 1px, var(--black1) 2px );
    --black-gradient: repeating-linear-gradient( 135deg, var(--black1) 0px, var(----black1) 1px, var(--white2) 1px, var(--white2) 2px );


    --body-margin: 200px;

    --fontsize-2: 0.578rem;
    --fontsize-1: 0.694rem;
    --fontsize0: 0.8333rem;
    --fontsize1: 1rem;
    --fontsize2: 1.2rem;
    --fontsize3: 1.44rem;
    --fontsize4: 1.73rem;
    --fontsize5: 2.07rem;
    --fontsize6: 2.48rem;
    --fontsize7: 2.98rem;
}

.bio-header{
    margin-top: 40px;
}

#gallery-container{
    width: 100%;
    height: 350px;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap:nowrap;
    padding-bottom: 16px;
}

#gallery-container img{
    height: 350px;
    width: auto;
    margin-right: 20px;
    cursor: pointer;
}

#gallery-container img:last-child{
    margin-right: 0px;
}

#gallery-overlay{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    padding: 16px;
    border-radius: 8px;

    background-color: rgba(18,18,18, 0.9);
    z-index: 10000;
}

#gallery-img-div{
    width: 90%;
    height: 90%;


    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#gallery-overlay img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#overlay-description{
    background-color: var(--black1);
    color: var(--white2);

    font-size: var(--fontsize-2);
    text-transform: uppercase;
    padding: 8px;
    margin: 8px;
}

.close-overlay{
    position: absolute;
    top: 32px;
    right: 32px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}


.hidden{
    display: none;
}