* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}
:root {
  --c1: rgb(231, 210, 183);
  --c2: rgb(116, 243, 216);
}
html {
  scroll-behavior: smooth;
}
html,
body {
  height: 1000vh;
  background-color: #000000;
  color: white;
  margin: 0;
  padding: 0;
  width: 100%;
}

#profile-pic {
  transition: 1s;
  transform: translateX(0%);
  width: 120%;
  position: relative;
  top: 22vh;
}
#profile-pic.on_hover {
  transition: 1s;
  scale: 1.1;
  transform: translateX(10%);
}
#last-name {
  transition: 1s;
  position: relative;
  top: 42vh;
  left: 10%;
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  font-size: 5vh;
}
#first-name {
  transition: 1s;
  position: relative;
  top: 42vh;
  left: 10%;
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  font-size: 5vh;
}
#first-name.hovering {
  color: white;
  scale: 1.3;
  transition: 1s;
  position: relative;
  left: -32%;
}
#last-name.hovering {
  color: white;
  scale: 1.3;
  transition: 1s;
  position: relative;
  left: -32%;
}
#middle-section {
  color: rgb(0, 0, 0);
  transition: 1s;
  height: 100vh;
  width: 30%;
  background-color: var(--c1);
  display: flex;
  align-items: center;

  justify-content: flex-end;
  flex-direction: column;
}
#middle-section:hover {
  transition: 0.5s;
  background-color: rgb(0, 0, 0);
}

.Nav_Bar {
  margin-top: 1%;
  color: rgb(255, 255, 255);
  width: 33%;
  height: 7%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
#Nav_Bar2 {
  position: absolute;
  right: 0px;
}
#Nav_Bar1 {
  position: absolute;
  left: 0px;
}
.Nav_option {
  font-size: 2.7vh;
  font-family: "Abel", sans-serif;
  font-weight: 800;
  border-radius: 1.5vh;
  width: 30%;
  height: 100%;
  text-align: center;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Nav_option:hover {
  background-color: rgb(231, 210, 183);
  color: black;
}
#landing-page {
  height: 122vh;
  display: flex;
  justify-content: center;
  background-color: aqua;
  background: linear-gradient(
    to bottom,
    black 0%,
    rgb(26, 25, 25) 85%,
    rgb(37, 37, 37) 100%
  );
}

.section-bg {
  background: linear-gradient(
    to bottom,
    black 0%,
    rgb(26, 25, 25) 85%,
    rgb(37, 37, 37) 100%
  );

  transition: 0.5s;
  height: 122vh;
  width: 37%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#dot {
  display: inline-block;
  font-size: 30vh;
  color: var(--c1);
}
#name {
  color: var(--c1);
}

#hello {
  max-width: 80%;
  display: inline-block;
  font-size: 30vh;
  font-weight: 500;
}
#greetings {
  font-family: "Cute Font", sans-serif;
  font-size: 8vh;
  width: 80%;
  position: relative;
  bottom: 5%;
}
#tagline {
  font-family: "Cute Font", sans-serif;
  font-size: 8vh;
  width: 70%;
  position: relative;
  bottom: 8%;
}

ul {
  margin-left: 1.5vh;
  padding: 0;
  display: flex;
}

ul li span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--c1);
  transition: 0.5s;
  display: flex !important;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 4vh;
  border-radius: 4vh;
}

ul li:hover span:nth-child(5) {
  transform: translate(40px, -40px);
  opacity: 1;
}

ul li:hover span:nth-child(4) {
  transform: translate(30px, -30px);
  opacity: 0.8;
}

ul li:hover span:nth-child(3) {
  transform: translate(20px, -20px);
  opacity: 0.6;
}

ul li:hover span:nth-child(2) {
  transform: translate(10px, -10px);
  opacity: 0.4;
}

