@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
    --bg-color: #2d0016; /* Default Background */
    --text-color: #fff; /* Default Text Color */
    --subtext-color: #9d9090;
    --textlogo-color: #fff;
    --border-color: #fff; /* Default Border Color */
    --borderhover-color: rgb(0, 128, 0);
    --close-color: #fff; /* Default Close Color */
    --dot-one-color: rgb(0, 128, 0); /* Default Dot 1 Color */
    --dot-two-color: rgb(255, 255, 0); /* Default Dot 2 Color */
    --materialicon-color: #fff;
    --scrollbar-color: rgb(155, 152, 152) #2d0016;
}

.material-icons {
    cursor: pointer;
    color: var(--materialicon-color);
}

.material-icons:hover {
    transform: scale(1.2);
    transition: ease 0.66s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', 'Roboto', sans-serif;
}

body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/*
    Desktop: Navigation, Left Sidebar
*/

nav {
    grid-column: 1 / 3;
    min-width: 250px;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 10px 0px;
    border-right: 1px solid rgba(94, 85, 85, 0.29);
}

.logo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 5px;
}

.text-logo {
    color: var(--textlogo-color);
}

.sidebar-menu {
    padding: 25px 5px;
    border-bottom: 1px solid rgba(94, 85, 85, 0.29);
}

.sidebar-menu > p {
    padding: 15px 7px;
    cursor: pointer;
    justify-content: left;
    align-items: center;
    display: flex;
}

.sidebar-menu > p:hover {
    background: #5e2b2b55;
}

.icon {
    padding-right: 10px;
}

.cert-list {
    overflow-y: scroll;
    scrollbar-width: thin; /* For Firefox */
    margin: 10px 5px;
    padding: 10px 0;
    height: auto;
    scrollbar-color: var(--scrollbar-color);
    border-bottom: 1px solid rgba(94, 85, 85, 0.29);
}

.cert-list > li {
    font-size: 0.875rem;
    padding: 15px 5px;
    letter-spacing: 1.1px;
    cursor: pointer;
    font-weight: bold;
}

.cert-list > li:hover {
    background: #5e2b2b55;
}

.cert-title {
    font-size: 1rem;
    margin: 0 0 20px 5px;
}

.cert-description {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.2px;
    color: var(--subtext-color);
}

.control-center {
    margin: 10px;
    display: flex;
    flex-direction: column;
}

.control-center > .controls > a {
    color: #fff;
}

.controls {
    display: flex;
    justify-content: space-between;
    padding: 25px 10px 0;
    cursor: pointer;
}

.controls > p {
    padding: 10px;
}

/*
    Desktop: Main <main>, Right Side, Header + Content
*/

main {
    grid-column: 3 / 13;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color);

    /* flex might not be needed here, testing */
    display: flex;
    flex-direction: column;
    padding: 0 50px;
}

header {
    margin: 0 0 100px 0;
    padding: 0;
}

div.menu,
.logo-dots {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #fff;
}

div.menu {
    margin-bottom: 10px;
    padding: 5px 10px;
}

.logo-dots {
    padding: 5px;
    display: flex;
    align-items: center;
}

.dot {
    width: 10px;
    height: 10px;
    background: var(--dot-one-color);
    border-radius: 50%;
}

.dot:hover {
    cursor: pointer;
    transform: scale(1.2);
    transition: ease-in-out 0.3s;
}

/* pesudo class to select second dot, for fun */
.dot:nth-child(2) {
    background: var(--dot-two-color);
    cursor: default;
}

.profile-icon {
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    justify-content: center;
    background: #000;
    cursor: pointer;
}

.profile-icon > p {
    font-size: 0.875rem;
    font-weight: 600;
}

.profile-icon:hover {
    border: 2px solid var(--borderhover-color);
    transition: ease-in-out 0.3s;
}

/*
    Main > Header > Staff Names Style
*/

div.staff-names {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
    cursor: pointer;
}

div.staff-names > ul.staff > li:hover {
    background: #5e2b2b55;
    transition: ease-in-out 0.3s;
}

div.staff-names > ul.staff {
    list-style-type: none;
    padding: 7px 15px;
    width: 100%;
    /* horizontal scroll effect */
    overflow: auto;
    white-space: nowrap;
    scrollbar-width: none;
    color: transparent;

    display: flex;
    justify-content: space-between;
    gap: 10px;
}

ul.staff > li {
    width: 25dvh; /* Keep dvh for desktop, will be overridden by mobile media query */
    color: var(--text-color);
    background: #00000066;
    padding: 10px 15px;
    border-radius: 1dvh;
}

/* STAFFNAMES: ANIMATE ON CLICK */
.animation-container {
    position: fixed;
    width: 80%;
    display: none;
    /* Hidden by default, displayed onClick of button */
}

.staff-animate-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.staff-member {
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    z-index: 1001;
}


/* End: Main, Header, Staff Names


/*
    Horizontal Scroll Effect for Main > Sections
*/

