/* ############################################################################################# */
/* General                                                                                       */
/* ############################################################################################# */

@import url("https://fonts.googleapis.com/css2?family=Sahitya&display=swap");

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: Sahitya;
  font-style: normal;
  font-weight: normal;
}

html,
body {
  overflow-x: hidden;
  /* Safari compatibility */
  height: 100%;
  width: 100%;
  transform: translate3d(0, 0, 0);
  background-color: #fefcf5;
}

.site {
  overflow-x: hidden;
}

section {
  position: relative;
  min-height: 100vh;
}

.bold {
  font-weight: bold;
}

/* ############################################################################################# */
/* Home                                                                                          */
/* ############################################################################################# */

#home .header {
  height: 10vh;
  background-color: rgba(212, 178, 148, 0.7);
}

#home .content {
  height: 90vh;
}

/* MENU ###################################### */

.fas {
  font-size: 2.9vw;
  color: #222;
}

.fas:hover {
  color: #4b134f;
}

#menu-icon {
  position: relative;
  z-index: 3;
  top: 30%;
  left: 90%;
  -webkit-animation: buzz-anim 5s linear infinite;
  animation: buzz-anim 5s linear infinite;
}

#menu-overlay {
  width: 100vw;
  height: 100vh;
  position: absolute;
  overflow: hidden;
  color: black;
  background: white;
  z-index: 100;
  -webkit-transform: translateX(110%);
  -ms-transform: translateX(110%);
  transform: translateX(110%);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  -o-transition: transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

#menu-overlay .fas {
  position: absolute;
  left: 89.5%;
  top: 3%;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#menu-overlay .fas:hover {
  color: #4b134f;
  -webkit-transform: scale(1.1) rotate(180deg);
  -ms-transform: scale(1.1) rotate(180deg);
  transform: scale(1.1) rotate(180deg);
}

#menu-overlay ul {
  height: 100%;
  width: 100%;
  list-style: none;
  padding: 20px;
  font-size: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#menu-overlay a {
  color: black;
  text-decoration: none;
}

#menu-overlay a:hover {
  color: #c94b4b;
}

/* Wave ###################################### */

#wave {
  position: absolute;
  width: 18vw;
  top: 15%;
  left: 0%;
}

/* Logo ###################################### */

#logo {
  position: absolute;
  width: 23vw;
  left: 20%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
}

#logo .cls-1 {
  fill: #f9e5e5;
}
#logo .cls-2 {
  fill: none;
  stroke: #000;
  stroke-miterlimit: 10;
}
#logo .cls-3 {
  fill: #edbeb8;
}
#logo .cls-3,
.cls-4,
.cls-5,
.cls-6,
.cls-7,
.cls-8,
.cls-9 {
  fill-rule: evenodd;
}
#logo .cls-5 {
  fill: snow;
}
#logo .cls-6 {
  fill: #420a13;
}
#logo .cls-7 {
  fill: #20110e;
}
#logo .cls-8 {
  fill: #7a1412;
}
#logo .cls-9 {
  fill: #fefefe;
}