ul li:hover span:nth-child(1) {
  transform: translate(0, 0);
  opacity: 0.2;
}
#introduction {
  text-align: center;
  font-family: "Cute Font", sans-serif;
  font-size: 6vh;
  max-width: 80%;
  overflow-y: hidden;
  position: relative;
  bottom: 10%;
  left: 1%;
}
#intro {
  font-size: 4vh;
}

#Download_cv {
  text-decoration: none;
  color: black;
  font-size: 6vh;
  font-family: "Cute Font";
  border-radius: 4vh;
  background-color: var(--c1);
  height: 9vh;
  padding-right: 5vh;
  padding-left: 5vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  cursor: pointer;
}
#CV {
  display: flex;
  position: relative;
  bottom: 5vh;
  left: 4vh;
}
ul li {
  position: relative;

  list-style: none;
  width: 9vh;
  height: 9vh;
  transform: rotate(0deg) skew(0deg);
}
#About-page {
  width: 100%;
  height: 122vh;
  background-color: #22393a;
  z-index: 1;
  position: relative;
}
#Scrolling_tab {
  overflow: hidden;
  padding: 0.5vh;
  padding-top: 1.2vh;
  width: 100%;
  background-color: var(--c1);
  display: flex;
  gap: 7rem;
}
#Scrolling_tab ul {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;

  align-items: center;
  justify-content: space-between;
  animation: scroll 10s linear infinite;
}

#Heading_bg {
  font-family: "Abel", sans-serif;
  color: rgb(255, 255, 255);
  font-size: 4vh;
  font-weight: 500;
  letter-spacing: 0.5vh;
  margin: 15vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#Heading {
  color: var(--c1);
}

#Question {
  font-family: "Afacad Flux", serif;
  font-size: 12vh;
  letter-spacing: 0;
  font-weight: 700;
}

#Line {
  overflow-y: hidden;
  background-image: url(./Pics/background.png);
  background-size: cover;
  background-position: center;
  border-radius: 4vh;
  margin-top: 3vh;
  background-color: var(--c1);
  height: 70vh;
  width: 105%;
  display: flex;
  align-items: center;
  justify-content: start;
}
#Biography_img {
  height: 100%;
  width: 64.6%;
  margin: 1.8%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#Biography_content {
  border-radius: 4vh;
  height: 90%;
  width: 30%;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5%;
}
#Biography_btn_heading {
  font-family: "Afacad Flux", sans-serif;
  font-weight: 600;
  font-size: 3.5vh;
}
.Biography_btn {
  transition: 0.8s;
  cursor: pointer;
  color: white;
  padding-left: 8%;
  background-color: rgb(36, 36, 36);
  height: 21.25%;
  width: 100%;
  border-radius: 2vh;
  display: flex;
  justify-content: center;
  flex-direction: column;

  position: relative;
  overflow: hidden;
}

.Biography_btn div {
  font-weight: 400;
  font-size: 2.5vh;
  z-index: 1;
  position: relative;
}

.Biography_btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2%;
  background: rgb(255, 255, 255);
  z-index: 0;
  transition: width 0.5s ease;
}

.Biography_btn:hover::before {
  width: 100%;
}

.Biography_btn:hover {
  color: rgb(36, 36, 36);
  transition: 0.3s;
}

#about_pic {
  background-color: rgba(255, 252, 96, 0.4);
  height: 20vh;
  width: 21.25vh;
  background-image: url(./Pics/About_pic.png);
  background-size: cover;

  border-radius: 50%;
  z-index: 2;
  position: relative;
  top: 5%;
}

#about_content {
  cursor: context-menu;
  font-family: "Dhurjati";
  color: rgb(0, 0, 0);
  padding: 3%;
  height: 70%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  position: relative;
  bottom: 5%;
  font-size: 3.2vh;
  letter-spacing: 0.4vh;
  padding-top: 8%;
  border-radius: 4vh;
  text-align: center;
  content-visibility: hidden;
}

