:root {
    --image-height: 60vh;
    --image-width: 500px;
    --me-photo-image-height: 80vh;
    --text-color: black;
    --font-weight: 400;
    --font-family: 'Alata', sans-serif;

    --modal-elements-display: none;
    --modal-background-image: url("");

    --image-swap-time-on-screen: .75s;

    --document-overflow-mode: scroll;

    --initial-fade-in-time: 0.3s;
    --display-image-fade-in-time: 0.3s;

    --modal-scaling-multiplier: 5;

    --modal-image-width: clamp(var(--image-width), calc(var(--image-width) * var(--modal-scaling-multiplier)), 100%);
    --modal-image-height: clamp(var(--image-height), calc(var(--image-height) * var(--modal-scaling-multiplier)), 100%);
}

@media (width >= 2500px) {
    :root {
        --image-width: 1000px !important;
    }
}

a {
    text-decoration: none !important;
}

body * {
    color: var(--text-color) !important;
    font-weight: var(--font-weight);
    font-family: var(--font-family);
}

@keyframes fadeIn {
    0% { opacity: 0; }
    20% {opacity: 0; }
    100% { opacity: 1; }
}

body {
    opacity: 0;
    animation: fadeIn var(--initial-fade-in-time) ease 0.3s forwards;
    overflow: var(--document-overflow-mode)
}

.image-container {
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(254, 254, 254, 1);
    cursor: pointer;
}

.image-container[data-imgSection="traditional-illustration"] {

    &[data-imgName="IAN_TRADITIONAL_ILLUSTRATION_COVER_1"] {
        background-image: url("/assets/traditional-illustration/SNIPER.png");
        background-size: 100%;
    }
    &[data-imgName="IAN_TRADITIONAL_ILLUSTRATION_COVER_2"] {
        background-image: url("/assets/traditional-illustration/SCARY_FAIRY.png");
        background-size: 100%;
    }
    &[data-imgName="IAN_TRADITIONAL_ILLUSTRATION_COVER_3"] {
        background-image: url("/assets/traditional-illustration/CLICKER.png");
        background-size: 60%;
    }
    &[data-imgName="IAN_TRADITIONAL_ILLUSTRATION_COVER_4"] {
        background-image: url("/assets/traditional-illustration/MACY.png");
        background-size: 100%;
    }
    &[data-imgName="IAN_TRADITIONAL_ILLUSTRATION_COVER_5"] {
        background-image: url("/assets/traditional-illustration/MANDO.png");
        background-size: 60%;
    }
}

.image-container[data-imgSection="photography"] {

    &[data-imgName="IAN_PHOTOGRAPHY_COVER_1"] {
        background-image: url("/assets/photography/CLAUDIA_SPEECH.JPG");
        background-size: 100%;
    }
    &[data-imgName="IAN_PHOTOGRAPHY_COVER_2"] {
        background-image: url("/assets/photography/ROCK_CLIMBING.jpg");
        background-size: 100%;
    }
    &[data-imgName="IAN_PHOTOGRAPHY_COVER_3"] {
        background-image: url("/assets/photography/SNOWY_PEAK_FENCE.JPG");
        background-size: 100%;
    }
    &[data-imgName="IAN_PHOTOGRAPHY_COVER_4"] {
        background-image: url("/assets/photography/OBELISK.JPG");
        background-size: 80%;
    }
    &[data-imgName="IAN_PHOTOGRAPHY_COVER_5"] {
        background-image: url("/assets/photography/DIRTY_FRUIT.JPG");
        background-size: 100%;
    }
}

.image-container[data-imgSection="digital-illustration"] {

    &[data-imgName="IAN_DIGITAL_ILLUSTRATION_COVER_1"] {
        background-image: url("/assets/digital-illustration/AMIR_POSE_1.png");
        background-size: 100%;
    }
    &[data-imgName="IAN_DIGITAL_ILLUSTRATION_COVER_2"] {
        background-image: url("/assets/digital-illustration/TEAM_LINEUP.png");
        background-size: 100%;
    }
    &[data-imgName="IAN_DIGITAL_ILLUSTRATION_COVER_3"] {
        background-image: url("/assets/digital-illustration/SBWU_LOGO.png");
        background-size: 100%;
    }
    &[data-imgName="IAN_DIGITAL_ILLUSTRATION_COVER_4"] {
        background-image: url("/assets/digital-illustration/VANGUARD.png");
        background-size: 60%;
    }
    &[data-imgName="IAN_DIGITAL_ILLUSTRATION_COVER_5"] {
        background-image: url("/assets/digital-illustration/DSA_POSTER.png");
        background-size: 60%;
    }
}