#logo path:nth-child(2) {
  stroke: black;
  stroke-dasharray: 1036.70703125;
  stroke-dashoffset: 1036.70703125;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(3) {
  stroke: black;
  stroke-dasharray: 342.2410583496094;
  stroke-dashoffset: 342.2410583496094;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(4) {
  stroke: black;
  stroke-dasharray: 203.65582275390625;
  stroke-dashoffset: 203.65582275390625;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(5) {
  stroke: snow;
  stroke-dasharray: 22.646276473999023;
  stroke-dashoffset: 22.646276473999023;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(6) {
  stroke: snow;
  stroke-dasharray: 101.77198028564453;
  stroke-dashoffset: 101.77198028564453;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(7) {
  stroke: black;
  stroke-dasharray: 568.0897827148438;
  stroke-dashoffset: 568.0897827148438;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(8) {
  stroke: black;
  stroke-dasharray: 482.4917297363281;
  stroke-dashoffset: 482.4917297363281;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(9) {
  stroke: black;
  stroke-dasharray: 309.5558166503906;
  stroke-dashoffset: 309.5558166503906;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(10) {
  stroke: black;
  stroke-dasharray: 60.803646087646484;
  stroke-dashoffset: 60.803646087646484;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(11) {
  stroke: black;
  stroke-dasharray: 61.86436080932617;
  stroke-dashoffset: 61.86436080932617;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(12) {
  stroke: black;
  stroke-dasharray: 118.4496841430664;
  stroke-dashoffset: 118.4496841430664;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(13) {
  stroke: black;
  stroke-dasharray: 61.620845794677734;
  stroke-dashoffset: 61.620845794677734;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(14) {
  stroke: black;
  stroke-dasharray: 1070.5714111328125;
  stroke-dashoffset: 1070.5714111328125;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

#logo path:nth-child(15) {
  stroke: black;
  stroke-dasharray: 254.77316284179688;
  stroke-dashoffset: 254.77316284179688;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
}

/* CATCHPHRASE ############################### */

#catchphrase {
  position: absolute;
  width: 57vw;
  top: 50%;
  right: -20%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  fill: none;
  stroke: none;
  stroke-dasharray: 0% 100%;
  z-index: 2;
}

#catchphrase .cls-1 {
  fill: #f9e5e5;
  opacity: 1;
}

#catchphrase path:nth-child(2) {
  stroke: black;
  stroke-dasharray: 597.97265625;
  stroke-dashoffset: 597.97265625;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  fill: black;
}

#catchphrase path:nth-child(3) {
  stroke: black;
  stroke-dasharray: 49.680511474609375;
  stroke-dashoffset: 49.680511474609375;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  fill: black;
}

#catchphrase path:nth-child(4) {
  stroke: black;
  stroke-dasharray: 272.2977600097656;
  stroke-dashoffset: 272.2977600097656;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  fill: black;
}

#catchphrase path:nth-child(5) {
  stroke: black;
  stroke-dasharray: 239.4941864013672;
  stroke-dashoffset: 239.4941864013672;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  fill: black;
}

#catchphrase path:nth-child(6) {
  stroke: black;
  stroke-dasharray: 456.0135803222656;
  stroke-dashoffset: 456.0135803222656;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  fill: black;
}

#catchphrase path:nth-child(7) {
  stroke: black;
  stroke-dasharray: 348.4432067871094;
  stroke-dashoffset: 348.4432067871094;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  fill: black;
}

#catchphrase path:nth-child(8) {
  stroke: black;
  stroke-dasharray: 263.35382080078125;
  stroke-dashoffset: 263.35382080078125;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  fill: black;
}

#catchphrase path:nth-child(9) {
  stroke: black;
  stroke-dasharray: 574.8777465820312;
  stroke-dashoffset: 574.8777465820312;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  fill: black;
}

#catchphrase path:nth-child(10) {
  stroke: black;
  stroke-dasharray: 371.5475158691406;
  stroke-dashoffset: 371.5475158691406;
  -webkit-animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  animation: draw-anim 2s ease forwards, fill-anim 4s ease forwards;
  fill: black;
}

/* Wave 2 #################################### */

#wave2 {
  position: absolute;
  width: 18vw;
  top: 70%;
  right: 0%;
}

/* Bee ####################################### */

#bee {
  position: absolute;
  width: 20vw;
  top: 82%;
  left: 5%;
  z-index: 10;
}

/* Responsive ################################ */

@media (orientation: landscape) and (max-width: 1024px) {
  #menu-icon {
    top: 25%;
    left: 90%;
  }

  .fas {
    font-size: 3.5vw;
  }
}