#transition_bg {
  height: 0vh;
  width: 100%;
  background: url(/Pics/forest.png);
  background-size: 100%;
  background-position: bottom;
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 0px;
}
.transition_block {
  height: 0vh;
  width: 10%;
}
#block1 {
  background-image: url(./Pics/00.png);
  background-size: cover;
  background-position: bottom;
  background-size: 100%;
}
#block2 {
  background-image: url(./Pics/10.png);
  background-size: cover;
  background-position: bottom;
}
#block3 {
  background-image: url(./Pics/20.png);
  background-size: cover;
  background-position: bottom;
}
#block4 {
  background-image: url(./Pics/30.png);
  background-size: cover;
  background-position: bottom;
}
#block5 {
  background-image: url(./Pics/40.png);
  background-size: cover;
  background-position: bottom;
}
#block6 {
  background-image: url(./Pics/50.png);
  background-size: cover;
  background-position: bottom;
}
#block7 {
  background-image: url(./Pics/60.png);
  background-size: cover;
  background-position: bottom;
}
#block8 {
  background-image: url(./Pics/70.png);
  background-size: cover;
  background-position: bottom;
}
#block9 {
  background-image: url(./Pics/80.png);
  background-size: cover;
  background-position: bottom;
}
#block10 {
  background-image: url(./Pics/90.png);
  background-size: cover;
  background-position: bottom;
}
#Projects-page {
  width: 100%;
  background-size: 80%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  flex-direction: column;
}
#Projects_heading {
  font-weight: 501;
  z-index: 1;
  display: inline;
  opacity: 0;
  font-family: "Alegreya Sans SC", serif;
  margin-bottom: 1%;
}
#Projects_heading span {
  display: inline-block;
  margin: 1px;
  font-size: 13vh;
  line-height: 1.2;
  color: var(--c1);
}
#Projects_heading span.block {
  background: var(--c1);
  color: #000000;
}
.sticky {
  opacity: 0;
  z-index: 1;
}

.imges video {
  width: 100%;
  height: auto;
}
section {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 1.5em;
  overflow: hidden;
}

.slider {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 300%;
  height: 100%;
  display: flex;
  will-change: transform;
  transform: translateX(0);
}

.slide {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex: 1;
  height: 100%;
}
.title {
  display: inline-block;
  position: absolute;
  bottom: 0%;
  right: 0;
  width: max-content;
  margin: 5vh;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  z-index: 2;
}

.button {
  width: 7vh;
  height: 7vh;
  border-radius: 50%;
  background-color: rgb(20, 20, 20);
  border: var(--c1) 0.5vh solid;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition-duration: 0.3s;
  overflow: hidden;
  position: relative;
}

.svgIcon {
  width: 2.4vh;
  transition-duration: 0.3s;
}

.svgIcon path {
  fill: var(--c1);
}

.button:hover {
  border: none;
  width: 19.4vh;
  border-radius: 7vh;
  transition-duration: 0.3s;
  background-color: var(--c1);
  align-items: center;
}

.button:hover .svgIcon {
  transition-duration: 0.3s;
  transform: translateY(-200%);
}

.button::before {
  position: absolute;
  bottom: -2.8vh;
  content: "View Live";
  color: rgb(0, 0, 0);
}
#constructing_btn::before {
  content: "Working";
}
#soon_btn::before {
  content: "Up Next";
}
.button:hover::before {
  font-size: 3vh;
  opacity: 1;
  font-family: "Alegreya Sans SC", serif;
  bottom: unset;
  transition-duration: 0.3s;
}

#imgs {
  height: 6vh;
}
@keyframes scroll {
  to {
    transform: translateX(calc(-100% - 7.5rem));
  }
}

#skills-title {
  font-size: 13vh;
  font-weight: 501;
  z-index: 0;
  display: inline;
  font-family: "Alegreya Sans SC", serif;
}
#skills-header {
  margin-top: 5vh;
  z-index: 1;
  height: 30vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#skills-underline {
  opacity: 1;
  background-color: var(--c1);
  height: 30%;
  width: 0.2%;
  border-radius: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#skills-container {
  width: 100%;
  height: 135vh;
  display: flex;
  align-items: center;
}

