/* General */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;  
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

/* CHROME */
/* Chrome version 29 and above */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution: .001dpcm) {
selector{ property: value; }

    .pageTitle {
        font-size: 1px;
    }

    li { 
        font-size: 20px;
    }

    /* responsive grid */ 
    @media (max-width: 900px){
        .main .welcome { 
            font-size: 18px;
        }

        .grid .middle .photography, .grid .leftSideTop .about, .grid .leftSideBottom .projects, .grid .middleL .music, .grid .middleR .connectDiv { 
            font-size: 17px;
        }
    }

    .main .welcome { 
        font-size: 23px;
    }

    .middle .photography, .leftSideTop .about, .leftSideBottom .projects, .middleL .music, .middleR .connectDiv { 
        font-size: 20px;
    }

    .connectContents .connectInfo, .connectContents .connectForm .formInput, .connectContents .connectForm .thanks{ 
        font-size: 18px;
    }

    .aboutGrid .summary .aboutInfo, .aboutGrid .aboutPic .highlights, .btnContainer .chatBtn{
        font-size: 18px;
    }

    /* TODO:  REsponsiveness fro Projects Page */

  
    .musicExplanation { 
        font-size: 18px;
    }
}


/* Navigation Header */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.3rem;
}

.navlinks a {
    color: rgb(91, 91, 91);
    padding: 5px;
}

.title, .title a{
    font-size: 2.5rem;
    color: rgb(41, 41, 41);
}

.menu {
    display: flex;
    gap: 1em;
    font-size: 19px;
}

.menu li:hover {
    color: black;
    border-radius: 5px;
    transition: 0.3s ease;
    background-color: rgba(177, 177, 177, 0.167);
}

.menu li {
    padding: 5px 14px;
}

.other {
    position: relative;
}

.dropdown {
    background-color:  rgba(187, 197, 201, 0.473);
    padding: 1em 0;
    position: absolute;
    display: none;
    border-radius: 8px;
    top: 35px;
}

.dropdown li + li{
    margin-top: 10px;
}

.dropdown li {
    padding: 0.5em 1em;
    width: 8em;
    text-align: center;
}

.dropdown li:hover {
    background-color:  #d9e7f0;
 }

.other:hover .dropdown {
    display: block;
    z-index: 10;
}

/* For responsive Navigation Header */
/* checkbox hack */
input[type=checkbox]{
    display: none;
}

/* hamburger menu */
.hamburger {
    display: none;
    user-select: none;
}

/* media queries  786 old size*/
@media (max-width: 600px){
    .menu {
        display: none;
        position: absolute;
        background-color: rgba(255, 255, 255, 0.927);
        right: 0;
        left: 0;
        text-align: center;
        padding: 16px 0;
        margin-top: 10px;
        border-radius: 0 0 0 10px;
    }
    
    .menu li:hover {
        display: inline-block;
        background-color: rgba(255, 255, 255, 0.789);
        transition: 0.3s ease;
    }

    .menu li + li {
        margin-top: 12px;
    }

    input[type=checkbox]:checked ~ .menu{
        display: block;
        z-index: 10;
    }
    
    .hamburger {
        color: black;
        display: block;
    }

    .dropdown {
        left: 50%;
        top: 30px;
        transform: translateX(35%);
    }

    .dropdown li:hover{
        background-color: #b1aa8d;
    }
}

/* INDEX PAGE */
.main     { grid-area: main; }
.leftSideTop { grid-area: sideTop; }
.leftSideBottom {grid-area: sideBottom; }
.middle   { grid-area: middle; }
.middleL  { grid-area: midleft;}
.middleR  { grid-area: midright;}

.grid {
    position: block;
    display: grid;
    grid: 
    'main main main main main main'
    'middle middle middle midleft midleft midleft'
    'sideTop sideTop sideBottom sideBottom midright midright';
    grid-gap: 3%;

    padding: 10px;
    padding-left: 5rem;
    padding-right: 5rem; 

    margin-bottom: 10%;
    margin-left: 5%;
    margin-right: 5%;

    height: 10%;
}

.grid > div {
   /* background-color:rgb(194, 176, 189);*/
    text-align: center;
   
}

.grid .connect {
    background-color:rgb(232, 232, 232);
}