@media (orientation: portrait) and (max-width: 1024px) {
  #home .header {
    height: 8vh;
  }

  #home .content {
    height: 92vh;
  }

  .fas {
    font-size: 4vh;
  }

  #menu-overlay .fas {
    left: 89.5%;
    top: 3%;
  }

  #menu-overlay ul {
    font-size: 3rem;
  }

  #wave {
    width: 34vw;
    top: 13%;
    left: 0%;
  }

  #logo {
    width: 45vw;
    left: 50%;
    top: 38%;
  }

  #catchphrase {
    width: 90vw;
    top: 60.5%;
    left: 50%;
  }

  #wave2 {
    width: 34vw;
    top: 73%;
  }

  #bee {
    width: 35vw;
    top: 80%;
    left: 10%;
  }
}

@media (orientation: portrait) and (max-width: 640px) {
  #home .header {
    height: 7vh;
  }

  #home .content {
    height: 93vh;
  }

  #menu-icon {
    top: 25%;
    left: 90%;
  }

  .fas {
    font-size: 3.5vh;
  }

  #wave {
    width: 40vw;
    top: 12%;
  }

  #logo {
    width: 50vw;
    left: 50%;
    top: 38%;
  }

  #catchphrase {
    width: 90vw;
    top: 60.5%;
    left: 50%;
  }

  #wave2 {
    width: 40vw;
    top: 73%;
  }

  #bee {
    width: 40vw;
    top: 80%;
    left: 10%;
  }
}

#bee .cls-1 {
  fill: #fff;
}

#bee .cls-3 {
  fill: #f9a660;
}

#bee .cls-4 {
  fill: #452f2d;
}

/* ############################################################################################# */
/* About                                                                                         */
/* ############################################################################################# */

#about .content {
  position: absolute;
  height: 65vh;
  width: 80vw;
  top: 50%;
  -webkit-transform: translate(12.5%, -50%);
  -ms-transform: translate(12.5%, -50%);
  transform: translate(12.5%, -50%);
  background-color: rgba(242, 229, 229, 0.7);
  padding: 15% 12%;
  font-size: 1.5vw;
  text-align: justify;
}

.center-last-line {
    -moz-text-align-last: center;
    text-align-last: center;
}

/* Hello ################################ */

#hello {
  position: absolute;
  width: 40vw;
  top: 25%;
  left: 40%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* Rainbow ################################ */

#rainbow {
  position: absolute;
  width: 27vw;
  top: 20%;
  left: 70%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Balloon ################################ */

#balloon {
  position: absolute;
  width: 30vw;
  top: 74%;
  right: 0%;
  z-index: 2;
}

/* Responsive ################################ */

@media (orientation: landscape) and (max-width: 1024px) {
  #about .content {
    padding: 15% 10%;
  }
}

@media (orientation: portrait) and (max-width: 1024px) {
  #about .content {
    padding: 20% 10%;
    font-size: 4vw;
  }

  #hello {
    width: 70vw;
    top: 20%;
    left: 50%;
  }

  #rainbow {
    width: 30vw;
    top: 8%;
    left: 50%;
  }

  #balloon {
    position: absolute;
    width: 70vw;
    top: 76%;
  }
}

@media (orientation: portrait) and (max-width: 640px) {
  #about .content {
    padding: 30% 10%;
    font-size: 4.5vw;
  }

  #hello {
    width: 70vw;
    top: 20%;
    left: 50%;
  }

  #rainbow {
    width: 40vw;
    top: 8%;
    left: 50%;
  }

  #balloon {
    position: absolute;
    width: 80vw;
    top: 76%;
  }
}

/* ############################################################################################# */
/* Projects                                                                                      */
/* ############################################################################################# */

#projects {
  background-color: #fefcf5;
}

#project-title {
  position: absolute;
  width: 60vw;
  top: 15%;
  left: 60%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Plant ##################################### */

#plant {
  position: absolute;
  width: 15vw;
  top: 12%;
  left: 18%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Egg ####################################### */

#egg {
  position: absolute;
  width: 20vw;
  top: 100%;
  left: 85%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Carousel ################################## */

.carousel {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.carousel > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: 100ms opacity ease-in-out;
  -o-transition: 100ms opacity ease-in-out;
  transition: 100ms opacity ease-in-out;
  -webkit-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
}

.active {
  opacity: 1;
  z-index: 1;
  -webkit-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}

