@import url('clash-display.css');
@import url('panchang.css');
@import url('chillax.css');

/* Box Model Hack */
* {
     box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/

html {
     font-size: 10px;
     scroll-behavior: smooth;
}

* {
     font-family: sans-serif, serif;
     font-weight: 600;
}

h1 {
     font-size: 3rem;
}

body {
     background: #E5DFD2;
     margin: -1.2rem 0 0 0;
}

.homeBody {
     margin: 0;
}

header {
     background-image: url("../images/Digital\ Designs/Header Image.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     width: 100%;
     height: 40rem;
     margin: 0 auto;
}

.murals {
     background-image: url("../images/Mural\ Art/Flower mural.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}

.boards {
     background-image: url("../images/Board art/Untitled_Artwork\ 1.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}

.illustrations{
     background-image: url("../images/Digital\ Designs/DMT butterfly.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}

.horizontalMenu {
     width: 100%;
     height: 4rem;
     background: #153548;
     padding: 0 20rem;
     margin: 0 auto;
     margin-bottom: 2rem;
}

.horizontalMenu ul {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-evenly;
     align-items: center;
     height: 100%;
     margin: 0;
}

.horizontalMenu li {
     list-style: none;
     font-size: 1.6rem;
}

.horizontalMenu a {
     text-decoration: none;
     color: white;
     display: inline-block;
     transition: all 0.2s ease-in-out;
     font-family: 'ClashDisplay-Semibold';
}

.horizontalMenu a:hover {
     transform: scale(1.2);
}

.drop {
     display: none;
}

.dropMenu {
     display: none;
     margin-bottom: 2rem;
}


@media all and (max-width: 1250px) {
    
     .horizontalMenu {
     display: none;
    }

    .btn {
     width: 100%;
     display: flex;
     justify-content: center;
     font-family: 'ClashDisplay-Semibold';
     margin-top: 0;
    }

    .menuButton {
     background: transparent;
     border: none;
     color: white;
     font-size: 2rem;
     cursor: pointer;
     width: fit-content;
     display: flex;
     justify-content: center;
     transition: all .2s ease-in-out;
    }

    .menuButton:hover {
     transform: scale(1.2);
    }

    .drop {
     width: 100%;
     height: 4rem;
     background: #153548;
     padding: 0;
     margin: 0 auto;
     display: flex;
     align-items: center;
    }


    .dropMenu {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     background: #2A5271;
     margin: 0 auto;
     max-height: 0;
     overflow: hidden;
     transition: all 0.5s ease-in-out;
    }

    .dropMenu.openMenu {
     max-height: 20rem;
    }

    .dropMenu ul {
     padding: 0;
     width: 100%;
     list-style: none;
     text-align: center;
    }
    
    .dropMenu a {
     text-decoration: none;
     color: white;
     line-height: 2.7rem;
     font-size: 1.5rem;
     display: inline-block;
     font-family: 'ClashDisplay-Semibold';
     transition: all .2s ease-in-out;
    }

    .dropMenu a:hover {
     transform: scale(1.2);
    }
}


.selections {
     width: 100%;
     display: flex;
     flex-flow: nowrap row;
     padding: 1rem 4rem 5rem 4rem;
     position: relative;
}

.selections a {
     background-clip: padding-box;
     width: 33.33%;
     height: 50rem;
     display: flex;
     /* border: 10px solid transparent; */
     cursor: pointer;
     text-decoration: none;
     overflow: hidden;
     position: relative;
     border: 1px solid black;
     margin: 0 5px;
}

a div {
     opacity: 0;
     width: 100%;
     height: 100%;
     background: black;
}

.selections div:hover {
     opacity:0.2;
     width: 100%;
     height: 100%;
     display: flex;
     border: 1rem solid transparent;
     cursor: pointer;
     text-decoration: none;
     transition: all .3s ease-in-out;
}

.selections h2 {
     font-size: 2.5rem;
     font-family: 'Panchang-Semibold';
     color: white;
     display: flex;
     align-items: flex-end;
     text-shadow: 1px 1px 1px black;
     margin: 0 0 2rem 2rem;
     position: absolute;
     bottom: 0;
     z-index: 1;
}

@media all and (max-width: 800px) {
     header {
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          width: 100%;
          height: 18rem;
          margin: 0 auto;
     }
     
     .selections {
          width: 100%;
          display: flex;
          padding: 0 4rem 5rem 4rem;
          position: relative;
          flex-flow: wrap row;
     }

     .selections a {
          background-clip: padding-box;
          width: 100%;
          height: 15rem;
          display: flex;
          border: 10px solid transparent;
          cursor: pointer;
          text-decoration: none;
          overflow: hidden;
          position: relative;
          border: 1px solid black;
          margin: 1rem 0;
     }

     .selections h2 {
          font-size: 2rem;
          color: white;
          display: flex;
          align-items: flex-end;
          text-shadow: 1px 1px 1px black;
          margin: 0 0 1rem 1rem;
          position: absolute;
          bottom: 0;
          z-index: 1;
     }

     .boards {
          background-image: url("../images/Board art/horizontal.jpg");
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
     }
}


footer {
     width: 100%;
     height: 5rem;
     background: transparent;
     margin-bottom: 5px;
}

footer ul {
     width: 100%;
     display: flex;
     justify-content: center;
     list-style: none;
     padding: 0;
     gap: 1rem;
}

footer a {
     color: white;
     font-size: 2rem;
}

footer p {
     color: white;
     display: flex;
     justify-content: center;
}


.bio p {
     line-height: 1.5rem;
     font-family: 'Chillax-Regular';
     font-size: 1.3rem;
     /* background: #E5DFD2; */
     padding: 2rem ;
}

.about {
     /* background: #4D738A; */
     background: #E5DFD2;
     height: fit-content;
     width: 80%;
     margin: 1rem auto;
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     position: relative;
}

.aboutBackground {
     background: #4D738A;
}

.headshotGrid {
     width: 30%;
     display: flex;
     justify-content: center;
}

.headshot {
     display: flex;
     flex: 0 1 auto;
     margin: 2rem 0;
     cursor: default;
     transition: none;
     transform: none !important;
}

.bio {
     width: 70%;
     height: fit-content;
     margin: 2rem 0;
     padding: 0 2rem;
}

@media all and (max-width: 1250px) {
    .about {
     display: flex;
     flex-direction: column;
    }
    
     .headshotGrid {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
     }

     .headshot {
          display: flex;
          flex: 0 1 auto;
     }
     
     .bio {
          width: 100%;
          margin: 1rem 0;
          padding: 0 2rem;
          display: flex;
          flex-wrap: wrap;
     }
}

.contact {
     width: 80%;
     margin: 0 auto;
}

.submitButton {
     margin-top: 1rem;
}

label {
     display: block;
     margin: 1rem 0 0 0;
}

textarea {
     width: 100%;
     height: 10rem;
     font-family:Arial, Helvetica, sans-serif;
}

button {
     display: block;
}

input {
     font-family:Arial, Helvetica, sans-serif;
     height: 2.5rem;
     width: 50%;
}

img {
     width: auto;
     height: 30rem;
     margin: .5rem;
     cursor: pointer;
     /* transition: all .2s ease-in-out; */
}

img:hover:not(.fullSize) {
     /* transform: scale(1.02); */

     transition: all .2s ease-in-out;
}

.align {
     display: flex;
     flex-flow: row wrap;
     justify-content: center;
}

#toTop {
     position: fixed;
     bottom: 20px;
     right: 20px;
     text-decoration: none;
     color: white;
     background: black;
     border-radius: 5%;
     padding: 8px;
     z-index: 2;
}

@media all and (max-width: 800px) {
     .align {
          width: 100%;
          display: flex;
          align-items: center;
          flex-flow: column wrap;
     }

     img {
          width: 90%;
          height: auto;
          margin: 1rem 0;
     }

     #toTop {
          position: fixed;
          bottom: 10px;
          right: 10px;
          text-decoration: none;
          color: white;
          background: black;
          border-radius: 5%;
          padding: 8px;
          z-index: 2;
     }
}

@media all and (min-width: 0px) {
.fullSize {
     box-sizing: unset;
     position: fixed;
     display: flex;
     align-items: center;
     max-width: 80%;
     top: 50%;
     left: 50%;
     margin: auto;
     transform: translate(-50%, -50%);
     transition: all 0s;
     border: 500px solid rgba(100, 100, 100, 0.9);
     overflow: hidden;
     z-index: 5;
}
}

@media all and (min-width: 800px) {
    
     .fullSize {
          box-sizing: unset;
          position: fixed;
          display: flex;
          align-items: center;
          max-width: 80%;
          max-height: 100%;
          min-height: 80%;
          top: 50%;
          left: 50%;
          margin: auto;
          transform: translate(-50%, -50%);
          transition: all 0s;
          border: 500px solid rgba(100, 100, 100, 0.9);
          overflow: hidden;
          z-index: 5;
     }
}
/******************************************
/* LAYOUT
/*******************************************/


/******************************************
/* ADDITIONAL STYLES
/*******************************************/