* {  
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;;
  background: rgb(33,28,51);
background: linear-gradient(158deg, rgba(33,28,51,1) 4%, rgba(51,13,52,1) 33%, rgba(1,38,77,1) 94%);
  position: relative;
}

::-webkit-scrollbar { width: 8px; }

::-webkit-scrollbar-track {
  background: rgb(33,28,51);
  background: linear-gradient(158deg,rgba(51,13,52,1) 8%, rgba(1,38,77,1) 94%);  border-radius: 5px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb {
  background: #a00098;
  background: -moz-linear-gradient(left, #881b089a 0%, #860069 50%, #b44410dc 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #881b089a), color-stop(50%, #86006917), color-stop(100%, #b44410dc));
  background: -webkit-linear-gradient(left, #881b089a 0%, #860069 50%, #b44410dc 100%);
  background: -o-linear-gradient(left, #881b089a 0%, #860069 50%, #b44410dc 100%);
  background: -ms-linear-gradient(left, #881b089a 0%, #860069 50%, #b44410dc 100%);
  background: linear-gradient(to right, #881b089a 0%, #860069 50%, #b44410dc 100%);
  border-radius: 5px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#881b089a', endColorstr='#bce0ee', GradientType=1);
}

/* =============CANVAS=========================== */

#c {
    width: 100%;
    height: 100%;
    position: fixed;
}

.canvasAnchor {
  position: relative;
  height: 0;
}

.canvasContainer {
  width: 100%;
  height: 85vh;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 87%, 0% 100%);
}

/* ==========NAVBAR============== */

.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  font-family: 'Cinzel', serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: 2.2vh;
  background-color: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);  
  position: fixed;
  top:1.7vh;
  right: -3px;
  border: slategrey solid 1px;
  z-index: 10;  
  text-align: right;
}

.navbar a {
  text-decoration: none;
  color: silver;
  padding: 0 1rem;
  padding: 0.5vh 2vh;

}

.navbar a:hover {
  background-color: #c300ff23;
}

/* ______________________________________________ */
/* ==========HEADER===================== */
/* ______________________________________________ */

.Introduction {
  position: absolute;
  display: flex;
  height: 85vh;
  width: 100%;
  flex-direction: column;
  padding-top: 18vh;
  align-items: center;
}

.MyName {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 6vh;
  color: aliceblue;
  border: 5px solid aliceblue ;
  padding: 1% 3%;
}

.Introduction .Hi {
  font-weight: 400;
  font-size: 3.2vh;
  color: aliceblue;
  margin-bottom: 1vh;
}

.introDescription {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  justify-content: center;
  align-items: center;
  display: flex;
}
.text {
  font-family: 'Cinzel', serif;
  font-weight: 300;
  font-size: 35px;
  color: #fafafa;
}


.Introduction .social {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 58vh;
  /* fill: red; */
  margin-top: 6vh;
  transition: all 0.3s;
}

.Introduction svg {
  font-family: 'OpenSans', sans-serif;
  fill: aliceblue;
  transition: all 4000ms;
  width:  4.5rem;
  height:  4.5rem;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);

}

.Introduction .button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  height:  4.5rem;
  padding: 8px 18px 7px;
  border: 1px solid transparent;
  border-radius: 3px;
  transition: all 0.3s;
}
.Introduction .button:hover {
  box-shadow: inset 0 0 40px #e48aff, 0 0 30px #e48aff;
  width: 5.1rem;
  height:  5.1rem;
  transition: all 0.3s;
  border: 1px solid #d95bff;
}
.Introduction .button:hover svg{
  fill: #d95bff;  
  transition: all 0.6s;
}

#mouseTip {
  position: absolute;
  width: 6%;
  margin-top: 75vh;
  margin-left: 20px;
  opacity: 60%;
}

#devider {
  padding-top: 90vh;
}

/* ____________________________loader_________________________________________ */

#loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(26, 15, 32);
  z-index: 20;
}

section article {
  display: inline-block;
  width: 40%;
  margin-top: 20%;
  margin-left: 30%;
}