/* responsive grid */ 
@media (max-width: 900px){

    .grid{
        position: relative;
        display: grid;
        grid:
        'main main'
        'sideBottom midright'
        'middle middle'
        'midleft sideTop';
        grid-gap: 3%;
        padding: 10px;
        margin-bottom: 10rem;
        margin-left: 5%;
        margin-right: 5%;
    }

    .leftSideTop, .leftSideBottom {
        height: 100%;
        width: 100%;
        margin-right: 10%;
    }

    .middle {
        height: 20rem;
    }

    .middleL, .leftSideTop {
        height: 20rem;
    }
    
    .leftSideTop .about, .leftSideBottom .projects, .middle .photography, .middleR .music {
        padding-top: 6%;
    }

    .middleR .connectDiv {
        text-align: left;
        padding-right: 5%;
        padding-bottom: 30%;
    }

    .main .welcome {
        font-size: 22px;
    }
    .leftSideTop .about, .leftSideBottom .projects, .middle .photography, .middleL .music, .middleR .connectDiv {
        font-size: 20px;
    }

    .footer {
        display: block;
        position: absolute;
        background-color: #cfcfcf6a;
        
        width: 100%;
        text-align: right;
        padding: 4rem 1.7rem 1.3rem 0;
        font-size: 16px;
        color: rgb(116, 116, 116);
    }
}

/* HOME PAGE */
/* all squares */
.main, .leftSideTop, .leftSideBottom, .middle, .middleL, .middleR, .connect {
    position: relative;
    text-align: center;
    color:white;
   
}

/* all images */
.homeImage, .photographyImage, .aboutImage, .projectsImage, .musicImage, .connectImage {
    height: 100%;
    width: 100%;
    border-radius: 30px;
    display: block;
}

.photography:hover, .about:hover, .projects:hover, .music:hover, .connectDiv:hover, .middleR:hover{
    background-color: #e4e4e425;
}

/* square texts */
.welcome, .photography, .about, .projects, .music {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: white;
    font-size: 21px;
}

.middleR .connectDiv{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: white;
    font-size: 18px;
}


/* top square */
.welcome {
    background-color: rgba(0, 0, 0, 0.059);
    width: 100%;
    padding: 2%;
    font-size: 23px;
}   

/* middle square - aligning text*/
.photography {
    height:100%;
    width: 100%;
    display: block;
   
    text-align: right;
    padding-right: 5%;
    padding-top: 2%;

    background-color: rgba(0, 0, 0, 0);
    border-radius: 30px;
    border-style:none;
}

/* side square - aligning text */
.about, .projects {
    height: 100%;
    width: 100%;
    display: block;
   
    text-align: right;
    padding-right: 10%;
    padding-top: 5%;

    background-color: rgba(0, 0, 0, 0);
    border-radius: 30px;
    border-style:none;
}

/* music square - aligning text */
.music {    
    height:100%;
    width: 100%;
    display: block;
   
    text-align: right;
    padding-right: 7%;
    padding-top: 3%;

    background-color: rgba(0, 0, 0, 0);
    border-radius: 30px;
    border-style:none;
}

/* connect tile */
.connectDiv{

    height: 100%;
    width: 100%;
    display: block;
   
    text-align: left;
    padding-left: 7%;
    padding-right: 5%;
    padding-top: 170%;


    background-color: rgba(0, 0, 0, 0);
    border-radius: 30px;
    border-style:none;

    /*background-color:rgba(91, 91, 91, 0.065);
    border-radius: 400px;

    /* fill the grid slot */ 
   /* display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
    height: 100%; */
}

/* connect tile text + link */
/*
.connectDiv {
    color: black;
    font-size: 20px;
   
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 50%;
    padding-bottom: 55%;
}
*/

/* under construction text */ 
.construction {
    font-size: 1.6rem;
    padding: 5rem;
    text-align: center;
}

/* footer */
.footer {
    display: block;
    position: absolute;
    margin-top: 3%;
    background-color: #cfcfcf6a;
    
    width: 100%;
    text-align: right;
    padding: 4rem 1.7rem 1.3rem 0;
    font-size: 16px;
    color: rgb(116, 116, 116);
}


/* page titles */
.pageTitle {
    padding: 3rem;
    text-align: center;
    font-size: 3.5rem;
}

/* CONNECT PAGE */ 
.connectImage { grid-area: image;}
.connectInfo  { grid-area: text; }
.connectForm  { grid-area: form;}
.social       { grid-area: social; }

.connectContents {
    position: relative;
    display: grid;
    grid:
    'image image text text text'
    'image image form form form'
    'image image form form form'
    'social social social social social';
    grid-gap: 5%;
    padding: 20px;
    margin-bottom: 10rem;
    margin-right: 5%;
    margin-left: 5%;
}

.connectImage .connectPic {
    background-color:black;
    width: 100%;
    height: 100%;
    border-radius: 30px;
}

.connectInfo {
    font-size: 18px;
}

.social {
    display: flex;
    justify-content: center;    
    align-items: center;
    font-size: 14px;
    margin-top: 5rem;
}

.spacer{
    padding: 1rem;
}
.connectForm {
    font-size: 18px;
}

.connectForm .formText {
    text-anchor: start;
}