#skills-list {
  width: 84%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  gap: 0px;
}

.skill-item {
  height: 89%;
  width: 94%;
  background-color: #242321;

  border-radius: 1vh;
  padding: 5%;
}
.skills-column {
  width: 8%;
  height: 90%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  place-items: center;
}
.skill-graphic-1 {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}
.skill-baseline {
  height: 100%;
  width: 1vh;
  background-color: var(--c1);
}
.skill-midline {
  height: 1vh;
  width: 25%;
  background-color: var(--c1);
}
.skill-circle {
  height: 3vh;
  width: 3vh;
  background-color: var(--c1);
  border-radius: 50%;
  position: relative;
  right: 1vh;
}
.skill-graphic-2 {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
}
.skill-graphic-2 > .skill-circle {
  position: relative;
  left: 1vh;
}
.skills-column .skill-graphic-1:nth-child(2) .skill-baseline {
  border-bottom-right-radius: 10vh;
  border-bottom-left-radius: 10vh;
}
.skills-column .skill-graphic-2:nth-child(2) .skill-baseline {
  border-bottom-right-radius: 10vh;
  border-bottom-left-radius: 10vh;
}
.skills-column .skill-graphic-1:nth-child(1) .skill-baseline {
  border-top-right-radius: 10vh;
  border-top-left-radius: 10vh;
}
.skills-column .skill-graphic-2:nth-child(1) .skill-baseline {
  border-top-right-radius: 10vh;
  border-top-left-radius: 10vh;
}
.skill-heading {
  font-family: "Alegreya Sans SC";
  font-size: 5vh;
  font-weight: 501;
}
.skill-stars {
  color: #ffc801;
  height: 15%;
  width: 100%;
  letter-spacing: 4px;
  display: flex;
  align-items: center;
  justify-content: end;
}
.skill-stars > .skill-rating {
  margin-left: 1%;
  letter-spacing: 0.4vh;
  font-family: "Alegreya Sans SC";
  font-size: 2.8vh;
  color: var(--c1);
}
.skill-bar {
  border-radius: 2vh;
  margin-top: 3vh;
  height: 60%;
  width: 100%;
  background-color: #4e4e4e71;
  box-shadow: 0.25rem 0.25rem rgb(0, 0, 0);
  font-family: "Alegreya Sans SC";
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 2.5vh;
}

#half-star {
  color: rgb(65, 57, 50);
}

.skill {
  color: #000000;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 4px;
  padding: 1.5vh 3vh;
  font-family: "Alegreya Sans SC";
  font-weight: 700;
  font-size: 2.5vh;
  transition: 0.5s;
  background: #ffb4a2;
  box-shadow: 0.25rem 0.25rem rgb(0, 0, 0);
}
.skill:hover {
  scale: 1.1;
  background-color: black;
  color: white;
  box-shadow: 0.25rem 0.25rem rgb(255, 255, 255);
  border: 1px solid rgb(255, 255, 255);
}
#skills-page {
  overflow-y: hidden;
  height: 235vh;
  display: flex;
  align-items: end;
  flex-direction: column;
  gap: 1vh;
}
.social-page {
  height: 45vh;
  width: 100%;
  background-color: #4e4e4e71;
  margin-top: 10vh;
  margin-bottom: 14vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.light-button button.bt {
  position: relative;
  height: 28vh;
  display: flex;
  align-items: flex-end;
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
}

.light-button button.bt .button-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 16vh;
  width: 16vh;
  background-color: #0a0a0a;
  border-radius: 1vh;
  font-size: 2vh;
  font-weight: 700;
  transition: 300ms;
  outline: #0f0f0f 0.4vh solid;
  outline-offset: 20;
}

.light-button button.bt .button-holder svg {
  height: 8vh;
  fill: #0f0f0f;
  transition: 300ms;
  margin-bottom: 1vh;
}

