@font-face {
    font-family: 'GeneralSans';
    src: url('Website Assets/FONT GeneralSans_Complete/Fonts/OTF/GeneralSans-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GeneralSans';
    src: url('Website Assets/FONT GeneralSans_Complete/Fonts/OTF/GeneralSans-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'GeneralSans';
    src: url('Website Assets/FONT GeneralSans_Complete/Fonts/OTF/GeneralSans-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'GeneralSans';
    src: url('Website Assets/FONT GeneralSans_Complete/Fonts/OTF/GeneralSans-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

/* For all pages */

body{
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
    background-color:#FFFFFF;
}

#site-header,
#site-content {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

body.is-loading #site-header,
body.is-loading #site-content,
body.is-leaving #site-header,
body.is-leaving #site-content {
    opacity: 0;
    transform: translateY(12px);
}

.header-img{
    width: 98%;
    margin-top: 3%;
    margin-bottom: 1%;
    margin-left: 1%;

}

.email-img{
    height: auto;
    width: 17%;
}

.instagram{
    height: auto;
    width: 9%;
}

.contacts{
    margin-left: 1.5%;
    display: flex;
    flex-direction: column;
    row-gap: 3%;
}

.main-logo{
    width: 15%;
    height: auto;
}

.main{
    text-align: center;
}

.menu{
    display: flex;
    box-align: center;
    text-align: center;
    align-items: start;
    flex-direction: row;
    gap: 2%;
    margin-left: 22%;
    margin-right: 22%;
    margin-top: 2%;
    margin-bottom: 3%;
}

/* Text Settings */

p{
    font-family: GeneralSans;
    font-weight: 500;
    font-size: 2.18vw;
    color:#A398E6;
    margin-top: 0;
    margin-bottom: 0;
}

h1{
    font-family: GeneralSans;
    font-size: 1.8vw;
    font-weight: 500;
    color: #A6D5E8;
    margin-top: 5%;
    margin-bottom: 0px;
}

h2{
    font-family: GeneralSans;
    font-weight: 500;
    font-size: 1.5vw;
    color: #A6D5E8;
    margin-top: 0px;
    margin-bottom:0px;
}

h3{
    font-family: GeneralSans;
    font-weight: 500;
    font-size: 1.8vw;
    color:#A398E6;
    margin-top: 0;
    margin-bottom: 0;
}

h4{
    font-family: GeneralSans;
    font-weight: 500;
    font-size: 1.15vw;
    color:#A398E6;
    margin-top: 0;
    margin-bottom: 0;
    text-decoration: none;
}

h5{
    font-family: GeneralSans;
    font-weight: 500;
    font-size: 1.8vw;
    color:#A398E6;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
    font-style: italic;
}

h6{
    font-family: GeneralSans;
    font-weight: 500;
    font-size: 1.8vw;
    color:#FF97D5;
    margin-top: 0;
    margin-bottom: 0;
}

/* LightBox */

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.7);
    justify-content: center;
    align-items: center;
    justify-content: center;
    align-items: center;
}

.lightbox img {
    max-width: 80%;
    max-height: 80%;
    cursor: pointer;
}

.lightbox-lm {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.7);
    justify-content: center;
    align-items: center;
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#lightbox-lm-img {
    max-width: 70vw;
    max-height: 80vh;
    cursor: pointer;
    object-fit: contain;
    background-color: white;
    padding: 5%;
    padding-bottom: 18%;
}

#lightbox-caption {
    max-width: 75%;

    white-space: normal;        /* allows wrapping */
    overflow-wrap: break-word;  /* breaks long strings */
    word-break: break-word;     /* extra safety */

    text-align: center;

    font-family: GeneralSans;
    font-weight: 500;
    font-style: italic;
    font-size: 1.75vh;
    background-color: white;
    padding-right: 2%;
    padding-left: 2%;
    padding-bottom: 1%;
    color: #A398E6;
    margin-top: -16%;
}


/* Homepage */