.scroll-y {
    /* overflow & whitespace create the horizontal scroll effect, scrollbar-width removes the bar */
    overflow: auto;
    white-space: nowrap;
    /* removes horizontal scrollbar */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    /* workaround... if 'scrollbar-width: none' the images get pushed up on :hover, but set to "thin" and "transparent" prevents that (because it's not added on hover... its just made visible). */
}

.scroll-y:hover {
    scrollbar-color: var(--scrollbar-cover);
}

/*
    End Horiztontal Scroll Effects
*/

.section-title {
    margin: 10px;
}

.section-title > p {
    color: var(--subtext-color);
}

/* #1 Crew Section */
.crew-section-container {
    grid-column: 1 / 13;
    color: var(--text-color);
    background: transparent;
    margin: 0px 10px 100px 0;
    padding: 5px;
    /* Lays crew sections out horizontally */
    display: flex;
    flex-shrink: 0;
}

.crew-flex {
    display: flex;
    flex-direction: row;
    min-width: auto;
    gap: 25px; /* Default gap for desktop */
    justify-content: space-evenly
}

.crew-flex > div {
    display: flex;
    /* places '.title-description' below image */
    flex-direction: column;
    align-items: left;
    justify-content: left;
    margin: 0;
}

.title-description {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 10px 15px;
    text-wrap: wrap;
    min-width: 100%;
}

div.title-description > h3 {
    font-size: 14px;
    letter-spacing: 1.2px;
}

div.title-description > p {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.2px;
    color: var(--subtext-color);
}

.flex-container {
    height: 100%;
    display: block;
    max-width: 25dvh; /* Keep dvh for desktop max-width */
}

