/* ~~~~~~~~~~~~~~~~~~~~~~~ overall info ~~~~~~~~~~~~~~~~~~~~~~~ */

/* colors on the page */
:root {
  --offWhiteColor: #e2eb98;
  --offWhiteColor2: #ebd598;
  --brightColor1: #bad9a2;
  --brightColor2: #9dc4b5;
  --darkerColor1: #9a98b4;
  --darkerColor2: #585481;
  --reddishColor: #A44A3F;
  /*  to use these variables you put var(--variableName)  */
}

body {
  margin: 0px;
  padding: 0px;
  font-size: 20px;
  background-color: var(--offWhiteColor);
  overflow: hidden;

  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.firstPage {
width: 100%;
height: calc(100vh - 190px);
background: rgb(226,235,152);
background: -moz-linear-gradient(0deg, rgba(226,235,152,1) 50%, rgba(217,201,162,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(226,235,152,1) 50%, rgba(217,201,162,1) 100%);
background: linear-gradient(0deg, rgba(226,235,152,1) 50%, rgba(217,201,162,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e2eb98",endColorstr="#d9c9a2",GradientType=1);
display: flex;
justify-content: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~ header: my name and info ~~~~~~~~~~~~~~~~~~~~~~~ */

.headerContainer {
  position: absolute;
  top: 18px;
  right: 10%;
}

.header {
  font-family: "Yatra One", system-ui;
  transition: font-size 1s;
  font-weight: 800;
  line-height: 0.8;
  position: relative;
  z-index: 100;
  text-align: right;
  cursor: pointer;
}

/* when you open a panel the header shrinks to fit more aesthetically */
.smallFont {
  font-size: 45px;
}
.bigFont {
  font-size: 74px;
}

.subHeader {
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.subHeader h2 {
  font-weight: 500;
  font-size: 30px;
  margin-top: 0px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~ the first panel: projects ~~~~~~~~~~~~~~~~~~~~~~~ */


/* new project */

.miniPhotos {
  /* margin-top: 95px; */
  /* position: absolute; */
      /* object-fit: cover;
      max-height: fit-content;
      width: 100%; */
      /* border: 2px solid rgb(96 139 168); */
      align-self: end;
      min-width: 5%;
      justify-content: space-evenly;
      z-index: 1;
      transition-duration: .2s;

}

.miniPhotos:hover {
  transform: scale(1.05);
}

.backgroundImage {
  z-index: 0;
}

#frame0 {
    max-width: 13%;
    margin-left: 1%;
    margin-bottom: 41%;
} 

#frame1 {
    max-width: 13%;
    margin-left: -13%;
    margin-bottom: 22%;
}
#frame2 {
    max-width: 14%;
    margin-left: -6%;
    margin-bottom: 34%;
}

#frame3 {
    max-width: 9%;
    margin-left: -15%;
    margin-bottom: 16%;
}

#frame4 {
    max-width: 10%;
    margin-left: -6%;
    margin-bottom: 24%;
}
#frame5 {
max-width: 16%;
    margin-left: -10%;
    margin-bottom: 13%;
}
#frame6 {
     max-width: 11%;
    margin-left: -8%;
    margin-bottom: 34%;
    border-radius: 20%;
}
#frame7 {
    max-width: 16%;
    margin-left: -17%;
    margin-bottom: 3%;
}
#frame8 {
    max-width: 16%;
    margin-left: -5%;
    border-radius: 20%;
    margin-bottom: 19%;
}
#frame9 {
    max-width: 9%;
    margin-left: -12%;
    margin-bottom: 7%;
}
#frame10 {
    max-width: 10%;
    margin-left: -5%;
    margin-bottom: 17%;
    rotate: 5deg;
}
#frame11 {
    max-width: 11%;
    margin-left: -6%;
    margin-bottom: 25%;
    rotate: -5deg;
}
#frame12 {
    max-width: 20%;
    margin-left: -13%;
    margin-bottom: 3%;
    rotate: 5deg;
}
#frame13 {
    max-width: 18%;
    margin-left: -13%;
    margin-bottom: 15%;
    border-radius: 20%;
}
#frame14 {
    max-width: 12%;
    margin-left: -4%;
    margin-bottom: 7%;
}
#frame15 {
    max-width: 15%;
    margin-left: -12%;
    margin-right: 1%;
    margin-bottom: 26%;
    rotate: 25deg;
}