.light-button button.bt .light-holder {
  position: absolute;
  height: 31vh;
  width: 15vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.light-button button.bt .light-holder .dot {
  position: absolute;
  top: 0;
  width: 1.5vh;
  height: 1.5vh;
  background-color: #000000;
  border-radius: 1.5vh;
  z-index: 2;
}

.light-button button.bt .light-holder .light {
  position: absolute;
  top: 0;
  width: 31vh;
  height: 31vh;
  clip-path: polygon(50% 0%, 25% 100%, 75% 100%);
  background: transparent;
}

.light-button button.bt .button-holder svg {
  fill: var(--c1);
}

.light-button button.bt .button-holder {
  color: var(--c1);
  outline: var(--c1) 0.4vh solid;
  outline-offset: 0.4vh;
}

.light-button button.bt .light-holder .light {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    var(--c1) 0%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}
.light-button {
  display: flex;
  align-self: center;
}

.light-button:hover button.bt #Discord svg {
  fill: #1da1f2;
}
.light-button button.bt:hover .light-holder #Discord {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    #1da1f2 0%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}
.light-button button.bt:hover #Discord {
  color: #1da1f2;
  outline: #1da1f2 0.4vh solid;
  outline-offset: 0.4vh;
}

.light-button button.bt:hover #Reddit svg {
  fill: #fd9be3;
}
.light-button button.bt:hover .light-holder #Reddit {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    #fd9be3 0%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}
.light-button button.bt:hover #Reddit {
  color: #fd9be3;
  outline: #fd9be3 0.4vh solid;
  outline-offset: 0.4vh;
}

.light-button:hover button.bt #linkedin svg {
  fill: rgba(10, 102, 194, 1);
}
.light-button button.bt:hover .light-holder #linkedin {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(10, 102, 194, 1) 0%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}
.light-button button.bt:hover #linkedin {
  color: rgba(10, 102, 194, 1);
  outline: rgba(10, 102, 194, 1) 0.4vh solid;
  outline-offset: 0.4vh;
}

.light-button button.bt:hover #GitHub svg {
  fill: rgba(101, 101, 121, 1);
}
.light-button button.bt:hover .light-holder #GitHub {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    180deg,
    rgba(101, 101, 121, 1) 0%,
    rgba(255, 255, 255, 0) 75%,
    rgba(255, 255, 255, 0) 100%
  );
}
.light-button button.bt:hover #GitHub {
  color: rgba(101, 101, 121, 1);
  outline: rgba(101, 101, 121, 1) 0.4vh solid;
  outline-offset: 0.4vh;
}

.social-btn {
  background-color: rgba(61, 61, 61, 0.5);
  height: 85%;
  width: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3vh;
  transition: 0.5s;
  box-shadow: 0.25rem 0.25rem rgb(0, 0, 0);
}
#Instagram {
  font-size: 9vh;
  font-weight: 500;
  margin-bottom: 1vh;
}
#Twitter {
  font-size: 7vh;
  font-weight: 500;
  margin-bottom: 1vh;
}
#transition_bg_2 {
  height: 100vh;
  width: 100%;
  display: flex;
}
.Contact_block {
  height: 100vh;
  width: 10%;
}
#Contact-page {
  width: 100%;
  background-color: #4e4e4e71;
  background-size: cover;
  overflow-y: hidden;
  border-top-right-radius: 10vh;
  border-top-left-radius: 10vh;
}
.cat_img img {
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
  border-top-right-radius: 10vh;
  border-top-left-radius: 10vh;
  position: relative;
  bottom: 89vh;
}

#contact_svg {
  height: 57vh;
}

#envelope {
  animation: float 2s ease-in-out infinite;
}

#star1,
#star2,
#star3,
#star4,
#star5,
#star6 {
  animation: blink 1s ease-in-out infinite;
}

#star2 {
  animation-delay: 100ms;
}

#star3 {
  animation-delay: 500ms;
}

#star4 {
  animation-delay: 700ms;
}

#star5 {
  animation-delay: 300ms;
}