.chart {
  font-size: 1em;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

.bar {
  font-size: 1em;
  position: relative;
  height: 10em;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: rotateX(60deg) rotateY(0deg);
  transform: rotateX(60deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.bar .face {
  font-size: 2em;
  position: relative;
  width: 100%;
  height: 2em;
  background-color: rgba(254, 254, 254, 0.3);
}

.bar .face.side-a,
.bar .face.side-b {
  width: 2em;
}

.bar .side-a {
  -webkit-transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
  transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em) translateZ(1em);
}

.bar .side-b {
  -webkit-transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);
  transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em) translateZ(-1em);
  position: absolute;
  right: 0;
}

.bar .side-0 {
  -webkit-transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
  transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(-1em);
}

.bar .side-1 {
  -webkit-transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
  transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em) translateZ(3em);
}

.bar .top {
  -webkit-transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
  transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em) translateZ(2em);
}

.bar .floor {
  box-shadow: 0 0.1em 0.6em rgba(0, 0, 0, 0.3), 0.6em -0.5em 3em rgba(0, 0, 0, 0.3), 1em -1em 8em #fefefe;
}

.growing-bar {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: rgba(154, 0, 201, 0.6);
  height: 2em;
  animation-name: loader;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 4s;
}

@keyframes loader {
  0% {   width: 0%;  }
  100% {  width: 100%; display: none;  }
}

.bar.lime .side-0 .growing-bar {
  box-shadow: -0.5em -1.5em 4em #c900a7b6;
}

.bar.lime .floor .growing-bar {
  box-shadow: 0em 0em 2em #ab00c9c2;
}

/* _____________________________________________________________________________________ */
/* =================================MAIN================================================ */
/* _____________________________________________________________________________________ */




css-doodle {
  z-index: -10;
  width: 99%;
  max-height: 100%;
  /* overflow: hidden; */
}

.background-doodle {
  overflow: hidden;
  background-color: #19bc8b;
}

#tsparticles {
  position: absolute;
  background-color: #221b2c00;
  height: 400vh;
}

#featured {
  text-align: center;
  font-family: 'Montserrat', sans-serif;;
  font-weight: 300;
  font-size: 6vh;
  color: aliceblue;
}

/* gradient */
@-webkit-keyframes animationgradienttitle {
  0% {
    background-position: 0 1600px;
  }
  100% {
    background-position: 1600px 0;
  }
}
@keyframes animationgradienttitle {
  0% {
    background-position: 0 1600px;
  }
  100% {
    background-position: 1600px 0;
  }
}
.c-article__title {
  background: -webkit-linear-gradient(left, #dfe0e0, #ffbd86, #dfe0e0);
  background-size: 1600px 200px;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-name: animationgradienttitle;
          animation-name: animationgradienttitle;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
/* ------- */

.custom-projects{
  width: 100%;
  padding: 4vh 6%;
}

.project-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}

.project:hover {
  -webkit-box-shadow: 7px 6px 17px -5px rgba(109,30,199,0.54);
  -moz-box-shadow: 7px 6px 17px -5px rgba(109,30,199,0.54);
  box-shadow: 7px 6px 17px -5px rgba(109,30,199,0.54);}

.project {
  width: 40vw;
  min-width: 450px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px); 
  padding-top: 1%;
  margin-bottom: 2%; 
}

.project .top {
  width: 100%;
  min-width: 250px;
  height: 100%;
}

.top video {
  width: 100%;
}

.top img {
  width: 100%;
}

.top .buttons {
  display: flex;
  justify-content: center;
}

.pulse {
  --color: #ef6eae;
  --hover: #ef8f6e;
}

.raise {
  --color: #19bc8b;
  --hover: #adff60;
}

.top .buttons a {
  text-decoration: none;
  background: none;
  border: 2px solid;
  font: inherit;
  line-height: 1;
  margin: 3% 8%;
  padding: 1em 2em;
  color: var(--color);
  -webkit-transition: 0.20s;
  transition: 0.20s;
}

.top .buttons a:hover, a:focus {
  border-color: var(--hover);
  color: #fff;
}

.pulse:hover,
.pulse:focus {
  -webkit-animation: pulse 1s;
          animation: pulse 1s;
  box-shadow: 0 0 0 2em rgba(255, 255, 255, 0);
}

@-webkit-keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 var(--hover);
  }
}

.raise:hover,
.raise:focus {
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  -webkit-transform: translateY(-0.25em);
          transform: translateY(-0.25em);
}