.gallery {
    width: 100%;
    column-count: 5;
    column-gap: 2.8%;
}

.gallery img {
    width: 100%;
    margin-bottom: 15%;
    display: block;
    cursor: pointer;
}

.close,
.prev,
.next {
    position: absolute;
    color: #ff81dc;
    font-size: 40px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.close {
    top: 20px;
    right: 30px;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

/* About page */

.about-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 2%;
    margin-bottom: 2%;
    gap: 2%;
}

.about-bottom {
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 4%;
}

.about-list{
    display: flex;
    flex-direction: row;
    margin-left: 5%;
    margin-right: 7%;
    gap: 10%;
}

.about-list-col{
    display: flex;
    flex-direction: column;
    width: 50%;
}

.id{
    width: 48%;
}

/* Projects */

.projects-gallery{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 5%;
    row-gap: 3rem;
    margin-right: 4%;
    margin-left: 4%;
}

.project{
    display: flex;
    flex-direction: column;
    text-align: center;

}

.project-img{
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 3%;
}

.title-links {
    font-family: GeneralSans;
    font-weight: 500;
    font-size: 1.15vw;
    color: #A398E6;
    margin: 0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.project a {
    text-decoration: none;
}

.project a:hover .title-links {
    color: #CAD685;
    text-decoration: underline;
}

.project1-blurb{
    display: flex;
    flex-direction: column;
    margin-right: 10%;
    margin-left: 10%;
    gap: 2vh;
    margin-top: 3%;
    margin-bottom: 3%;
}

.project-blurb{
    display: flex;
    flex-direction: column;
    margin-right: 5%;
    margin-left: 5%;
    gap: 0.5vh;
    margin-top: 5%;
    margin-bottom: 3%;
    text-align: center;
}

.project-bold-blurb{
    display: flex;
    flex-direction: column;
    margin-right: 13%;
    margin-left: 13%;
    text-align: center;
    gap: 0.3vh;
    margin-top: 4%;
}

.project-gallery {
    width: 100%;
    column-count: 4;
    margin-top: 5%;
}

.project-gallery img {
    width: 100%;
    height: auto;
    margin-bottom: 10%;
    display: block;
    cursor: pointer;
    display: block;
}

.project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 5%;
    row-gap: 3rem;
    margin-right: 4%;
    margin-left: 4%;
    margin-top: 4%;
}

.project-gallery-grid img {
    width: 100%;
    height: auto;
    margin-bottom: 10%;
    display: block;
    cursor: pointer;
    display: block;
}

.showcase {
    display: flex;
    margin-right: 10%;
    margin-left: 10%;
    align-items: center;
    justify-content: center;
}

.photo-caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
}

.photo-caption img {
    width: 60%;
    height: auto;
    margin-bottom: 3%;
}

video {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
}

/* Digital */

.digital-header{
    margin-left: 10%;
    margin-bottom: 2%;
    margin-top: 3%;
}

.digital-blurb{
    text-align: center;
    margin-right: 10%;
    margin-left: 10%;
    margin-bottom: 4%;
}

.graphic-design {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-right: 10%;
    margin-left: 10%;
    column-gap: 1%;
}

@media (max-width: 1100px) {
    .graphic-design {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .graphic-design {
        grid-template-columns: 1fr;
    }
}

.photography{
    column-count: 3;
    column-gap: 1.7%;
    margin-right: 10%;
    margin-left: 10%;
    margin-bottom: 5%;
}

.portrait{
    text-align: center;
    margin-bottom: 5%;
}

.digital-img{
    width: 100%;
    display: block;
    margin-bottom: 5%;
    cursor: pointer;
}

.copy{
    column-count: 3;
    margin-left: 10%;
    margin-right: 10%;
    column-gap: 1%;
    row-gap: 1rem;
}

.copy > * {
    break-inside: avoid;
    margin-bottom: 1rem;
    width: 100%;
}

@media (max-width: 1200px) {
    .copy {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .copy {
        column-count: 1;
    }
}