/* Your styles here... */
:root {
  /* VARIABLE COLLECTION */
  --text-jones-j-2195-cp: #007abe;
  --bg-jones-j-2195-cp: #75add8;
  --text-rasmussen-r-376-cp: #8bbd32;
  --bg-rasmussen-r-376-cp: #afd073;
  --text-bitting-m-2234-cp: #599fa4;
  --bg-bitting-m-2234-cp: #94bfc2;
  --text-low-s-2450-cp: #e04888;
  --bg-low-s-2450-cp: #f297b5;
  --text-sonia-wallace-b-7567-cp: #945731;
  --bg-sonia-wallace-b-7567-cp: #b6876a;
  --text-cury-r-7549-cp: #f0b60d;
  --bg-cury-r-7549-cp: #f7c451;
  --text-todd-m-2240-cp: #22b18e;
  --bg-todd-m-2240-cp: #96d4bf;
  --text-jung-d-2593-cp: #863d8d;
  --bg-jung-d-2593-cp: #a56da9;
  --text-rosalena-4024-cp: #d5a863;
  --bg-rosalena-4024-cp: #e3c190;
  --text-khoshgozaran-g-7482-cp: #009f56;
  --bg-khoshgozaran-g-7482-cp: #44b87e;
  --text-chan-a-1505-cp: #e66f15;
  --bg-chan-a-1505-cp: #f28f4e;
  --cola-black: #1c1c1c;
  --wbg-bitting-m-2234-cp: rgba(221 234 235 / 0.2);
  --writing-bitting-m-2234-cp: #ddeaeb;
}

/* Solway */
.solway-light {
  font-family: "Solway", serif;
  font-weight: 300;
  font-style: normal;
}

.solway-regular {
  font-family: "Solway", serif;
  font-weight: 400;
  font-style: normal;
}

.solway-medium {
  font-family: "Solway", serif;
  font-weight: 500;
  font-style: normal;
}

.solway-bold {
  font-family: "Solway", serif;
  font-weight: 700;
  font-style: normal;
}

.solway-extrabold {
  font-family: "Solway", serif;
  font-weight: 800;
  font-style: normal;
}

*{
    /* -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility; */
    scrollbar-color: white;
    scrollbar-width: thin;
}


