/* --- Color Pallet --- */
:root {
    --black: #060118; /*Xiketic - rgb(6,1,24) */
    --darkBlue: #001268; /*Midnight Blue - rgb(0,18,104) */
    --purple: #4D2087; /*Blue Violet Color Wheel - rgb(77,32,135) */
    --lavender: #EFC9F2; /*Thistle - rgb(239,201,242) */
    --lightBlue: #CCD9FB; /*Periwinkle Crayola - rgb(204,217,251) */
    --grey: #D0CCDD; /*Lavender Gray - rgb(208,204,221) */
    --lightGold: #E7D3B8; /*Almond - rgb(231,211,184) */
    --gold: #FBA924; /*Bright Yellow Crayola - rgb(251,169,36) */
    --green: #627300; /*Avocado - rgb(98,115,0) */
    --white: #FFF5FF; /*Magnolia - rgb(255,245,255) */
}


/* --- General --- */


/* --- Main --- */
main {
    background-color: var(--white);
    color: var(--black);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: -1;
}


/* --- Main:Page Title --- */
main section.page-title {
    width: 100%;
    position: relative;
    padding: 30px 0 0;
    z-index: 2;
}
section.page-title h2 {
    text-align: center;
    margin: 0 auto;
}
section.page-title ul.production-info {
    list-style: none;
    text-align: right;
    padding: 10px 0;
}


/* --- Main: Sub-Gallery --- */
article.sub-gallery {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 30px 0 0;
    margin-bottom: 30px;
}
article.sub-gallery h3 {
    padding-bottom: 10px;
}
article.sub-gallery p.sub-gallery {
    padding: 0 0 10px 20px;
}


/* --- Main: Videos --- */
section.videos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 30px;
}
section.videos iframe{
    margin: 20px auto;
    width: 240px;
    height: 135px;
}


/* --- Main: Audio Tracks --- */
section.audio-tracks {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 30px;
}
section.audio-tracks article.audio-tracks {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    column-gap: 20px;
    margin: 10px auto;
}
article.audio-tracks div {
    width: 100%;
    display: flex;
    flex-direction: column;
}
article.audio-tracks img.gallery-image {
    max-width: 100%;
    max-height: 200px;
}
audio.audio-tracks {
    max-width: 100%;
}

/* --- Main: Gallery --- */
section.gallery {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-bottom: 30px;
}
section.gallery img.gallery-image {
    height: 150px;
    padding: 10px;
    margin: 0 auto;
}
p.photo-credit {
    padding: 10px 30px;
}


/* --- Main: Selected Image --- */
section.selected-image.hidden {
    display: none;
}
section.selected-image {
    background-color: rgba(0,0,0,60%);
    position: fixed;
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-content: center;
    top: 0;
    left: 0;
    padding: 0;
    z-index: 9999999;
}
section.selected-image div {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #FFF;
    width: 300px;
    height: 300px;
    padding: 40px 40px 60px;
    border: 1px solid black;
    border-radius: 10px;
    margin: auto 0;
}
section.selected-image div img.selected-image {
    position: relative;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}
section.selected-image img.exit {
    background-color: rgba(0,0,0,20%);
    position: absolute;
    width: 30px;
    height: 30px;
    top: 10px;
    right: 10px;
    padding: 5px;
    border-radius: 50%;
}
section.selected-image img.prev,
section.selected-image img.next {
    position: absolute;
    opacity: 20%;
    width: 40px;
    height: 40px;
    top: 50%;
    padding: 0;
    transition: 1s ease-in-out;
}
section.selected-image img.prev:hover,
section.selected-image img.next:hover {
    opacity: 100%;
}
section.selected-image img.prev {
    left: 0px;
    transform: rotate(-90deg);
}
section.selected-image img.next {
    right: 0px;
    transform: rotate(90deg);
}
section.selected-image p.selected-photo-text {
    color: black;
    position: absolute;
    margin-right: 40px;
    bottom: 10px;
    left: 40px;
}
section.selected-image p.selected-photo-text span.selected-photo-caption {
    margin-left: 10px;
}


/* --- Individual Projects--- */
ul.plugins { /* on projects_coding.html */
    padding:0 0 20px 50px;
}


/* --- Responsive --- */
@media(min-width: 400px) {
    section.selected-image div {
        width: 360px;
    }
}
@media(min-width: 500px) {
    section.selected-image div {
        width: 450px;
    }
    section.videos iframe{
        margin: 20px auto;
        width: 400px;
        height: 225px;
    }
}
@media(min-width: 600px) {
    section.selected-image div {
        width: 540px;
    }
}@media(min-width: 700px) {
    section.selected-image div {
        width: 630px;
    }
    section.videos iframe{
        width: 560px;
        height: 315px;
    }
}@media(min-width: 800px) {
    section.selected-image div {
        width: 720px;
    }
}@media(min-width: 900px) {
    section.selected-image div {
        width: 810px;
    }
}@media(min-width: 1000px) {
    section.selected-image div {
        width: 900px;
    }
}@media(min-width: 1200px) {
    section.selected-image div {
        width: 1080px;
    }
}
@media(min-width: 1500px) {
    section.selected-image div {
        width: 1350px;
    }
}
@media(min-width: 1800px) {
    section.selected-image div {
        width: 1620px;
    }
}
@media(min-width: 2100px) {
    section.selected-image div {
        width: 1890px;
    }
}


@media (min-height: 400px) {
    section.selected-image div {
        height: 360px;
    }
}@media (min-height: 600px) {
    section.selected-image div {
        height: 590px;
    }
}
@media (min-height: 800px) {
    section.selected-image div {
        height: 790px;
    }
}
@media (min-height: 1000px) {
    section.selected-image div {
        height: 950px;
    }
}@media (min-height: 1200px) {
    section.selected-image div {
        height: 1150px;
    }
}@media (min-height: 1500px) {
    section.selected-image div {
        height: 1450px;
    }
}