.bg-image-wrapper {
    height: var(--image-height);
    background-color: white !important;
    width: var(--image-width);
    transition: opacity 0.2s ease-in-out;

    & h1 {
        opacity: 0;
    }

    & > a.image-link > div {
        opacity: 1;
    }

    &:hover {
        & > a.image-link > div.image-container {
            transition: opacity 0.3s ease-in-out !important;
            opacity: 0 !important;

            &.cycle-item {
                animation-play-state: paused;
            }
        }
        & h1.image-label {
            opacity: 1;
            transition: opacity 0.3s ease-in-out !important;
        }
    }
}

@keyframes cycle {
  0%   { opacity: 1; }
  20%  { opacity: 0; }
  100%  { opacity: 0; }
}

.cycle-item {
    animation-name: cycle;
    animation-duration: calc(var(--image-swap-time-on-screen) * 5);
    animation-timing-function: step-end;
    animation-iteration-count: infinite;
}

.cycle-item:nth-child(1) {
    animation-delay: 0.0s;
}
.cycle-item:nth-child(2) {
    animation-delay: var(--image-swap-time-on-screen);
}
.cycle-item:nth-child(3) {
    animation-delay: calc(var(--image-swap-time-on-screen) * 2);
}
.cycle-item:nth-child(4) {
    animation-delay: calc(var(--image-swap-time-on-screen) * 3);
}
.cycle-item:nth-child(5) {
    animation-delay: calc(var(--image-swap-time-on-screen) * 4);
}

.lower-container {
    margin-top: calc(var(--image-height) * -1);
}

.image-label {
    margin-top: calc(var(--image-height) * -1);
    height: 100% !important;
    width: 100% !important;
    background-color: white;
    transition: opacity 0.3s ease-in-out !important;
}

/* modal zoom-in */
.modal-overlay {
    width: 100% !important;
    height: 100% !important;
    z-index: 3 !important;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.8;
    background-color: white !important;
    display: var(--modal-elements-display);
}

.modal-image {
    width: var(--modal-image-width) !important;
    height: var(--modal-image-height) !important;
    z-index: 3 !important;
    position: fixed;
    top: calc((100vh - var(--modal-image-height)) / 2);
    left: calc((100vw - var(--modal-image-width)) / 2);
    opacity: 1;
    display: var(--modal-elements-display);

}

.modal-remove {
    position: fixed;
    right: 0;
    top: 0;
    opacity: 1;
    z-index: 3;
    display: var(--modal-elements-display);
    
    &:hover {
        cursor: pointer;
    }
}

.modal-previous {
    position: fixed;
    left: 0;
    top: 50%;
    opacity: 1;
    z-index: 3;
    display: var(--modal-elements-display);
    user-select: none;
    
    &:hover {
        cursor: pointer;
    }
}

.modal-next {
    position: fixed;
    right: 0;
    top: 50%;
    opacity: 1;
    z-index: 3;
    display: var(--modal-elements-display);
    user-select: none;
    
    &:hover {
        cursor: pointer;
    }
}

/* applies to all *except* /index.html */
.display-image-container {
    width: 100% !important;
    height: 100% !important;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(254, 254, 254, 1);
    cursor: zoom-in;
}

.display-image-wrapper {
    height: var(--image-height);
    width: var(--image-width);
    transition: opacity var(--display-image-fade-in-time) ease-in-out, transform 0.5s ease-in-out;
    opacity: 0;
    transform: translateY(20px);

}

/* /about-me.html */
.profile-image-container {
    height: var(--me-photo-image-height);
    width: 100%;
    background-image: url("/assets/me.jpeg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

/* all */
.footer-text-div {
    transition: opacity 1s ease-in-out;
}