.description {
  width: 100%;
  padding: 2.5% 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-box h3 {
  width: 100%;
  font-weight: 400;
  font-size: 4vh;
  color: aliceblue;
  margin-bottom: 2rem;
  text-align: center;
}

.description .line {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 1% 0;
}

.description .lineName {
  width: 30%;
  font-weight: 400;
  letter-spacing: 0.5pt;
  font-size: 20px;
  justify-self: left;
  color: aliceblue;
  margin: 2% 0;
}

.description .lineAdditional {
  margin: 0 auto;
}

.description .lineAdditionalText {
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  font-size: 17px;
  width: 70%;
  padding: 5px 3%;
  margin: 0 auto;
  color: aliceblue;
  align-self: center;
}

.description .line svg {
  width: 40px;
  height: 40px;
  fill: rgb(0, 195, 255);
  margin: 0 10px;
}


.description .line img {
  width: 40px;
  height: 40px;
  margin: 0 10px;
}

/* ==================static========================== */

.static {
  width: 100%;
  height: 100vh;
  margin-top: 2%;
  margin-bottom: 7%;
}

.static h2 {
  font-weight: 400;
  font-size: 4vh;
  color: aliceblue;
  margin-bottom: 2rem;
}

.static .box {
  width: 100%;
  height: 100%;
  position: relative;
}

.static .box img {
  width: 100%;
  height: 100%;
  transition: all 0.3s;

}

.static .box img:hover {
  transform: scale(1.08,1.08);
  box-shadow: 0 10px 16px rgba(240, 9, 9, 0.061), 0 13px 16px rgba(200, 38, 10, 0.096);
}

.static .css {
  width: 45%;
  position: absolute;
  top: 0;
  left: 0;
}

.static .garden {
  width: 48%;
  position: absolute;
  top: 16.5vw;
  left: 30%;
}

.static .garage {
  width: 45%;
  position: absolute;
  top: 33vw;
  left: 55%;
}

.answer {
  margin-top: -5px;
  padding-left: 5%;
  font-family: 'Cinzel', serif;
  font-weight: 200;
  font-size: 30px;
  background-color: rgba(245, 245, 245, 0.425);
  color: rgb(22, 28, 42);
}

.answer svg {
  width: 30px;
  height: 30px;
  margin-bottom: -3px;
  
}

.toggleButton {
  position: absolute;
  top: 4%;
  right: 3%;
  text-align: center;
  margin: 0;
}

.toggleButton h2 {
  font-size: 27px;
  margin: 15px 0;
  color: #dfdfdf;
}

.toggleButton button {
  font-family: 'Cinzel', serif;

  font-size: 18px;
  padding: 0.7rem 1.3rem;
  background-color: rgba(43, 100, 255, 0.116);
  color: rgba(255, 255, 255, 0.602);
  border: none;
  transition: all 0.2s;
  border-radius: 7px;
}

.toggleButton button:hover {
  background-color: rgba(107, 43, 255, 0.233);
  transform: scale(1.15,1.15);
  color: rgba(255, 255, 255, 0.432);
  -webkit-box-shadow: 5px 4px 17px -6px rgba(164,168,237,0.21);
-moz-box-shadow: 5px 4px 17px -6px rgba(164,168,237,0.21);
box-shadow: 5px 4px 17px -6px rgba(164,168,237,0.21);
}

.isDisplayed {
  display: none;
}

/* ================================================== */
/* ================about============================= */

.textPart {
  margin-top: 0vh;
  margin-top: -22vh;
  margin-bottom: -12vh;
  position: relative;
}

.particle-slider {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#htmlDiv,
#particle-slider {
  background-color: none;
  width: 100%;
  height: 50vh;
  min-height: 400px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#htmlDiv .slides,
#particle-slider .slides,
#htmlDiv > .dg,
#particle-slider > .dg {
  display: none;
}



.aboutSection {
  position: relative;
}

#aboutMeTextPic {
  position: absolute;
  right: 5%;
  width: 115vh;
}

#about {
  width: 100%;
  height: 172vh;
  background-image: url(/assets/about.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  font-size: 1.7rem;
  font-weight: 200;
  color: aliceblue;
  margin-top: 10%;
}

.define {
  position: absolute;
  top: 50vh;
  right: 5%;
  width: 35vw;
  padding: 1% 2%;
  border: aliceblue 5px solid;
  border-right: orangered 4px solid;
}