.hide {
  visibility: hidden;
}

.carousel-button {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  font-size: 8rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.carousel-button:hover,
.carousel-button:focus {
  color: rgba(0, 0, 0, 0.35);
}

.carousel-button:focus {
  outline: 1px solid black;
}

.carousel-button.prev {
  left: 2%;
}

.carousel-button.next {
  right: 2%;
}

/* Project ################################### */

.project {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  height: 70%;
  width: 80%;
  background-color: rgba(242, 229, 229, 0.7);
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.left {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

.right {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

/* Project description ####################### */

.description {
  height: 50%;
  width: 30%;
  text-align: center;
}

.description-content {
  position: relative;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.description-content h1 {
  font-weight: bold;
}

.description-content p {
  padding: 5%;
}

.project-button {
  height: auto;
  width: 45%;
  background-color: #093043;
  color: white;
  font-size: 2.5vh;
  cursor: pointer;
  border-radius: 5rem;
}

.project-download {
    cursor: pointer;
}

/* Project image ############################# */

.img {
  display: block;
  height: auto;
  width: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  border-radius: 2rem;
  border: 0.25rem solid;
  border-color: black;
}

.video {
  display: block;
  height: 65%;
  width: 50%;
}

/* Responsive ################################ */

@media (orientation: landscape) and (max-width: 1024px) {
  .description {
    font-size: 2.25vh;
  }

  #egg {
    width: 20vw;
  }

  .video {
    height: 75%;
    width: 50%;
  }
}

@media (orientation: portrait) and (max-width: 1024px) {
  #project-title {
    width: 60vw;
    top: 10%;
    left: 57%;
  }

  #plant {
    width: 15vw;
    top: 8%;
    left: 18%;
  }

  #egg {
    width: 35vw;
  }

  .project {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 80%;
    width: 80%;
    top: 55%;
  }

  .slide {
    -webkit-transition: 200ms opacity ease-in-out;
    -o-transition: 200ms opacity ease-in-out;
    transition: 200ms opacity ease-in-out;
    -webkit-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
  }

  .description {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    height: 50%;
    width: 100%;
    font-size: 3vw;
  }

  .description-content {
    position: relative;
    width: 100%;
    top: 50%;
  }

  .description-content h1 {
    font-weight: bold;
  }

  .description-content p {
    padding: 5%;
  }

  .project-button {
    height: auto;
    width: 40%;
    font-size: 2.5vh;
  }

  .img {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    width: 95%;
  }

  .video {
    height: 35%;
    width: 95%;
  }
}

@media (orientation: portrait) and (max-width: 640px) {
  #project-title {
    width: 60vw;
    top: 10%;
    left: 57%;
  }

  #plant {
    width: 15vw;
    top: 9%;
    left: 18%;
  }

  #egg {
    width: 40vw;
    left: 75%;
  }

  .carousel-button {
    font-size: 4.5rem;
  }

  .carousel-button.prev {
    left: 1%;
  }

  .carousel-button.next {
    right: 1%;
  }

  .description {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    height: 50%;
    width: 100%;
    font-size: 3.5vw;
  }

  .description-content {
    width: 100%;
    top: 50%;
  }

  .project-button {
    height: auto;
    width: 50%;
    font-size: 2.5vh;
  }

  .img {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    width: 95%;
  }
}

/* ############################################################################################# */
/* Contact                                                                                       */
/* ############################################################################################# */

#contact .content {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  height: 65vh;
  width: 80vw;
  top: 45%;
  -webkit-transform: translate(12.5%, -50%);
  -ms-transform: translate(12.5%, -50%);
  transform: translate(12.5%, -50%);
  background-color: rgba(242, 229, 229, 0.7);
  padding: 15% 12%;
  font-size: 1.5vw;
}

/* Flower #################################### */

#flower {
  position: absolute;
  width: 11vw;
  top: 11%;
  left: 10%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Contact Me #################################### */

#contact-me {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
  -webkit-box-flex: 2;
  -ms-flex: 2;
  flex: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 3vh;
  z-index: 2;
}

