@import url("./shared.css");

/*
----------------------------------------------------------------------------------------------
 Handwriting Animation
----------------------------------------------------------------------------------------------
*/

/*#handwritingSvg {
   width: 80vw;
   max-width: 800px;
   animation: scale_animation 4s both 0.1s;
   margin-top: -80px;
}

@keyframes scale_animation {
   from {
      transform: scale(0.6);
      filter: blur(10px);
      opacity: 0;
   }

   to {
      transform: scale(1);
      filter: none;
      opacity: 1;
   }
}

#handwritingSvg path {
   stroke: var(--textColor);
   stroke-width: 0;
   fill: none;
   stroke-linecap: round;
   stroke-dasharray: 2000;
   stroke-dashoffset: 0;
   animation: handwriting_animation 4s both 0.3s;
}

@keyframes handwriting_animation {
   from {
      stroke-dashoffset: 2000;
      fill: transparent;
      stroke-width: 7;
   }

   to {
      stroke-dashoffset: 0;
      fill: var(--textColor);
      stroke-width: 0;
   }
}*/

/*
----------------------------------------------------------------------------------------------
 Header
----------------------------------------------------------------------------------------------
*/

#header {
   font-family: dmserifdisplay;
   font-size: 200%;
   margin: 60px 0px;
   position: relative;
   display: flex;
   align-items: center;
}
#header::before {
   content: "";
   position: absolute;
   width: 200px;
   left: calc(-100% - 40px);
   height: 2px;
   background-color: var(--textColor);
   border-radius: 10px;
   opacity: 0.3;
}
#header::after {
   content: "";
   position: absolute;
   width: 200px;
   right: calc(-100% - 40px);
   height: 2px;
   background-color: var(--textColor);
   border-radius: 10px;
   opacity: 0.3;
}

/*
----------------------------------------------------------------------------------------------
 Section Button Stuff
----------------------------------------------------------------------------------------------
*/

#blurBorder {
   width: 600px;
   height: 200px;
   position: fixed;
   bottom: 0px;
   transform: translateY(50px);
   filter: blur(20px);
   z-index: 10;
   pointer-events: none;
}

#blurBorder::after {
   content: "";
   display: block;
   width: 100%;
   height: 100%;
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   border-radius: 100px;
   background-color: rgba(255, 255, 255, 0.4);
}
@media (prefers-color-scheme: dark) {
   #blurBorder::after {
      background-color: rgba(0, 0, 0, 0.2);
   }
}

#sectionButtonContainer {
   z-index: 12;
   display: flex;
   justify-content: center;
   position: fixed;
   flex-wrap: wrap;
   bottom: 40px;
   box-sizing: border-box;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
}

.sectionButton {
   padding: 8px 25px;
   border: 2px solid rgba(0, 0, 0, 0.07);
   margin: 5px;
   border-radius: 14px;
   transition: 0.1s;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   display: flex;
   align-items: center;

   @media (prefers-color-scheme: dark) {
      border: 2px solid rgba(255, 255, 255, 0.07);
   }
   @media (max-width: 500px) {
      font-size: 90%;
      padding: 5px 20px;
      border-radius: 12px;
   }
}

@media (pointer: fine) {
   .sectionButton:hover {
      background-color: rgba(0, 0, 0, 0.07);
      @media (prefers-color-scheme: dark) {
         background-color: rgba(255, 255, 255, 0.07);
      }
   }

   .sectionButton:active {
      transform: scale(0.9);
   }
}

.sectionButton.selected {
   background-color: var(--textColor);
   color: var(--themeColor);
   border-color: transparent;
}

/*
----------------------------------------------------------------------------------------------
 General
----------------------------------------------------------------------------------------------
*/

.screenFillingContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   min-height: calc(100vh - 80px);
   box-sizing: border-box;
   overflow-x: hidden;
}

.flatButton {
   box-shadow: none;
   margin-top: 30px;
   color: black;
   background-color: rgba(80, 130, 155, 0);
   box-shadow: inset 0px 0px 10px 30px rgba(80, 130, 155, 0.15);

   @media (pointer: fine) {
      &:hover {
         background-color: rgba(80, 130, 155, 0.1);
         box-shadow: inset 0px 0px 0px 3px rgba(80, 130, 155, 0.3);
         transform: scale(1.05);
      }
   }

   @media (prefers-color-scheme: dark) {
      box-shadow: inset 0px 0px 10px 30px rgba(220, 230, 250, 0.1);
      background-color: transparent;
      color: white;

      @media (pointer: fine) {
         &:hover {
            background-color: rgba(220, 230, 250, 0.1);
            box-shadow: inset 0px 0px 0px 3px rgba(220, 230, 250, 0.1);
         }
      }
   }
}

#contentContainer {
   transition: 0.3s;
   padding-bottom: 180px;

   &:empty {
      padding: 0px;
   }

   display: flex;
   justify-content: center;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
   max-width: 1600px;
   margin-left: auto;
   margin-right: auto;
}

/*
----------------------------------------------------------------------------------------------
 Projects Container
----------------------------------------------------------------------------------------------
*/

.projectElementContainer {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
   max-width: 500px;
   box-sizing: border-box;
   background-color: rgba(255, 255, 255, 1);
   box-shadow: 0px 15px 60px rgba(0, 20, 40, 0.1);
   padding: 15px;
   border-radius: 35px;
   margin: 20px;
   transition: 0.3s;
   @media (prefers-color-scheme: dark) {
      background-color: rgba(255, 255, 255, 0.05);
      box-shadow: none;
   }
}

.projectElementTitle {
   font-family: dmserifdisplay;
   font-size: 130%;
   margin: 0px;
   margin-top: 20px;
   margin-left: 20px;
   margin-right: 20px;
   text-align: left;
}

.projectElementDescription {
   text-align: left;
   margin: 0px;
   margin-left: 20px;
   margin-right: 20px;
   margin-top: 10px;
   margin-bottom: 20px;
}

.projectElementImage {
   width: 100%;
   margin: 0px;
   aspect-ratio: 19/11;
   object-fit: cover;
   border-radius: 20px;
   transition:
      transform 0.3s,
      box-shadow 0.3s;
}

/*
----------------------------------------------------------------------------------------------
 Designs Container
----------------------------------------------------------------------------------------------
*/

.designImage {
   width: 100%;
   max-width: 900px;
   margin-bottom: 40px;
   border-radius: 32px;
   object-fit: contain;
}

/*
----------------------------------------------------------------------------------------------
 Bio Container
----------------------------------------------------------------------------------------------
*/

#bioContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
}

#bioImageContainer {
   width: 200px;
   height: 200px;
   border-radius: 200px;
   overflow: hidden;
   margin-bottom: 100px;
   position: relative;
}

#bioImageContainer::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 200px;
   border: 2px solid rgba(255, 255, 255, 0.3);
}

#bioImage {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

#bioTitle {
   width: 100%;
   text-align: left;
   font-family: dmserifdisplay;
}

#bioText {
   text-align: left;
   max-width: 700px;
   margin-bottom: 60px;
   &:empty {
      display: none;
   }
}

#bioButtonContainer {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
}