.connectForm .formInput, .connectForm .formText {
    padding: 6px;
    border-radius: 10px;
    margin: 5px 0 5px 0;
    border-color:rgba(100, 100, 100, 0.180);
    font-size: 18px;
}
.connectForm .formSubmit { 
    font-size: 16px;
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    border-color:rgba(100, 100, 100, 0.180);
}

.connectForm .formSubmit:hover{ 
    background-color:rgba(198, 198, 198, 0.542);
}

.formText {
    width: 100%;
    height: 9rem;
} 

/* responsive grid */ 
@media (max-width: 700px){

    .connectContents{
        position: relative;
        display: grid;
        grid:
        'image image text'
        'form form form'
        'social social social';
   
        grid-gap: 5%;
        padding: 10px;
        margin-bottom: 50px;
    }

    .connectForm .formText { 
        height: 8rem;
    }
}

@media (max-width: 400px){
    .connectContents{
        position: relative;
        display: grid;
        grid:
        'image'
        'text'
        'form'
        'social';
        grid-gap: 5%;
        padding: 10px;
        margin-bottom: 50px;
    }

    .connectImage .connectPic {
        width: 100%;
    }

}

/* form text resizing */ 
@media (max-width: 800px) {
    .formText{
        height: 4rem;
    }
}

@media (max-width: 770px) {
    .formText{
        height: 3rem;
    }
}

/* thanks message after submitting a form */
.thanks { 
    margin-top: 5px;
    border-radius: 10px;
    background-color: #d9e7f090;
    padding: 10px;
}

/* MUSIC PAGE */ 
.musicHeader, .projectsHeader {
    text-align: center;
    font-size: 20px;
    margin: 0 5% 0 5%;
}

/* bottom section */
.tab {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    margin: 0 10% 0 10%;
    
}

.tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;

    font-size: 18px;
    font-weight: 1000;
    color:rgb(152, 152, 152);
    transition: 0.3s;
}

.tab button:hover {
    color: black;
   /* background-color: #ddd; */
}

/* when the button is active */
.tab button.active {
    color: black;
    /*background-color: #ccc;*/
}

.tabContent {
    display: none;
    margin: 0 5rem 0 5rem;
    padding: 1rem 5rem 1rem 6rem;

    font-size: 18px;
    
    border-top: none;
    animation: fadeEffect 1s; /* fade in */
}

@keyframes fadeEffect {
    from {opacity: 0}
    to {opacity: 1;}
}

.tabContent .recordingContainer {
    position: relative;
    display: flex;
 }

.tabContent .recordingContainer .leftRec, .tabContent .recordingContainer .rightRec {
    width: 100%;
    text-align: center;
}

.tabContent .recordingContainer audio {
    width: 60%;
    background-color: rgb(181, 191, 229);
    border-radius: 15px;
}

.onePlay { grid-area: one; }
.twoPlay { grid-area: two; }
.threePlay { grid-area: three; }
.fourPlay { grid-area: four; }

.tabContent .playlistContainer {
    align-content: center;
    position: relative;
    display: grid;
    grid: 'one two three four';
    grid-gap: 2%;
}

@media (max-width: 900px) {
    .tabContent .playlistContainer {
        display: grid;
        position: relative;
        grid: 
        'one'
        'two'
        'three'
        'four';
        overflow:scroll;
      
    }
    .tabContent sharingText { 
        padding-top: 2%;
    }
}

.tabContent .playlistContainer iframe {
    width: 100%;
}

.tabContent .sharingText {
    padding-top: 1%;
}

.tabContent {
    margin-bottom: 5rem;
}

/* PHOTOGRAPHY PAGE */
.gallery, .optionGallery, .subGallery {
    display: none;
    padding: 1rem 4rem 3rem 5rem;

    text-align: center;
    font-size: 18px;
    
    border-top: none;
    animation: fadeEffect 1s; /* fade in */
}

.gallery .row, .optionGallery .biRow { 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 4px;
}

/* four equal columns */
.gallery .column, .subGallery .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

/* two columns for NY ptions */
.optionGallery .biCol { 
    flex: 50%;
    max-width: 45%;
    padding: 0 4px;
}

.gallery img, .optionGallery img, .subGallery img{
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

.optionGallery img {
    max-height:max-content;
}


/* responsive - make two columns instead of four */
@media screen and (max-width: 800px) {
    .gallery .column, .subGallery .column {
        flex: 50%;
        max-width: 50%;
    }
}

/* stack */
@media screen and (max-width: 600px) {
    .gallery .column , .optionGallery .biCol, .subGallery .column{
        flex: 100%;
        max-width: 100%;
    }
}

.subCat { 
    position: relative;
    text-align: center;
    color: white;    
    border: none;
    background-color: white;
    z-index: top;
    padding: .24rem;
}

.subCat:hover {
    background-color: #e4e4e425;
}

.subCat .option {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight:bold;
    font-size: 23px;
    width: 100%;
}