#star6 {
  animation-delay: 200ms;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-3vh);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.contact_img {
  height: 77vh;
  box-shadow: 0.25rem 0.25rem rgb(0, 0, 0);
  border-radius: 10vh;
  margin: 5vh;
  padding: 5vh;
  background-color: #4e4e4e71;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.svg_color1 {
  fill: #d0f6ff;
}
.svg_color2 {
  fill: #ade0ec;
}
.svg_color3 {
  fill: #fafafa;
}
.svg_color4 {
  fill: #dadada;
}
.svg_color5 {
  fill: #b2b2b2;
}
.svg_color6 {
  stroke: #00c0e0;
}
.svg_color7 {
  fill: #009d9c;
}
.svg_color8 {
  stroke: #00bbbf;
}
.svg_color9 {
  stroke: #11abba;
}
.svg_color9F {
  fill: #11abba;
}
.svg_color10 {
  stroke: #55cde2;
}
.svg_color11 {
  fill: #060c37;
}
.svg_color12 {
  fill: #111e65;
}
.svg_color13 {
  fill: #d8e9f5;
}
.svg_color14 {
  fill: #ff6044;
}
.svg_color15 {
  fill: #92fc28;
}
.svg_color16 {
  fill: #c0cfda;
}
.svg_color17 {
  fill: #a4b3bc;
}
.svg_color18 {
  fill: #dceefb;
}
.svg_color19 {
  fill: #cadbe7;
}
.svg_color20 {
  fill: white;
}
.svg_color21 {
  fill: #ff9004;
}
.svg_color22 {
  fill: #dcdcdc;
}
.svg_color23 {
  fill: #ffae35;
}
.svg_color24 {
  fill: #ffbf69;
}
.svg_color25 {
  fill: #a4b1ba;
}
#contact_message {
  height: 16vh;
}
#contact_svg {
  height: 100%;
  width: 45%;
}
.contact_details {
  display: flex;
  align-self: center;
  justify-content: space-evenly;
  gap: 4vh;
  flex-direction: column;
  height: 100%;
  width: 40%;
}

.Message {
  border-radius: 2vh;
  background-color: #40414f;
  transform: translate(0px, 0px);
  box-shadow: 0.8vh 0.8vh #25252c;
  display: flex;
  align-items: center;
  padding: 1vh;
}

.MsgInput {
  font-family: monospace;
  overflow-y: hidden;
  resize: none;
  font-size: 3vh;
  background-color: #40414f;
  border: none;
  outline: none;
  height: 6vh;
  flex-grow: 1;
  color: white;
  padding: 2vh;
  font-weight: 900;
}

.contact_btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact_heading {
  height: 7vh;
  color: var(--c1);
  font-family: "Borel", serif;
  font-weight: 600;
  font-style: normal;
  align-self: center;
  font-size: 7vh;
}

.contact_container {
  text-align: center;
}

#contact_button {
  font-family: Alegreya Sans SC;
  outline: none;
  height: 7vh;
  width: 20vh;
  border-radius: 10vh;
  background: #81d6bb;
  box-shadow: 0.6vh 0.8vh #000000;
  border: 0.4vh solid #25252c;
  color: #25252c;
  font-size: 2vh;
  font-weight: 900;
  letter-spacing: 0.1vh;
  cursor: pointer;
  transition: all 0.25s ease;
}

#contact_button:hover {
  color: rgb(0, 0, 0);
  background: #1ecd97;
}

.onclic {
  width: 7vh !important;
  height: 7vh !important;
  border-radius: 50% !important;
  border-width: 0.5vh;
  font-size: 0;
  box-shadow: none !important;
  border-left-color: #1ecd97 !important;
  animation: rotating 2s 0.25s linear infinite !important;
  transform-origin: center;
  transition: all 0.25s ease;
}

.validate {
  width: 7vh;
  height: 7vh;
  font-size: 2vh;
  color: white;
  background: #1ecd97;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.25s ease;
}

.validate::after {
  color: #25252c;
  content: "✔";
  font-size: 2.5vh;
  transition: all 0.25s ease;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}