@font-face {
    font-family: 'Reynaldo-SerifMedium';
    src:
        url('../fonts/Reynaldo-SerifMedium.woff2') format('woff2'),
        url('../fonts/Reynaldo-SerifMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Reynaldo-SerifLean';
    src: 
        url('../fonts/Reynaldo-SerifLean.woff2') format('woff2'),
        url('../fonts/Reynaldo-SerifLean.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Reynaldo-SerifHeavy';
    src:
        url('Reynaldo-SerifHeavy.woff2') format('woff2'),
        url('../fonts/Reynaldo-SerifHeavy.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Reynaldo-SerifBold';
    src:
        url('../fonts/Reynaldo-SerifBold.woff2') format('woff2'),
        url('../fonts/Reynaldo-SerifBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* R Italic Bold */
@font-face {
  font-family: 'Reynaldo-ItalicBold';
  src:  url('../fonts/Reynaldo-ItalicBold.woff2') format('woff2'),
        url('../fonts/Reynaldo-ItalicBold.woff') format('woff');
}

/* R Italic Heavy */
@font-face {
  font-family: 'Reynaldo-ItalicHeavy';
  src:  url('../fonts/Reynaldo-ItalicHeavy.woff2') format('woff2'),
        url('../fonts/Reynaldo-ItalicHeavy.woff') format('woff');
}

/* R Italic Lean */
@font-face {
  font-family: 'Reynaldo-ItalicLean';
  src:  url('../fonts/Reynaldo-ItalicLean.woff2') format('woff2'),
        url('../fonts/Reynaldo-ItalicLean.woff') format('woff');
}

/* R Italic Medium */
@font-face {
  font-family: 'Reynaldo-ItalicMedium';
  src:  url('../fonts/Reynaldo-ItalicMedium.woff2') format('woff2'),
        url('../fonts/Reynaldo-ItalicMedium.woff') format('woff');
}

/* R Lefty Bold */
@font-face {
  font-family: 'Reynaldo-LeftyBold';
  src:  url('../fonts/Reynaldo-LeftyBold.woff2') format('woff2'),
        url('../fonts/Reynaldo-LeftyBold.woff') format('woff');
}

/* R Lefty Heavy */
@font-face {
  font-family: 'Reynaldo-LeftyHeavy';
  src:  url('../fonts/Reynaldo-LeftyHeavy.woff2') format('woff2'),
        url('../fonts/Reynaldo-LeftyHeavy.woff') format('woff');
}

/* R Lefty Lean */
@font-face {
  font-family: 'Reynaldo-LeftyLean';
  src:  url('../fonts/Reynaldo-LeftyLean.woff2') format('woff2'),
        url('../fonts/Reynaldo-LeftyLean.woff') format('woff');
}

/* R Lefty Medium */
@font-face {
  font-family: 'Reynaldo-LeftyMedium';
  src:  url('../fonts/Reynaldo-LeftyMedium.woff2') format('woff2'),
        url('../fonts/Reynaldo-LeftyMedium.woff') format('woff');
}



/* Colors */
.michelle-bitting--text{
    color: var(--text-bitting-m-2234-cp)
}

.michelle-bitting--bg{
    background-color: var(--bg-bitting-m-2234-cp)
}

.sandra-low--text{
    color: var(--text-low-s-2450-cp)
}

.sandra-low--bg{
    background-color: var(--bg-low-s-2450-cp)
}

.audrey-chan--text{
    color: var(--text-chan-a-1505-cp)
}

.audrey-chan--bg{
    background-color: var(--bg-chan-a-1505-cp)
}

.heather-rasmussen--text{
    color: var(--text-rasmussen-r-376-cp)
}

.heather-rasmussen--bg{
    background-color: var(--bg-rasmussen-r-376-cp)
}

.roge-cury--text{
    color: var(--text-cury-r-7549-cp)
}

.roge-cury--bg{
    background-color: var(--bg-cury-r-7549-cp)
}

.sarah-rosalena--text{
    color: var(--text-rosalena-4024-cp)
}

.sarah-rosalena--bg{
    background-color: var(--bg-rosalena-4024-cp)
}

.juliette-jones--text{
    color: var(--text-jones-j-2195-cp)
}

.juliette-jones--bg{
    background-color: var(--bg-jones-j-2195-cp)
}

.brian-sonia-wallace--text{
    color: var(--text-sonia-wallace-b-7567-cp)
}

.brian-sonia-wallace--bg{
    background-color: var(--bg-sonia-wallace-b-7567-cp)
}

.daeun-jung--text{
    color: var(--text-jung-d-2593-cp)
}

.daeun-jung--bg{
    background-color: var(--bg-jung-d-2593-cp)
}

.gelare--text{
    color: var(--text-khoshgozaran-g-7482-cp)
}

.gelare--bg{
    background-color: var(--bg-khoshgozaran-g-7482-cp)
}

.maylee-todd--text{
    color: var(--text-todd-m-2240-cp)
}

.maylee-todd--bg{
    background-color: var(--bg-todd-m-2240-cp)
}

/* Scrollbar  */
::-webkit-scrollbar{
  height: .25em;
  width: 1em;
  border-left:black 1px solid;
}

::-webkit-scrollbar-thumb{
  border-radius: 0px;
  background: black;
  height: .25em;
  width: .25em;
  opacity: 0;
}

::-webkit-scrollbar-thumb:hover{
  border-radius: 0px;
  background: #f2f3f9;
  height: .25em;
  opacity: 100;
}



/* Type Styles */
h1{
    font-family: "Reynaldo-SerifBold", "Solway", serif;
    font-size: 6rem;
    font-weight: 700;
	font-style: normal;
    line-height: 6rem; /* 76.923% */   
    text-align: center; 
    margin-top: -8rem;
}

h2 {
    font-family: "Reynaldo-SerifBold","Solway", serif;
    font-size: 2rem;
    font-weight: 700;
	font-style:normal;
    line-height: 1.6rem; /* 76.923% */   
    text-align: left; 
}

h3{
    text-decoration: none;
    transition: transform .5s;
}

h3:hover{
    transform: scale(1.1);
    transform: ease-in-out;
}

h4{
    font-family: "Reynaldo-SerifMedium","Solway", serif;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.8rem; /* 76.923% */   
    margin-bottom: .2rem;
}

h5{
    font-family: "Reynaldo-SerifBold","Solway", serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.4rem; /* 76.923% */   
    margin-bottom: .2rem;
}

.artist-names-desktop{
    font-family: "Reynaldo-SerifBold","Solway", serif;
    font-weight: 700;
    font-size: 3.5rem;
    font-weight: normal;
	font-style: normal;
    line-height: 2.7rem; /* 76.923% */    
}

.body-text{
    font-family: "Reynaldo-SerifLean","Solway", serif, "Solway", serif;
    font-size: 1rem;
    line-height: 1.2rem; /* 96.296% */
    color: white;
    font-weight: normal;
	font-style:normal;
    font-weight: 400;
}

@media (max-width: 600px) {
   .body-text{
    font-size: 1.2rem;
    line-height: 1.4rem; /* 96.296% */
    }
}

.body-text p{
    margin-bottom: .7rem;
}

.caption-title{
    font-size: 1.2rem;
    font-family: "Reynaldo-SerifMedium", "Solway", serif;
    font-weight: 500;
    line-height: 1.3rem;
}

.caption-number{
    font-size: 1.2rem;
    font-family: "Reynaldo-SerifHeavy", "Solway", serif;
    font-weight: 700;
    line-height: 1.3rem;
}

.caption-date{
    font-size: 1.2rem;
    font-family: "Reynaldo-SerifLean", "Solway", serif;
    font-weight: 400;
    line-height: 1.3rem;
}

.caption-description{
    font-size: 1rem;
    font-family: "Reynaldo-SerifLean", "Solway", serif;
    font-weight: 400;
    line-height: 1.1rem;
}




/* Nav */
nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: fit-content;
    padding: .8rem 1rem 1rem 1rem;
    display: flex;
    justify-content: space-between;
    background-color: var(--cola-black);
    z-index: 500;
}

.nav-text{
    font-family: "Reynaldo-SerifMedium", "Solway", serif;
    font-size: 1.5rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5rem; /* 96.296% */
    color: white;
    text-align: center;
}

nav p:hover{
    color:#797979 !important;
}
 
/* Artist Names Dropdown */

.artists-dropdown-content{
    position: fixed;
    top: 3rem;
    z-index: 200;
    left: 0;
    padding: 1rem;
    width: 100%;
    height: fit-content;
    background-color: #fff;
    justify-content: space-between;
    display: flex; 
    flex-direction: row;
}

@media (max-width: 1250px) {
    .artists-dropdown-content{
        width: fit-content;
        flex-direction: column;
    }

    .artists-dropdown-name{
        padding-bottom: .2rem;
    }
}

.artists-dropdown{
    cursor: grab;
}

.artists-dropdown-name{
    width: fit-content;
    height: fit-content;
}

/* General */
body{
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    background: var(--COLA-Black, #1C1C1C);
}


/* Home Page*/
.home-container{
    position: relative;
    display: block;
    width: 100vw;
    height: 100vh;
    background-color: white;
    margin:auto;
    z-index: -10;
}

.home--image-container{
    position: relative;
    display: block;
    flex-direction: column;
    align-items: center;
    margin: auto;
    width:fit-content;
    height: fit-content;
    margin-top: 15vh;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
}

.home--image-container img{
    height: auto;
    width: 20vw;
    margin: auto;
}

.home--image-container h1{
    margin-top: .1rem;
    
}

.home--image-container h2{
    padding-bottom: 1rem;
}

@media (max-width: 1000px) {
  .home--image-container{
    max-height: 90vh;
    max-width: 90vw;
    margin-top: 10vh;
    }

    .home--image-container img{
    height: 60vh;
    width: auto;
    }
}

.home-desktop--artist-names{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    overflow: hidden;
}

.home-desktop--artist-names div{
    position: absolute;
    display: block;
    width: fit-content;
    height: fit-content;
}

@media (max-width: 1000px) {
  .home-desktop--artist-names{ display:none;}
}

.michelle-bitting{
    left: 5vw;
    top: 12vh;
}

.audrey-chan{
    left: 13vw;
    top: 25vh;
} 

.sandra-low{
    left: 68vw;
    top: 15vh;
}   

.heather-rasmussen{
    left: 74vw;
    top: 32vh;
}   

.roge-cury{
    left: 7vw;
    top: 40vh;
}  

.sarah-rosalena{
    left: 64vw;
    top: 45vh;
}   

.juliette-jones{
    left: 14vw;
    top: 55vh;
}  

.brian-sonia-wallace{
    left: 72vw;
    top: 64vh;
}

.daeun-jung{
    left: 3vw;
    top: 67vh;
}

.gelare{
    left: 6vw;
    top: 83vh;
}

.maylee-todd{
    left: 68vw;
    top: 80vh;
}


/* Artist Pages */
.artist-block{
    margin-top: 7vh;
    width: 100vw;
    height: 93vh;
    display: flex;
    flex-direction: row;
    background-color: #fff;
    position: relative;
    overflow-y: hidden;
    overflow-x: scroll;
}

@media (max-width: 800px) {
  .artist-block{
    flex-direction: column;
    height: fit-content;
    }
}

/* Profile Panel */
.profile-panel{
    position: sticky;
    left: 0;
    top: 0;
    display: flex;
    width: fit-content;
    height: 100vh;
    padding: 1rem 1rem 2rem 1rem;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    align-self: stretch;
    z-index: 100;
    overflow-y: scroll;
}

@media (max-width: 800px) {
  .profile-panel{
        width: 100vw;
        margin: auto;
        height: fit-content;
    }
}

.profile-panel--portrait-video{
    width: 20vw;
    height: auto;
    align-self: stretch;
    aspect-ratio: 314/313;
}


.profile-panel--desktop-video{
    width: 20vw;
    height: auto;
    align-self: stretch;
    aspect-ratio: 157/88;
}

@media (max-width: 410px){
    .profile-panel--desktop-video{
        width: 90vw;
        margin: auto;
    }
}

@media (min-width: 410px) and (max-width: 800px){
    .profile-panel--desktop-video{
        width: 60vw;
        margin: auto;
    }
}

.profile-panel--text{
    width: 100%;
    height: fit-content;
    align-items: center;
}

.profile-panel h2{
    font-size: 2.8rem;
    line-height: 2.2rem;
    margin-bottom: .5rem;
}

/* 
.profile-panel p{
    align-self: stretch;
    width: 20vw;
} */

.profile-panel--description{
    font-family: "Reynaldo-SerifMedium", "Solway", serif;
    font-weight: 500;
    font-size: 1.3rem;
    font-style: normal;
    line-height: 1.2rem;
}

@media (max-width: 1100px){
    .profile-panel h2{
        font-size: 2.2rem;
        line-height: 1.7rem;
    }

    .profile-panel--description{
    font-family: "Reynaldo-SerifMedium", "Solway", serif;
    font-weight: 500;
    font-size: 1rem;
    font-style: normal;
    line-height: 1.1rem;
    }   
}


@media (max-width: 410px){
    .profile-panel--portrait-video{
        width: 90vw;
        margin: auto;
    }

    .profile-panel--text{
        width: 90vw;
        margin: auto;
    }   
}

@media (min-width: 410px) and (max-width: 800px){
    .profile-panel--portrait-video{
        width: 60vw;
        margin: auto;
    }

    .profile-panel--text{
        width: 60vw;
        margin: auto;
    }  
}

/* Exhibition Panel */
.exhibition-panel{
    display: flex;
    position: relative;
    width: fit-content;
    height: 100%;
    padding: 0 2.25rem;
    align-items: center;
    gap: 2rem;
    flex-shrink: 0;
    align-self: stretch;
    overflow: auto;
    white-space: nowrap;
    /* margin-left: 25vw; */
}

@media (max-width: 800px) {
  .exhibition-panel{
        width: 100vw;
        height: fit-content;
        flex-direction: column;
    }
}

.exhibition-panel--divider-block{
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    overflow-x: hidden;
    width: 20vw;
    height: 100%;
}

.svg-section{
    max-width: 12vw;
    display: block;
    padding-top: 70vh;
}

@media (min-width: 1200px) {
.svg-section{
    max-width: 12vw;
}
.exhibition-panel--divider-block{
    width: 12vw;
    height: fit-content;
}
}

@media (max-width: 800px) {
.exhibition-panel{
    overflow-x: hidden;
}
.svg-section{
    height: fit-content;
    max-width: 12vw;
    padding-top: 1rem;
}
.exhibition-panel--divider-block{
    height: fit-content;
    width: 100%;
}

.photo-block--caption-section p{
    padding-left: 1rem;
}

}

@media (max-width: 600px) {
.svg-section{
    max-width: 30vw;
}
}

/* Photo block */
.exhibition-panel--photo-block{
    width: fit-content;
    height: 100%;
    display: block;
    padding:1rem;
}

.photo-block--photo-section{
    height: 70vh;
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.photo-block--photo-section img{
    max-height: 60vh;
    max-width: 60vw;
}

.photo-block--caption-section{
    height: fit-content;
    max-width: 100%;
    text-wrap: wrap;
}

/* .caption-section{
    height: fit-content;
    width: 100%;
} */

@media (max-width: 800px) {
.exhibition-panel{
    width: 100vw;
}

.photo-block--photo-section{
    height: fit-content;
    width: 100%;
    margin-bottom: 2rem;
    padding: 1rem;
}

.photo-block--photo-section img{
    max-height: 60vh;
    max-width: 60vw;
}

.photo-block--caption-section{
    height: fit-content;
    max-width: 60vw;
    padding: 0;
}

}

iframe{
    width: 65vw;
    height: 65vh;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 600px) {
.photo-block--photo-section img{
    max-height: 100vh;
    max-width: 100vw;
    padding: 1rem;
}

.photo-block--caption-section{
    height: fit-content;
    max-width: 100vw;
    padding: 1rem;
}

iframe {
    width: 92vw;
    height: 65vh;
    padding: 1rem;
    margin: 1rem;
}
}



/* Footer */
footer{
    position: relative;
    width: 100vw;
    height: fit-content;
    padding:  1rem 1rem 3rem 1rem;
    display: flex;
    justify-content: space-between;
    background-color: var(--cola-black);
    overflow-x: hidden;
    overflow-y: hidden;
}

footer div{
    width: 30%;
}

@media (max-width: 1000px) {
  footer{
    padding-top: 3rem;
    flex-direction: column;}
  footer div{width: 80%; margin: auto;}
}

@media (max-width: 600px) {
  footer div{width: 100%;}
}