.miniPhotoGrid {
  display: flex;
  height: calc(-400px + 100vh);
  align-self: flex-end;
    max-width: 150vh;
    justify-content: space-evenly;
  /* display: grid;
  grid-template-areas:
    "1a 2a 3a 4a 5a 6a 7a 8a 9a 10a"
    "1b 2b 3b 4b 5b 6b 7b 8b 9b 10b"
    "1c 2c 3c 4c 5c 6c 7c 8c 9c 10c";
    height: calc(-400px + 100vh);
    align-self: flex-end;
    width: 100vw;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; */

}

.projectBox {
  display: flex;
  background-color: #585481;
  margin: 50px;
}

#projectImage {
  background-color: blue;
  max-width: 300px;
  max-height: 300px;
}








/*  */

.projectWrapper {
  position: absolute;
  bottom: 95px;
  max-height: 100vh;
  background-color: var(--brightColor1);
  z-index: 10;
  width: 100%;
  transition: max-height 1s;
}

.hoverTitle:hover {
  /* font-style: italic; */
  font-weight: 600;
  font-size: 68px;
  /* both the project and about title are hovertitles and have this appearance on hover */
}

.projectTitle {
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 400;
  font-size: 70px;
  padding-left: 10%;
  height: 95px;
  cursor: pointer;
}