.inspired {
  position: absolute;
  top: 73vh;
  left: 5%;
  width: 30vw;
  padding: 1rem;
  color: white;
  border-width: 3px;
  border-style: solid;
  border-image: 
    linear-gradient(
      to bottom, 
      orangered, 
      rgba(0, 0, 0, 0)
    ) 1 100%;
}

.energy {
  position: absolute;
  bottom: 4vw;
  right: 3%;
  width: 60vw;
  padding: 1.5%;
  border-left: orangered 4px solid;
}

/* _________________________________ */
/* =============FOOTER============== */

footer {
  background-color: rgb(23, 30, 49);
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: rgb(230, 230, 230);
  letter-spacing: 0.8pt;
  padding: 2% 5%;
}

footer a {
  color: #e0d9ff;
}

footer svg {
  width: 40px;
  height: 40px;
  margin-bottom: -10px;
  padding: 4px;
  fill: #d9d0fd;
}

footer .up img {
  width: 9vw;
  padding: 10% 15% 10% 12%;
  border: 2px solid #e0d9ff;
  transition: all 0.2s;
  position: relative;
  z-index: 15;
}

footer .up img:hover {
  -webkit-box-shadow: 7px 6px 17px -6px #e0d9ff62;
-moz-box-shadow: 7px 6px 17px -6px #e0d9ff62;
box-shadow: 7px 6px 17px -6px #e0d9ff62;
transform: translate( -2px, -5px) scale(1.05);
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#contact span {
  border-right: rgb(207, 207, 207) 1px solid;
  padding: 0 10px;
  margin: 0 0.5rem;
  position: relative;
  z-index: 16;
  transition: all 0.15s;
}

#contact span:hover {
  border-right: rgb(32, 117, 228) 2px solid;
  color: #5580c5;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.6);
  padding: 10px 10px;
}

.resume {
  text-align: center;
  margin: 3rem;
}

.resume a{
  color: #e0d9ff;
  padding: 1rem;
  width: 100%;
  background-color: rgba(183, 129, 200, 0.034);
  text-decoration: none;
  border: 2px #e0d9ff solid;
  border-radius: 50px;
  transition: all 0.2s;

}

.resume a:hover{
  background-color: rgba(107, 43, 255, 0.233);
  -webkit-box-shadow: 7px 6px 17px -6px #e0d9ff62;
-moz-box-shadow: 7px 6px 17px -6px #e0d9ff62;
box-shadow: 7px 6px 17px -6px #e0d9ff62;
}

/* -----media---------- */

@media only screen and (min-width: 2100px) {
  .Introduction .button {
    width: 6vh;
    height:  6vh;
  }
  
  .Introduction .button:hover {
    width: 7.2vh;
    height:  7.2vh;
  }

  .description .lineAdditionalText {
    font-size: 1.8rem;
    width: 70%;
  }

  .description .lineName {
    font-size: 1.8rem
  }

  .description .line svg {
    width: 60px;
    height: 60px;

  }
  
  .description .line img {
    width: 60px;
    height: 60px;
  }

  #aboutMeTextPic {
    width: 90vh;
  }

  #about {
    font-size: 2.3rem;
  }

  footer {
    font-size: 32px;
  }
}

@media only screen and (max-width: 1450px) { 
  #aboutMeTextPic {
  right: 5%;
  width: 60vw;
  transform: rotate(5deg);
  }

  .inspired {
    position: absolute;
    top: 45vw;
  }
}

@media only screen and (max-width: 1100px) {

  .project {
    width: 80vw;
  }

  .background-doodle {
    display: none;
  }

  .static .box {
    height: auto;
  }

  .static .css {
    all: initial;
    width: 100%;
    height: auto;
  }

  .static .garden {
    all: initial;
    width: 100%;

  }

  .static .garage {
    all: initial;
    width: 100%;
  }

  #about {
    all: initial;
    background: none;
    padding-top: 50vw;
  }

  #about span {
    all: initial;
    display: block;
    font-size: 30px;
    color: aliceblue;
    margin-bottom: 3vh;
  }

  .answer {
    position: relative;

  }
  
  .toggleButton {
    position: relative;
    text-align: center;
    margin: 0;
  }

  .aboutMeText {
    margin-top: 65vw;
  }

  #aboutMeTextPic {
    display: none;
  }

  .up a {
    all: initial;
    color: white;
    font-size: 30px;
  }

}

@media only screen and (max-width: 500px) {
  .custom-projects {
    padding: 0;
  }
}