/* Crew Images Styles: '.crew-flex' + '.img-specs' container */
.img-specs {
    margin: 0 10px;
    box-shadow: rgba(12, 12, 12, 0.2) 0px 3px 8px 0px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.img-specs-crew {
    border-radius: 5px;
    min-width: 25dvh; /* Keep dvh for desktop */
    min-height: 25dvh; /* Keep dvh for desktop */
}

.img-specs:hover {
    transform: scale(1.05);
    transition: ease-in-out 0.3s;
    cursor: pointer;
}

/* Crew Images */
.john {
    background-image: url("./assets/albumCover/1.png");
}

.spencer {
    background-image: url("./assets/albumCover/1.png");
}

.poorvi {
    background-image: url("./assets/albumCover/1.png");
}

.mirim {
    background-image: url("./assets/albumCover/1.png");
}

.paula {
    background-image: url("./assets/albumCover/1.png");
}

.albert {
    background-image: url("./assets/albumCover/1.png");
}

.lauren {
    background-image: url("./assets/albumCover/1.png");
}

.tim {
    background-image: url("./assets/albumCover/1.png");
}

.mike {
    background-image: url("./assets/albumCover/1.png");
}

/* End of #1 Crew Sections */

/* #2 Layout Section */
.albums-section-container {
    grid-column: 1 / 13;

    color: var(--text-color);
    padding: 15px 0;
    /* Lays crew sections out horizontally */
    display: flex;
    flex-direction: row;
    margin: 0 0 100px 0;
    flex-shrink: 0;
}

.albums-flex {
    display: flex;
    /* places '.title-description' below image */
    flex-direction: column;
    margin: 0;
    min-width: 60dvh; /* Keep dvh for desktop */
    gap: 10px; /* Default gap for desktop */
}

.albums-flex > .flex-container {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
}

.ac-specs {
    min-width: 20dvh; /* Keep dvh for desktop */
    min-height: 20dvh; /* Keep dvh for desktop */
}

/* Album Cover Images */
.ac-one {
    background-image: url("./assets/albumCover/1.png");
}

.ac-two {
    background-image: url("./assets/albumCover/2.png");
}

.ac-three {
    background-image: url("./assets/albumCover/3.png");
}

.ac-four {
    background-image: url("./assets/albumCover/4.png");
}

.ac-five {
    background-image: url("./assets/albumCover/5.png");
}

.ac-six {
    background-image: url("./assets/albumCover/6.png");
}

.ac-seven {
    background-image: url("./assets/albumCover/7.png");
}

.ac-eight {
    background-image: url("./assets/albumCover/8.png");
}

.ac-nine {
    background-image: url("./assets/albumCover/9.png");
}

.ac-ten {
    background-image: url("./assets/albumCover/10.png");
}

/* end of projects Section Styles */

/* Start: #3 Recent Books Section  Style */
.book-section-container {
    grid-column: 1 / 13;
    display: flex;
    flex-direction: row;
    color: var(--text-color);
    margin: 0 0 50px 0;
    flex-shrink: 0;
}

.book-flex {
    display: flex;
    /* places '.title-description' below image */
    flex-direction: row;
    margin: 0;
    padding: 15px 0 0 0;
    gap: 15px; /* Default gap for desktop */
}

.bc-specs {
    width: 25dvh; /* Keep dvh for desktop */
    min-width: 20dvh; /* Keep dvh for desktop */
    min-height: 40dvh; /* Keep dvh for desktop */
}

.book-flex > .flex-container > .img-specs {
    border-radius: 10px;
}

/* Book Cover Images */
.bc-one {
    background-image: url("./assets/bookCover/covert-persuasion.jpg");
}

.bc-two {
    background-image: url("./assets/bookCover/dopamine-nation.jpeg");
}

.bc-three {
    background-image: url("./assets/bookCover/how-to-live-an-extraordinary-life.jpg");
}

.bc-four {
    background-image: url("./assets/bookCover/human-hacking-cover.jpg");
}

.bc-five {
    background-image: url("./assets/bookCover/never-split-the-difference.jpg");
}

.bc-six {
    background-image: url("./assets/bookCover/social-engineering-cover.jpg");
}

.bc-seven {
    background-image: url("./assets/bookCover/thinking-fast-and-slow.jpg");
}

/* ***** End of Main Grid Section ***** */

/*
COLOR PALETTE MODAL POPUP
*/

.color-palette {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: 20dvh;
    width: 25dvh;
    min-width: 20dvh;
    justify-content: end;
    align-items: end;
}

.color-box {
    cursor: pointer;
    width: 5dvh;
    height: 5dvh;
}

/* **************** START: Color Palette Styling */

.cp-default {
    --bg-color: #2d0016; /* dark burgundy */
    --text-color: white;
    --accent-color: #333;
}

.cp-white {
    --bg-color: #ffffff;
    --text-color: #2d0016;
    --close-color: #333;
    --textlogo-color: #333;
    --materialicon-color: #2d0016;
    --dot-two-color: #3b6ecc;
    --scrollbar-color: #646263 rgb(221, 218, 218);
    --border-color: #333;
}

.cp-ylw {
    --bg-color: #ffff00;
    --textlogo-color: #333;
    --text-color: #333;
    --subtext-color: #000000c0;
    --close-color: #333;
    --materialicon-color: #333;
    --dot-two-color: #da0c8b;
    --scrollbar-color: rgb(58, 57, 57) #ffff00f8;
}

.cp-pnk {
    --bg-color: #da0c8b;
    --subtext-color: #ffffffaa;
    --scrollbar-color: rgb(188, 184, 184) #da0c8b;

}

.cp-blu {
    --bg-color: #3b6ecc;
    --subtext-color: #ffffffaa;
    --dot-one-color: #da0c8b;
    --scrollbar-color: rgb(188, 184, 184) #3b6ecc;

}

.cp-prpl {
    --bg-color: #b209fa;
    --close-color: #333;
    --subtext-color: #ffffffaa;
    --scrollbar-color: rgb(188, 184, 184) #b209fa;
}

/* ***************** END: Color Palette Styles */
/* ***************** START: MODAL */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    overflow: hidden;
    background: var(--bg-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.593);

    /* center color palette modal */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.color-palette-container {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.modal-content {
    padding: 10px;
    width: auto;
}

.close {
    color: var(--close-color);
    float: right;
    font-size: 28px;
    font-weight: bold;
    text-align: right;
    cursor: pointer;
}

.cp-text {
    padding: 10px 0px;
    font-weight: 600;
}

/*
 MEDIA QUERIES
*/

/* General Mobile Styles (applies to all orientations when width is <= 780px) */
@media (max-width: 980px) {
    nav {
        display: none; /* Hides sidebar on all mobile screens */
    }

    main {
        grid-column: 1 / 13; 
        padding: 0 10px; 
    }

    .icon-menu > p {
        display: none;
    }

    .crew-section-container,
    .albums-section-container {
        margin: 25px 0;
    }

    .scroll-y:hover {
        scrollbar-color: transparent transparent;
    }

    .section-title {
        margin: 0px 10px;
    }

    header {
        margin-bottom: 25px;
    }

    
    ul.staff > li {
        width: 30vw; 
        max-width: 150px; 
        border-radius: 5px; 
    }

    .flex-container { 
        max-width: 35vw; 
    }

    .img-specs-crew {
        min-width: 30vw; 
        min-height: 30vw; 
    }

    .albums-flex {
        min-width: 70vw; 
    }

    .ac-specs {
        min-width: 25vw;
        min-height: 25vw;
    }

    .book-flex {
        gap: 10px; 
    }

    .bc-specs {
        width: 25vw;
        min-height: 45vw;
    }
}


/* Mobile Landscape Specific Adjustments (refinements for screens between 380px and 780px in landscape) */
@media screen and (min-width: 380px) and (max-width: 980px) and (orientation: landscape) {
    main {
        padding: 0 20px;
        min-width: 380px;
    }

    .crew-flex {
        gap: 20px; 
    }

    .albums-flex {
        min-width: 60vw; 
        flex-direction: column; 
        gap: 30px; 
    }

    .book-flex {
        gap: 20px; 
    }

    ul.staff > li {
        width: 18vw; 
        padding: 8px 12px; 
    }

    .flex-container {
        max-width: 20vw; 
    }

    .img-specs-crew {
        min-width: 15vw; 
        min-height: 15vw; 
    }

    .ac-specs {
        min-width: 15vw;
        min-height: 15vw;
    }

    .bc-specs {
        width: 12vw; 
        min-height: 25vw; 
    }

    div.title-description > h3 {
        font-size: 12px; 
    }
    div.title-description > p {
        font-size: 11px; 
    }
}