.projectContents {
  height: 90vh;
  max-height: 0px;
  display: flex;
  justify-content: center;
  overflow: scroll;
  -ms-overflow-style: none; 
  scrollbar-width: none;
  transition: max-height 1s;
  background: rgb(157,196,181);
  background: -moz-linear-gradient(0deg, rgba(157,196,181,1) 0%, rgba(186,217,162,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(157,196,181,1) 0%, rgba(186,217,162,1) 100%);
  background: linear-gradient(0deg, rgba(157,196,181,1) 0%, rgba(186,217,162,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9dc4b5",endColorstr="#bad9a2",GradientType=1);
/*   align-items: center; */
}
.projectContents::-webkit-scrollbar {
  display: none;
/* hides scrollbar on safari and chrome   */ 
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ the contents within the project panel ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.mainFrame {
  margin: auto 0;
}

.tabContainer {
  display: flex;
  position: relative;
  z-index: 2;
  /* The container holding the three tabs on the inner project details */
}

.tabContainer.hidden {
  display: none;
}

/* Stylizes all three tabs */

.tab {
  cursor: pointer;
  background-color: var(--offWhiteColor2);
  width: auto;
  height: 24px;
  border-radius: 10px 10px 0px 0px;
  padding: 3px 15px 3px 15px;
  margin-left: 10px;
  box-shadow: 3px 3px 3px var(--darkerColor1);
}

.tab:hover {
  font-weight: 700;
  font-style: italic;
}

.tab.focus {
  background-color: var(--offWhiteColor);
}

.mainBody {
  background-color: var(--offWhiteColor);
  border-radius: 10px;
  height: 275px;
  width: 520px;
  padding: 30px;
  position: relative;
  z-index: 3;
  box-shadow: 3px 3px 3px var(--darkerColor1);
/*   transition: height .5s, width .5s; */
}

/* ~~~~~~~~~~~~~~~~ FolderPage */

.mainBody.folderPage {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  /* temporary styling when the folders are all on screen */
  /* folder icon styling is at the bottom of the page in the icons tab */ 
}


/* ~~~~~~~~~~~~~~~~~~~ ProjectPage */

.backButton {
  background: none;
  box-shadow: none;
}

.mainBody.projectPage {
  display: grid;
  grid-template-rows: 20% 70% 10%;
  column-gap: 10px;
/*   grid-template-columns: 70% 30%; */
/*   padding: 30px; */
 
  grid-template-areas:
    "title skill"
    "subtitle skill"
    "subtitle link";
  /* temporary styling when a folder is opened and a project is showing */
}

.click {
  margin: 10px;
  align-self: center;
  /* the two buttons that click between folders */
}

.mainTitle {
  grid-area: title;
  font-size: 30px;
  /* padding: 35px; */
  /* template for project title */
}

.mainSubtitle {
  grid-area: subtitle;
  /* padding: 35px; */
  /* template for project description */
}

.mainBulletPoints {
  grid-area: skill;
  /* border-radius: 10px; */
  /* background-color: #fad648; */
  padding: 0px;
  margin: 0px;
  list-style-position: inside;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 125px;
  /* template for the bullet points to the side of project details */
}

.mainBulletPoints li {
  padding: 4px 13px;
  border: dashed 1px var(--darkerColor1);
  border-radius: 15px;
  /* box-shadow: 1px 1px var(--darkerColor1), 6px 4px var(--brightColor2); */
  margin: 5px 0px;
  width: fit-content;
}



.mainLink {
  grid-area: link;
  text-align: right;
  /* padding-right: 20px; */
  text-decoration: none;
  color: black;
  /* template for "visit webpage" button */
}

.mainLink:hover {
  font-weight: 700;
  font-style: italic;
}


/* ~~~~~~~~~~~~~~~~~ ThoughtsPage */

.mainBody.thoughtsPage {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.thoughtsParagraph {
  width: 300px;
  margin: 10px;
}

.thoughtsPicture {
  max-height: 315px;
  min-width: 100px;;
  max-width: 300px;

  /*  */

  border: 4px solid white;
  border-radius: 10px;
  /* background-color: blue; */
}


/* ~~~~~~~~~~~~~~~~~~~~~~~ the second panel: about ~~~~~~~~~~~~~~~~~~~~~~~ */

.aboutWrapper {
  position: absolute;
  bottom: 0vh;
  background-color: var(--brightColor2);
  /* box-shadow: 0px 9px 5px 10px var(--darkerColor1); */
 
  /*   height: 90vh; */
  max-height: 100vh;
  /*   background-color: #52796f; */
  z-index: 20;
  width: 100%;
  transition: max-height 1s;
  margin-top: 95px;
  /*   min-height: 95px; */
}

.aboutTitle {
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 400;
  font-size: 70px;
  padding-left: 10%;
  height: 95px;
  cursor: pointer;
}

.aboutContents {
  overflow: scroll;
  height: 100vh;
  max-height: 0px;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  /*   margin-top: 5%; */
  overflow: scroll;
  transition: all 1s;
  background: rgb(139,159,181);
  background: -moz-linear-gradient(0deg, rgba(139,159,181,1) 0%, rgba(157,196,181,1) 50%);
  background: -webkit-linear-gradient(0deg, rgba(139,159,181,1) 0%, rgba(157,196,181,1) 50%);
  background: linear-gradient(0deg, rgba(139,159,181,1) 0%, rgba(157,196,181,1) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8b9fb5",endColorstr="#9dc4b5",GradientType=1);
  /*   margin-top: 95px; */
}

/* ~~~~~~~~~~~~~~~~~~~~~ contents within the about panel ~~~~~~~~~~~~~~~~~~~ */

.aboutGridLayout {
      display: grid;
    grid-template-rows: 15% 85%;
    grid-template-columns: 60% 40%;
    grid-template-areas:
        "greeting me"
        "work links";
    width: 765px;
    margin-top: 6%;
    padding: 40px;
    border-radius: 20px;
    background-color: var(--offWhiteColor);
    height: 450px;

  /* display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: 60% 40%;
  grid-template-areas:
    "work me"
    "work links";
  width: 765px;
  margin-top: 6%;
  padding: 40px;
  border-radius: 20px;
  background-color: var(--offWhiteColor);
  height: 450px; */
}

/* Greeting */
.aboutGreeting {
  grid-area: greeting;
    font-family: "Danfo", serif;
    margin-left: -50px;
    margin-top: -15px;
    font-size: 59px;
    color: var(--reddishColor);
}

/* the paragraph describing myself on the left of the about page */
.workExperience {
  grid-area: work;
  padding: 10px;
  margin: 0px;
}

/* the box holding my picture */
.contactRightPanel {
  grid-area: me;
  padding: 10px;
}
/* my actual picture */
.meFrame {
  margin-top: -118px;
  margin-left: -50px;
}

/* all links, removes the generic stylization */
.goTo {
  margin: 5px 0px;
  padding: 0px;
  text-decoration: none;
  color: black;
}

.goTo:hover {
  font-style: italic;
}

/* box holding contact buttons */
.contactButtons {
  grid-area: links;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 5;
  margin-bottom: -25px;
  font-size: 17px;
}

/* the highlight accentuating certain words, including the contact buttons */
.highlight {
  position: relative;
  z-index: 1;
}
.highlight::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 80%;
  /* background-color: #c76d9d80; */
  background-color: var(--darkerColor1);
  opacity: 50%;
  left: -2px;
  bottom: -4px;
  z-index: -1;
  border-radius: 25px;
}
/* gives contact buttons a different color than the other highlighted words */
.contactGoTo::after {
  background-color: #9dc4b590;
  padding-right: 20px;
}

/* when you click my email this confirmation fades in */
.confirm {
  font-size: 15px;
  opacity: 0%;
  padding: 0px 6px;
  margin-top: 3px;
  transition: opacity 0.5s;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~ ICONS AND MISC STUFF ~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~ the folder icon  ~~~~~~~~~~~~~~~~~~~~~~~ */
.folder {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: fit-content;
  width: fit-content;
  margin: 0px 16px;
  padding: 10px;
  border-radius: 10px;
  font-size: 17px;
}
.folderBack {
  width: 120px;
  height: 80px;
  border-radius: 0px 10px 15px 15px;
  background-color: rgb(19, 18, 18);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.folderTab {
  background-color: inherit;
  width: 40px;
  height: 18px;
  border-radius: 10px;
  margin-top: -8px;
}

.folderFront {
  width: 120px;
  height: 90px;
  border-radius: 10px;
  transition: .5s;

}

.folderFront:hover {
  transform: skewX(-8deg);
  margin-left: 5px;
}

.folderTitle {
  margin: 5px 0px 0px 0px;
  font-size: 15px;
  font-weight: 500;
}
/* highlights the text under the folder icon */
.folder:hover {
  font-weight: 700;
  font-style: italic;
}

/* ~~~~~~~~~~~~~~~~~~~~~~ FONTS ~~~~~~~~~~~~~~~~~~~~~~ */

.dm-serif display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}
.dm-serif display-regular-italic {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
}
.montserrat-alternates-semibold {
  font-family: "Montserrat Alternates", sans-serif;
  font-weight: 600;
  font-style: normal;
}

/* body text */
.quicksand {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  /*  300-700  */
}


.danfo {
  font-family: "Danfo", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "ELSH" 0;
}

#folder0,
#folder6,
#folderp0,
#folderp7 {
  visibility: hidden !important;
}

#hideButtonLeft,
#hideButtonRight {
  display: none;
}

.hidden {
  display: none !important;
}

/* right left buttons */

.material-symbols-outlined {
  cursor: pointer;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  /* font-display: block; */
}

.picturesPage {
  display: grid;
  grid-template-rows: 20% 70% 10%;
  column-gap: 10px;
  grid-template-columns: 48% 50%;
/*   padding: 30px; */
 
  grid-template-areas:
    "title carousel"
    "subtitle carousel"
    "subtitle nav";
}

.picTitle {
  grid-area: title;
  font-size: 25px;
}

.picSubtitle {
  grid-area: subtitle;
  font-size: 15px;
}

.carousel {
  grid-area: carousel;
  display: flex;
    justify-content: center;
    margin-bottom: 10px;
   
}
.picPicture {
  max-width: 100%;
  max-height: 100%;
  border-radius: 20px;
  object-fit: contain;
}

.picNav {
  grid-area: nav;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.material-symbols-outlined.picNav {
font-size: 15px;
}

.gray {
  opacity: 20%;
  }