.encoded {
  visibility: hidden;
}

.reveal {
  font-weight: bold;
  cursor: pointer;
}

.contact-me p {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
  text-align: justify;
  -moz-text-align-last: center;
  text-align-last: center;
}

.linkedin-logo {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  height: 10%;
  width: 10%;
  cursor: pointer;
}

/* Resume #################################### */

#resume {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 2vh;
  z-index: 2;
}

.resume-img {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
  width: 60%;
  max-height: 80%;
}

.resume-download {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
  height: auto;
  width: 55%;
  background-color: #093043;
  color: white;
  font-size: 2.25vh;
  cursor: pointer;
  border-radius: 5rem;
}

/* Footer #################################### */

#contact .footer {
  position: absolute;
  top: 90%;
  height: 10vh;
  width: 100vw;
  background-color: rgba(212, 178, 148, 0.7);
}

.footer p {
  position: absolute;
  width: 100vw;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Responsive ################################ */

@media (orientation: landscape) and (max-width: 1024px) {
  .resume-download {
    height: 5vh;
    font-size: 2vh;
  }
}

@media (orientation: portrait) and (max-width: 1024px) {
  #contact .content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 67vh;
    top: 46%;
    padding: 20% 10%;
  }

  #flower {
    width: 20vw;
    top: 11%;
    left: 20%;
  }

  #contact-me {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    row-gap: 2vh;
  }

  #contact-me p {
    font-size: 4vw;
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center;
  }

  .linkedin-logo {
    height: 20%;
    width: 20%;
  }

  .resume-img {
    width: 80%;
    max-height: 80%;
  }

  .resume-download {
    height: auto;
    width: 65%;
    font-size: 1.9vw;
  }

  #contact .footer {
    top: 92%;
    height: 8vh;
  }

  .footer p {
    font-size: 2.5vw;
  }
}

@media (orientation: portrait) and (max-width: 640px) {
  #contact .content {
    height: 68vh;
    top: 46.5%;
    padding: 20% 10%;
  }

  #flower {
    width: 30vw;
    top: 11%;
    left: 20%;
  }

  #contact-me {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    row-gap: 2vh;
  }

  #contact-me p {
    padding-top: 15%;
    font-size: 3.5vw;
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center;
  }

  .linkedin-logo {
    height: 25%;
    width: 25%;
  }

  .resume-img {
    width: 70%;
    max-height: 80%;
  }

  .resume-download {
    height: auto;
    width: 66%;
    font-size: 3vw;
  }

  #contact .footer {
    top: 93%;
    height: 7vh;
  }

  .footer p {
    font-size: 3vw;
  }
}

/* ############################################################################################# */
/* Anim                                                                                          */
/* ############################################################################################# */

/* Draw anim ################################# */

@keyframes draw-anim {
  to {
    stroke-dashoffset: 0;
  }
}

/* Fill anim ################################# */

@keyframes fill-anim {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

/* Pulse anim ################################ */

.pulse {
  -webkit-animation: pulse-anim 2s infinite;
  animation: pulse-anim 2s infinite;
}

@keyframes pulse-anim {
  from {
    -webkit-transform: scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(0.85);
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0.25;
  }
  to {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Pulse Button anim ######################### */

.pulse-button {
    -webkit-animation: pulse-button-anim 2s infinite;
    animation: pulse-button-anim 2s infinite;
  }
  
  @keyframes pulse-button-anim {
    from {
      -webkit-transform: scale(1);
      transform: translateY(-50%) scale(1);
      opacity: 1;
    }
    50% {
      -webkit-transform: translateY(-50%) scale(0.85);
      transform: translateY(-50%) scale(0.85);
      opacity: 0.25;
    }
    to {
      -webkit-transform: translateY(-50%) scale(1);
      transform: translateY(-50%) scale(1);
      opacity: 1;
    }
  }

/* Buzz anim ################################# */

@keyframes buzz-anim {
  1% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  2% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  3% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  4% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  5% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  6% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  7% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  8% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  9% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  10% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}