@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Montserrat+Alternates:wght@100&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Signika:wght@700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
@font-face{
  src: url(font/Mosk_Typeface/Mosk\ Ultra-Bold\ 900.ttf);
  font-family: mosk-ultra;
}
@font-face{
  src: url(font/Mosk_Typeface/Mosk\ Extra-Bold\ 800.ttf\ 500.ttf);
  font-family: mosk-extra;
}
@font-face{
  src: url(font/Mosk_Typeface/Mosk\ Medium\ 500.ttf);
  font-family: mosk;
}
@font-face{
  src: url(font/jenthill.woff);
  font-family: jenthill;
}
/* .darkmode {
  --clr-light: #fdffc4;
  --clr-dark: #00332a;
  --clr-primary: #202302;
  --clr-secondary: #00100d;
  --clr-accent: #ff7750;

  --foreground: white;
  --background: black;
} */
body {
  position:relative;
  box-sizing: border-box;
  background-size: cover;
  /* font-family: 'Montserrat Alternates', sans-serif; */
  /* text-align: center; */
  margin: 0px;
  color: var(--foreground);
  background:var(--background);
  /* overflow: hidden; */
}

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

body::-webkit-scrollbar-thumb {
  background-color: rgb(197, 90, 122);
  /* background-color: hsl(186, 52%, 78%); */
  border-radius: 6px;
  border: 0;
}

::-webkit-scrollbar-track {
  background-color: hsl(0, 0%, 25%);
}

/* start welcome animation */

body.welcome {
  background: #512da8;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.welcome .splash {
  height: 0px;
  padding: 0px;
  border: 130em solid #039be5;
  position: fixed;
  left: 50%;
  top: 100%;
  display: block;
  box-sizing: initial;
  overflow: hidden;

  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
}

.welcome #welcome {
  background: #311b92 ;
  width: 56px;
  height: 56px;
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards, hide 2s 2.9s ease forwards;
}

/* moveIn */
.welcome header,
.welcome a.btn {
  opacity: 0;
  animation: moveIn 2s 3.1s ease forwards;
}

@keyframes init {
  0% {
    width: 0px;
    height: 0px;
  }
  100% {
    width: 56px;
    height: 56px;
    margin-top: 0px;
    opacity: 1;
  }
}

@keyframes puff {
  0% {
    top: 100%;
    height: 0px;
    padding: 0px;
  }
  100% {
    top: 50%;
    height: 100%;
    padding: 0px 100%;
  }
}

@keyframes borderRadius {
  0% {
    border-radius: 50%;
  }
  100% {
    border-radius: 0px;
  }
}

@keyframes moveDown {
  0% {
    top: 50%;
  }
  50% {
    top: 40%;
  }
  100% {
    top: 100%;
  }
}

@keyframes moveUp {
  0% {
    background: #311b92;
    top: 100%;
  }
  50% {
    top: 40%;
  }
  100% {
    top: 50%;
    background: #039be5;
  }
}

@keyframes materia {
  0% {
    background: #039be5;
  }
  50% {
    background: #039be5;
    top: 26px;
  }
  100% {
    background: #311b92;
    width: 100%;
    height: 64px;
    border-radius: 0px;
    top: 26px;
  }
}

@keyframes moveIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* -----------Nav----------------  */

.nav {
  position: fixed;
  background-color:aliceblue;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: solid 2px black;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-family: mosk;
  font-size: .6rem;
  font-weight: 600;
  z-index: 100;
}

ul {
  list-style: none;
  padding-inline-start: 0px;
}

.box-flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.nav_list {
  display: flex;
  align-items: center;
}

.nav__list>*+* {
  margin-left: 1.25rem
}

.nav__item {
  padding-left: 25px;
  flex-shrink: 0
}

.nav__item a {
  width: 100%;
  position: relative;
  display: block;
  color: currentColor;
  text-decoration: none;
  margin-top: 1rem;
  position: relative
}

.nav__item a:hover:after, .nav__item a[aria-current=page]:after {
  opacity: 1
}

.nav__item a:after {
  opacity: 0;
  content: "";
  position: absolute;
  bottom: -20%;
  left: 0;
  right: 0;
  width: 100%;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg width='53' height='4' viewBox='0 0 53 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M51.9 3C49 3 49 1 46.2 1c-2.8 0-2.8 2-5.7 2-2.8 0-2.8-2-5.7-2C32 1 32 3 29.1 3c-2.8 0-2.8-2-5.7-2-2.8 0-2.8 2-5.6 2S15 1 12.1 1C9.5 1 9.5 3 6.7 3 3.8 3 3.8 1 1 1' stroke='%23404040' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='52.9' height='4' fill='%23404040'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity .3s ease-out
}

.nav__item a[data-id]:before {
  content: "";
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  top: -100%;
  left: 50%;
  transform: translateX(-50%)
}


.nav__item a[data-id=Home]:before {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxpbmUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyOCAxMjg7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48Zz48cGF0aCBkPSJNMTEzLjAyMiwzM0gxMTNWMTYuODc2YzEuMTUxLTAuMzM5LDItMS4zOTMsMi0yLjY1M3YtMS4yN2MxLjEzOC0wLjIyMSwyLTEuMjIyLDItMi40MjRWOC40NzIgICBDMTE3LDcuMTA4LDExNS44OTIsNiwxMTQuNTI4LDZIODcuNDcyQzg2LjEwOCw2LDg1LDcuMTA4LDg1LDguNDcydjIuMDU3YzAsMS4yMDIsMC44NjIsMi4yMDMsMiwyLjQyNHYxLjI3ICAgYzAsMS4yNiwwLjg0OSwyLjMxNCwyLDIuNjUzVjMzSDU0LjQ4NGwtOC4wMjItOS41MTNDNDUuMTMxLDIxLjkxLDQzLjE4NSwyMS4wMDQsNDEuMTEsMjFjLTIuMDU4LDAtNC4wMDMsMC45LTUuMzM3LDIuNDdsLTMzLjExLDM5ICAgYy0xLjIxLDEuNDI1LTEuNzkyLDMuMjM2LTEuNjQsNS4xMDFjMC4xNTIsMS44NjMsMS4wMjEsMy41NTcsMi40NDYsNC43NjZjMS40MjQsMS4yMSwzLjI0MSwxLjc5OSw1LjEsMS42NDEgICBjMC40OTEtMC4wNCwwLjk2OS0wLjEzMywxLjQzMS0wLjI3Vjk5Yy0wLjU1MywwLTEsMC40NDctMSwxdjIxYzAsMC41NTMsMC40NDcsMSwxLDFoNjJoNTBjMC41NTMsMCwxLTAuNDQ3LDEtMVY5Mi42NCAgIGMzLjQ1LTIuNDI1LDQtMTYuNzcyLDQtMjUuNjRWNDYuOTc4QzEyNywzOS4yNzEsMTIwLjcyOSwzMywxMTMuMDIyLDMzeiBNOTEsMjd2LTRoM3Y0SDkxeiBNMTAwLDE3djRoLTl2LTRIMTAweiBNMTExLDE3djRoLTl2LTQgICBIMTExeiBNMTExLDIzdjRoLTN2LTRIMTExeiBNOTYsMjNoMTB2NEg5NlYyM3ogTTExMSwyOXY0aC05di00SDExMXogTTExMi4yMjMsMTVIODkuNzc3Qzg5LjM0OSwxNSw4OSwxNC42NTEsODksMTQuMjIzVjEzaDI0ICAgdjEuMjIzQzExMywxNC42NTEsMTEyLjY1MSwxNSwxMTIuMjIzLDE1eiBNODcsOC40NzJDODcsOC4yMTIsODcuMjEyLDgsODcuNDcyLDhoMjcuMDU3QzExNC43ODgsOCwxMTUsOC4yMTIsMTE1LDguNDcydjIuMDU3ICAgYzAsMC4yNi0wLjIxMiwwLjQ3Mi0wLjQ3MiwwLjQ3Mkg4Ny40NzJDODcuMjEyLDExLDg3LDEwLjc4OCw4NywxMC41MjhWOC40NzJ6IE05MSwyOWg5djRoLTlWMjl6IE04LjQwNiw3MS45ODMgICBjLTEuMzM1LDAuMTExLTIuNjI1LTAuMzA4LTMuNjQyLTEuMTcyYy0xLjAxOS0wLjg2NC0xLjY0LTIuMDczLTEuNzQ4LTMuNDA0czAuMzA4LTIuNjI1LDEuMTcyLTMuNjQzbDMzLjEwOS0zOSAgIEMzOC4yNTEsMjMuNjQ0LDM5LjY0MSwyMyw0MS4xMTgsMjNjMS40NzQsMC4wMDMsMi44NjQsMC42NSwzLjgxNCwxLjc3NmwzMi44OSwzOWMwLjc1OSwwLjg5OSwxLjE3NiwyLjA0NCwxLjE3NSwzLjIyMSAgIGMwLDAuMDI1LDAuMDAxLDAuMDUxLDAuMDAzLDAuMDc2Qzc4Ljk4OSw3Ni42MTksNzcuMTI2LDkwLDczLDkwYy0wLjU0NSwwLTAuOTctMC4xNzUtMS4zMzgtMC41NTEgICBjLTEuODI0LTEuODYxLTEuNzA2LTcuODE4LTEuNjItMTIuMTY5YzAuMDg5LTQuNDI5LDAuMDg5LTYuNzg2LTAuODk2LTcuNzkxQzY4LjgzMiw2OS4xNjksNjguNDM2LDY5LDY4LDY5ICAgYy0yLjAxNSwwLTIuNzc2LDEuNTQ3LTMuMzg5LDIuNzg5QzYzLjkxNSw3My4yMDEsNjMuNDUxLDc0LDYyLDc0Yy0wLjU5NSwwLTIuNDA0LTMuMDQ3LTIuOTA0LTE2LjU4NyAgIGMtMC4wMDgtMC4yMjMtMC4wOTEtMC40MzctMC4yMzQtMC42MDdMNDEuODU5LDM2LjY0NWMtMC4xODktMC4yMjUtMC40NjktMC4zNTUtMC43NjMtMC4zNTVjLTAuMDAxLDAtMC4wMDEsMC0wLjAwMiwwICAgYy0wLjI5NCwwLTAuNTcyLDAuMTI5LTAuNzYzLDAuMzUzTDExLjgxMiw3MC4yMzVDMTAuOTQ3LDcxLjI1NCw5LjczOCw3MS44NzUsOC40MDYsNzEuOTgzeiBNNDgsMTIwSDM0Vjk2YzAtMy44NTksMy4xNDEtNyw3LTcgICBzNywzLjE0MSw3LDdWMTIweiBNNTAsMTAxaDIxdjE5SDUwVjEwMXogTTU3LjY5OCw2NkgxOC4wMzJsMjMuMDYtMjcuMTYzTDU3LjExLDU3LjgzMkM1Ny4yMzgsNjEuMTE1LDU3LjQ0Myw2My43OTcsNTcuNjk4LDY2eiAgICBNMTIsNzIuNzM5YzAuNDg5LTAuMzQyLDAuOTQxLTAuNzQyLDEuMzM3LTEuMjA4TDE2LjMzNCw2OGg0MS42MjljMS4yMDIsNy45OTEsMy4xNjUsOCw0LjAzNyw4YzIuNzY2LDAsMy43MTMtMS45MjMsNC40MDUtMy4zMjcgICBjMC41MzMtMS4wODMsMC44MjQtMS41NjQsMS4zOC0xLjY1NmMwLjM2NCwwLjg1MSwwLjMwMywzLjkzNSwwLjI1OCw2LjIyNEM2Ny45NDIsODIuMjg1LDY3LjgzNiw4Ny45Nyw3MCw5MC41NzJWOTlINTB2LTMgICBjMC00Ljk2My00LjAzNy05LTktOXMtOSw0LjAzNy05LDl2M0gxMlY3Mi43Mzl6IE0xMSwxMDFoMjF2MTlIMTFWMTAxeiBNNzMsMTIwdi0yMGMwLTAuNTUzLTAuNDQ3LTEtMS0xdi03LjEzNiAgIEM3Mi4zMTgsOTEuOTQ0LDcyLjY0OCw5Miw3Myw5MmMzLjUyNSwwLDUuODUzLTQuMjA1LDcuMTE0LTEyLjg1NUM4MC43OSw3NC41MTMsODAuOTUsNjkuOTU5LDgwLjk4OCw2OGgyNy4wMjEgICBjMC4wNzcsNC4zMDEsMC43MjQsMTQsNC45NzIsMTRjMy4wODQsMCwzLjI2LTMuNDI5LDMuMzg5LTUuOTMzYzAuMDQ2LTAuODk1LDAuMTM3LTIuNjU3LDAuNDctMy4wMDcgICBjMC41MTEsMC45MTYsMC42NzEsNC42MDEsMC43NzksNy4wODhjMC4yNDksNS43NDEsMC41MTUsMTEuNjQyLDMuMzgyLDEyLjY3NlYxMjBINzN6IE0xMjUsNjdjMCwxMi4zOC0xLjQzNCwyMy41OTUtMy4wNjIsMjQgICBjLTEuODQ3LDAtMi4xNDQtNi44NDgtMi4zMjEtMTAuOTM4Yy0wLjIzNy01LjQ1Ny0wLjM5NC05LjA2Mi0yLjY1NC05LjA2MmMtMi4zMzUsMC0yLjQ3NywyLjc1My0yLjU5MSw0Ljk2NSAgIGMtMC4xNDMsMi43OS0wLjM3OCw0LjAzNS0xLjM5MSw0LjAzNWMtMS43NTUsMC0yLjk3OS02Ljg1Mi0yLjk4LTEzYzAtMC41NTMtMC40NDgtMS0xLTFIODAuOTA3ICAgYy0wLjE4Ni0xLjI4Ny0wLjcxLTIuNTEtMS41NTYtMy41MTNMNTYuMTcxLDM1SDkwaDIyaDEuMDIyQzExOS42MjcsMzUsMTI1LDQwLjM3MywxMjUsNDYuOTc4VjY3eiIvPjxwYXRoIGQ9Ik0xMTAsMTA0VjgyYzAtMC41NTMtMC40NDctMS0xLTFIODVjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2MjJjLTEuNjU0LDAtMywxLjM0Ni0zLDNzMS4zNDYsMywzLDNoMjZjMS42NTQsMCwzLTEuMzQ2LDMtMyAgIFMxMTEuNjU0LDEwNCwxMTAsMTA0eiBNODYsODNoMjJ2MjFIODZWODN6IE0xMTAsMTA4SDg0Yy0wLjU1MiwwLTEtMC40NDgtMS0xczAuNDQ4LTEsMS0xaDI2YzAuNTUyLDAsMSwwLjQ0OCwxLDEgICBTMTEwLjU1MiwxMDgsMTEwLDEwOHoiLz48cGF0aCBkPSJNNDUsMTAzYy0wLjU1MywwLTEsMC40NDctMSwxdjNjMCwwLjU1MywwLjQ0NywxLDEsMXMxLTAuNDQ3LDEtMXYtM0M0NiwxMDMuNDQ3LDQ1LjU1MywxMDMsNDUsMTAzeiIvPjxwYXRoIGQ9Ik0yOSw3OEgxN2MtMC41NTMsMC0xLDAuNDQ3LTEsMXYxMmMwLDAuNTUzLDAuNDQ3LDEsMSwxaDEyYzAuNTUzLDAsMS0wLjQ0NywxLTFWNzlDMzAsNzguNDQ3LDI5LjU1Myw3OCwyOSw3OHogTTI4LDg0aC00ICAgdi00aDRWODR6IE0yMiw4MHY0aC00di00SDIyeiBNMTgsODZoNHY0aC00Vjg2eiBNMjQsOTB2LTRoNHY0SDI0eiIvPjxwYXRoIGQ9Ik01Myw5MmgxMmMwLjU1MywwLDEtMC40NDcsMS0xVjc5YzAtMC41NTMtMC40NDctMS0xLTFINTNjLTAuNTUzLDAtMSwwLjQ0Ny0xLDF2MTJDNTIsOTEuNTUzLDUyLjQ0Nyw5Miw1Myw5MnogTTU0LDg2aDR2NCAgIGgtNFY4NnogTTYwLDkwdi00aDR2NEg2MHogTTY0LDg0aC00di00aDRWODR6IE01OCw4MHY0aC00di00SDU4eiIvPjxwYXRoIGQ9Ik0zMyw1NWMwLDQuNDExLDMuNTg5LDgsOCw4czgtMy41ODksOC04cy0zLjU4OS04LTgtOFMzMyw1MC41ODksMzMsNTV6IE00MCw0OS4wOVY1NGgtNC45MSAgIEMzNS41MTQsNTEuNDkzLDM3LjQ5Myw0OS41MTQsNDAsNDkuMDl6IE0zNS4wOSw1Nkg0MHY0LjkxQzM3LjQ5Myw2MC40ODYsMzUuNTE0LDU4LjUwNywzNS4wOSw1NnogTTQyLDYwLjkxVjU2aDQuOTEgICBDNDYuNDg2LDU4LjUwNyw0NC41MDcsNjAuNDg2LDQyLDYwLjkxeiBNNDYuOTEsNTRINDJ2LTQuOTFDNDQuNTA3LDQ5LjUxNCw0Ni40ODYsNTEuNDkzLDQ2LjkxLDU0eiIvPjxwYXRoIGQ9Ik0xMDIsMTAwSDkyYy0wLjU1MywwLTEsMC40NDctMSwxczAuNDQ3LDEsMSwxaDEwYzAuNTUzLDAsMS0wLjQ0NywxLTFTMTAyLjU1MywxMDAsMTAyLDEwMHoiLz48L2c+PC9zdmc+");
  width: 40px;
  stroke-width: 5px;
}

.nav__item a[data-id=About]:before {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDY0IDY0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik00OS4xNTMgNTEuNDY4Yy0uMTYzLS4yNDYgMi4xMjQtMS4xNDcgMi45NC0xLjcyLjgxOC0uNTczIDIuMjg4LTIuMjkzIDEuNTUzLTUuNDg3LS43MzUtMy4xOTMtNS45NjMtMTEuODc1LTUuOTYzLTExLjg3NXMxLjc5Ny0uOSAyLjA0Mi0xLjg4NGMuMjQ1LS45ODItNC4yNDctNy44NjItNC40OTItNy44NjItLjI0NSAwLTIuMzcuODItMi4zNy44MmwtMS43OTYtMi43MDRjLjMyNy0xLjcyIDEuMzA3LTYuNDctMy4yNjctMTMuMzVTMTkuNDIyLTIuNTg4IDEzLjk1IDIuNTcyQzguNDc2IDcuNzMyIDMuOSAxNS4zNDggNy4wMDUgMjQuMTk0czEyLjI1MiA5LjUgMTIuMjUyIDkuNSAxLjcxNSAxLjQ3NSA0LjE2NiAzLjkzMmMyLjQ1IDIuNDU3IDE0LjEzIDEzLjUxNCAxNi40MTggMTQuOTA2IDIuMjg3IDEuMzkyIDcuMTg4LS4wODIgNy41MTUgMCAuMzI3LjA4MiA3LjU5NiAxMC43MyA4LjAwNSAxMS4zMDMuNDA4LjU3MyAxLjM5LS40OSAxLjYzNC0uOTgzcy03LjY4LTExLjE0LTcuODQzLTExLjM4NHptLTQuMTY2LTI2LjQ1NWMuMzI3LjE2NCAyLjk0IDUuMDc4IDIuNDUgNS4zMjRzLS4yODYuNzM3LS42NTMuMTY0Yy0uMzY4LS41NzItMy4wMjItNC43NS0yLjk0LTUuMTE4LjA1Mi0uMjM0LjgxNy0uNTMzIDEuMTQzLS4zN3ptLTYuNzM4LTguNTZjLjA4LjI0Ny4yODUgMy44NS0uMDgzIDMuODEtLjM2OC0uMDQyLTIuNjU1LTEuNzItMi43NzctMS44ODUtLjA3NC0uMDk4IDEuNTUyLTEuNDc0IDIuMDgzLTEuNzIuNTMtLjI0NS42OTQtLjQ1Ljc3Ni0uMjA0em0tOC41NzggMGMtLjI4Ni0uMTIyLTMuMDYzLS40OS0zLjE0NS0uNjEzLS4yNTMtLjM4IDEuNTkzLTMuNjA0IDEuNTkzLTMuNjA0czMuNDcuNDUgMy40Ny42NTVjLjAwMi4yMDYtMS42MzIgMy42ODctMS45MTggMy41NjR6bTMuNzE3LTMuMDdjLjM1Ni0uMiAzLjc1NiAxLjcyIDMuNzE1IDEuODQzLS4wNC4xMjMtMS41NTIuNTczLTIuMjQ2IDEuNDc0LS42OTUuOS0uNzc3IDEuMTQ3LS45NCAxLjE0Ny0uMTYzIDAtMi43MzYtMS4wNjUtMi43MzYtMS4yNyAwLS4yMDUgMS44MzctMi45OSAyLjIwNS0zLjE5NHptLTUuODgyLTIuNzg1Yy0uNDA4LjEyMy00LjU3NC4yODctNC42MTUuMDQtLjA0LS4yNDUgMS43OTctMy41MiAyLjEyNC0zLjcyNiAwIDAgNC4zMy40OSA0LjMzLjgyIDAgLjMyNy0xLjQzIDIuNzQzLTEuODQgMi44NjZ6bS0xLjA2MiAxLjUxNWMuMzI3LjIwNS0xLjM5IDMuODEtMS42NzQgMy44OS0uMjg2LjA4Mi0zLjg0LjQxLTQuMDAyLS4wNC0uMTYzLS40NS44OTgtMy40IDEuMDYyLTMuNTY0LjM2NC0uMzY2IDQuMjg3LS40OSA0LjYxNC0uMjg3em0tLjYxMyA1Ljc3NGMuMTQ2LS4wNzMgMy4wNjMtLjA4MiAzLjEwNC4yMDUuMDQuMjg3LTEuMTg0IDMuNTIyLTEuMTg0IDMuNTIycy0yLjczNi0uNDktMi44Ni0uNzc4Yy0uMTItLjI4Ny42OTUtMi44MjYuOTQtMi45NXptMy4xMDQgNi4xMDJjLjIwNCAwIDIuMjQ2LjkgMi4yNDYgMS4xNDZzLS43NzYgNC4zLTEuMDIgNC4yNi0xLjkyLTEuMzUyLTIuMDQzLTEuNTE2Yy0uMjctLjM2LjYxMy0zLjg5LjgxNy0zLjg5em0uMjg2LTEuNzJjLS4wODItLjQxIDEuMTAzLTMuNjg3IDEuNDMtMy45NzMuMTg2LS4xNjQgMi4yNDUgMS4wMjQgMi4yNDUgMS4xNDdzLTEuMDYyIDMuNjg2LTEuMzQ4IDMuNjg2Yy0uMjg1IDAtMi4yNDUtLjQ1LTIuMzI3LS44NnptMy40NzIgMy42MDNjLjE1LS4wNzYgMS41OTMuOSAxLjM5IDEuNDc0LS4yMDUuNTczLTEuNjc1IDEuNjgtMS45MiAxLjU1Ni0uMjQ2LS4xMjIuMDQtMi43ODQuNTMtMy4wM3ptLjE2My0yLjEzYy0uMDQtLjQxIDEuMzktMy44NSAxLjc5Ny0zLjgwOC4yOTYuMDMgMi45OCAxLjgwMiAyLjk4IDIuMzM0IDAgLjUzLTIuMDgyIDMuNTYyLTIuMzI3IDMuNTYyLS4yNDUgMC0yLjQxLTEuNjgtMi40NS0yLjA5em0zLjc1Ny0xMi45OGMuMzY4LjI0NSAxLjE0NCAyLjIxIDEuMTQ0IDIuNDU2IDAgLjI0NS0zLjEwNS0xLjAyNS0zLjI2OC0xLjIzLS4xMzgtLjE3MiAxLjc1Ni0xLjQ3NCAyLjEyMy0xLjIyOHptLTUuMzEtMi43MDRjLjM3IDAgNC4wNDQgMS4wMjMgNC4wMDMgMS4zOS0uMDQuMzctMi41MzIgMi4wNS0yLjUzMiAyLjA1cy0zLjU5NC0uNjU2LTMuNzE2LS44NmMtLjEyMy0uMjA2IDEuODc4LTIuNTggMi4yNDYtMi41OHptLTIuODU4LTMuMTU0czIuMTI0Ljg2IDEuODM4IDEuMDI0Yy0uMjg2LjE2NC0uMzI3LjI4Ny0uNjUzLjE2NC0uMzI3LS4xMjMtMS40Ny0uNDEtMS40Ny0uNDFzLS4wNC0uNjU1LjI4NS0uNzc4em0tNS45NjItLjU3M2MuMTc1LS4xMDUgMy4wMjIuMDQgMi45LjI0Ni0uMTIzLjIwNC0xLjAyIDEuMjI3LTEuMzkgMS4yMjctLjM2NyAwLTMuMTQ0LjI0Ni0zLjE0NC4yNDZzMS40My0xLjU5OCAxLjYzNS0xLjcyem0uMzI2IDMuNHMtMS4yMjQgMy4xNTItMS43MTQgMy4xOTNjLS40OS4wNC0zLjEwNC4yODctMy4xMDQuMTIzIDAtLjE2NSAxLjMwNy0yLjgyNyAxLjQ3LTIuOTkuMTMtLjEzIDMuMzUtLjMyOCAzLjM1LS4zMjh6bS00Ljk4LTIuNzQ1Yy4yMDMtLjA0IDEuNTkyLS4yMDUgMS41OTItLjIwNXMtLjMyNyAxLjU5Ny0uNjk0IDEuODAyYy0uMzY4LjIwNS0yLjczNi40OS0yLjg2LjM3LS4zNzUtLjM3OCAxLjc1Ny0xLjkyNiAxLjk2LTEuOTY3em0tMy42NzcgNC40NjRjLjE0Ny0uMjk1IDMuMjI2LS42NTUgMy4yMjYtLjY1NXMtMS4xMDQgMi41NC0xLjI2NyAyLjYyYy0uMTYzLjA4My0yLjkgMS4xMDctMi45OC44Ni0uMDgyLS4yNDYuODk4LTIuNTggMS4wMi0yLjgyNXptLTIuNDUuNzM3Yy4yNDUuMDQuMDQtLjEyNC4yNDUuMDQuMjA0LjE2NC0uNDkgMi41OC0uNjUzIDIuNzAzLS4xNjMuMTIzLTEuMjI1LjI4Ny0xLjMwNy4xMjMtLjExLS4yMiAxLjQ3LTIuOTA4IDEuNzE1LTIuODY3em0tMS41MSA3LjQxYy0uMTY0LjA0Mi0xLjA2My4wODMtMS4yNjctLjA4LS4xNi0uMTMuMDgyLTIuMjk0LjI4Ni0yLjMzNS4yMDQtLjA0IDEuMjY2LS40MSAxLjQzLS4yNDYuMTYyLjE2My0uMjg3IDIuNjItLjQ1IDIuNjZ6bTIuNzM1IDguODQ2Yy0uMzI3IDAtLjEyMi4yMDUtLjQ5LS4wNC0uMzY4LS4yNDctMS41NTItMS4yMy0xLjU5My0xLjQzNC0uMDQtLjIwNS4xNjMtMS45MjUuMTYzLTIuMDkgMC0uNjQ2IDIuMzI4LS42MTMgMi40NS0uMzY4LjEyNC4yNDctLjIwMyAzLjkzMi0uNTMgMy45MzJ6bS41My01LjY1Yy0uMTYyIDAtMi4xMjMuNDA4LTIuMjg2LjM2OC0uMTYzLS4wNC4wNC0xLjk2Ni4xMjMtMi4yMS4wNjYtLjIgMi41MzItLjQxIDIuNTMyLS4yODhzLS4yMDUgMi4xMy0uMzY4IDIuMTN6bS0xLjU5Mi0zLjY0NmMtLjEyMi0uMjg3LjMyNy0yLjY2Mi40NS0yLjkwOC4xNDItLjI4NiAzLjIyNS0uOTgzIDMuMjI1LS44NnMtMS4wNiAzLjIzNS0xLjE4MyAzLjI3NmMtLjEyMi4wNDItMi4zNjguNzgtMi40OS40OTJ6bTYuNzQuOTgzcy4wOCAxLjYzOC0uMTY0IDEuNzZjLS4yNDUuMTI0LTMuMTQ1LjU3NC0zLjE4Ni4zMy0uMDQtLjI0Ny4yODYtMS45NjcuMjg2LTEuOTY3LjI4Ni0uMTY0IDMuMDYzLS4xMjMgMy4wNjMtLjEyM3ptLTMuNjM2IDMuOTNzMy4zMDgtLjIwNCAzLjMwOC0uMDhjMCAuMTIyLjA4MiAzLjg5LS4yMDQgMy44NDgtLjI4Ni0uMDQtMy4xODUgMC0zLjE4NSAwcy4wNC0zLjU2LjA4LTMuNzY2em0zLjQ3IDguNjQyYy0uNTMtLjA0LTMuMTAzLTEuMTg4LTMuMjI1LTEuNDc0LS4xMjMtLjI4Ni0uMTYzLTEuNzYtLjE2My0xLjc2LjM2OC0uMDQgMy4xODYtLjEyMyAzLjMwOC4wNC4xMjIuMTY1LjYxMiAzLjIzNi4wOCAzLjE5NXptLjQxLTE0LjU3OGMtLjQwOC4wNC0yLjk0LjQxLTIuOTQuMjQ2czEuMTg0LTMuNCAxLjMwNy0zLjY0NWMuMTczLS4zNDggMy4wMjItLjQxIDMuMDIyLS4yNDYtLjAwMi4xNjQtLjk4MiAzLjYwNC0xLjM5IDMuNjQ1ek0yMi41NjYgMzEuNGMtLjQ5LjA0Mi0yLjM3LS4xNjMtMi40MS0uMzI3LS4wNC0uMTY0LS4xMjItMy41MjItLjEyMi0zLjUyMi4xNjMtLjA4IDIuNjE0LjI0NyAyLjYxNC4yNDdzLjQwOCAzLjU2My0uMDgyIDMuNjA0em0tLjA4LTUuMzYzYy0uMTIzIDAtMi41NzQuMTY0LTIuNjU2LS4xNjQtLjA4Mi0uMzI4LS4xNjMtMy41NjMtLjEyMy0zLjgxLjA0NS0uMjcgMy4xNDUtLjA4IDMuMzUuMzMuMjA0LjQxLS40NSAzLjY0NC0uNTcyIDMuNjQ0em0tMi40NTItNS43NzRjLS4xMjMtLjI4Ny0uMjg2LTIuMDQ4LjE2My0yLjQ1Ny4zOTQtLjM2IDMuODgtLjI0NiAzLjk2LjA0LjA4My4yODgtLjU3IDIuODY4LS42OTMgMi44NjgtLjEyMiAwLTMuMzA3LS4xNjUtMy40My0uNDV6bTQuNTc0IDIuMjUyYy4yNDUtLjEyMyAyLjQ5LjQ5IDIuNjE0Ljg2LjEyMi4zNy0uNTcyIDMuOTMtLjU3MiAzLjkzcy0yLjMyOC0uODYtMi40OS0xLjAyM2MtLjMyLS4zMTguMjAzLTMuNjQ0LjQ0OC0zLjc2N3ptLS4zMjYgNS41N2MuMjEtLjEyNyAyLjQ1Ljk0IDIuNDkgMS4xNDYuMDQyLjIwNiAwIDEuODAzLS4xMjIgMS44ODUtLjEyMi4wODItMi4yNDYuNDktMi40MS4xMjMtLjE2My0uMzctLjE2My0zLjAzLjA0Mi0zLjE1NHpNNDguNSA0OC43MjRjLS4yODYuMzI3LTMuODggMi4wNDctNi4zNyAxLjM5LTIuNDkyLS42NTQtOC42Ni03LjEyNC0xMi4zNzYtMTAuMzYtMy43MTYtMy4yMzUtNS42MzYtNS4zNjUtNS41MTMtNS43MzMgMCAwIDYuMjktLjk4MyA5LjM1My0yLjk0OCAzLjA2My0xLjk2NiA2LjE2Ny03LjA4NSA2LjQ5NC02Ljk2Mi4zMjcuMTIzIDUuMTg3IDkuMjU1IDUuMDY0IDkuNDItLjEyMi4xNjMtMS42MzMuMDQtMS42MzMuMTYzcy0uMjA0IDEuMzUuMjA0IDEuNDMzYy40MS4wODIgMi4wNDMtLjA0IDIuMzcuMjg3LjMyNy4zMjggMS40MyAyLjQxNiAxLjI2NiAyLjQxNi0uMTYzIDAtMi40OS0uMzI3LTIuNDktLjMyN3MtLjI4NyAxLjIzLS4wODMgMS4zMWMuMjA0LjA4MiAzLjU1My44NiAzLjg0IDEuMTA2LjI4NS4yNDUgMS42NzMgMy42NDQgMS40MjggMy42NDQtLjI0NCAwLTQuNTczLTEuNTU2LTQuNTczLTEuNTU2cy0uNDA4IDEuMzUgMCAxLjUxNWMuNDA4LjE2NCA1LjE4NyAyLjAwNyA1LjM1IDIuMjEuMTYzLjIwNi0uMDgyIDEuODAzLS4zNjggMS45MjYtLjI4Ny4xMjItNC45ODQtMS43NjItNS4xMDYtMS43Mi0uMTIzLjA0LS40OS42OTUtLjMyNyAxLjA2NC4xNjUuMzY4IDMuNzYgMS4zOTIgMy40NzMgMS43MnptLTE3LjYwMi0xMy4zNWMtLjQ5LjA0LS45NC40OS0uOTQuNjk1czQuNTc1IDUuNDg4IDUuMzUgNS45OGMuNzc3LjQ5IDEuMjY3LS40OTIgMS40My0uODYuMTYzLS4zNy01LjYyLTUuODM1LTUuODQtNS44MTZ6Ii8+PC9zdmc+")
}

.nav__item a[data-id=Work]:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.04 85.04'%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cpath d='M17.49 73.63a6.48 6.48 0 01-6.32-7.78l2.7-13.24a13 13 0 013.54-6.56l34-34a9.2 9.2 0 0113 0l8 8a9.2 9.2 0 010 13l-34 34a13.21 13.21 0 01-6.53 3.57l-13 2.83a7.21 7.21 0 01-1.39.15z' fill='%23c1c1c1'/%3E%3Cpath d='M57.93 11.63a6.89 6.89 0 014.87 2l8 8a6.9 6.9 0 010 9.74l-34 34a10.86 10.86 0 01-5.39 2.94l-13 2.83a4.78 4.78 0 01-.91.1 4.18 4.18 0 01-4.07-5L16.14 53a10.75 10.75 0 012.9-5.4l34-34a6.83 6.83 0 014.87-2m0-4.6a11.39 11.39 0 00-8.12 3.37l-34 34a15.27 15.27 0 00-4.16 7.73L8.92 65.39a8.78 8.78 0 008.57 10.54 8.53 8.53 0 001.88-.21l13-2.82a15.37 15.37 0 007.67-4.19l34-34a11.49 11.49 0 000-16.25l-8-8A11.43 11.43 0 0057.93 7z' fill='%23404040'/%3E%3Crect x='27.93' y='41.29' width='40.13' height='11.1' transform='rotate(-45 48.00071 46.837455)' fill='%23efefef'/%3E%3Cline x1='36.89' y1='66.2' x2='17.93' y2='47.24' fill='%23c1c1c1' stroke='%23404040' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cline x1='67.23' y1='35.86' x2='48.26' y2='16.9' fill='%23c1c1c1' stroke='%23404040' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cpath d='M18.4 71.23L24.28 70l-9.63-9.63-1.23 6a4.18 4.18 0 004.98 4.86z' fill='%23404040'/%3E%3Cline x1='28.59' y1='55.9' x2='57.33' y2='27.16' fill='%23c1c1c1' stroke='%23404040' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cline x1='34.53' y1='38.8' x2='46.4' y2='27.05' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cpath d='M57 16.74a2.2 2.2 0 012.55-.11' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4.6'/%3E%3C/g%3E%3C/svg%3E")
}

.nav__item a[data-id=Contact]:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.04 85.04'%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Cpath d='M43.89 80.25a2.28 2.28 0 01-1.15-.31 2.32 2.32 0 01-1.15-2.06l.47-14.74a2.32 2.32 0 01.6-1.47l17-18.73a2.29 2.29 0 011.71-.76 2.37 2.37 0 01.9.18 2.31 2.31 0 011.39 2.28L62 68.29a2.29 2.29 0 01-1.08 1.79L45.11 79.9a2.33 2.33 0 01-1.22.35z' fill='%23efefef'/%3E%3Cpath d='M61.33 44.48l-1.67 23.65L43.89 78l.47-14.73 17-18.74m0-4.6a4.63 4.63 0 00-3.42 1.51L41 60.13a4.58 4.58 0 00-1.18 2.94L39.3 77.8a4.59 4.59 0 004.59 4.75 4.51 4.51 0 002.43-.7L62.1 72a4.59 4.59 0 002.15-3.58l1.67-23.62a4.6 4.6 0 00-4.58-4.92z' fill='%23404040'/%3E%3Cpath d='M8.86 45.22a2.29 2.29 0 01-1.95-3.52l9.82-15.77a2.28 2.28 0 011.79-1.08l23.65-1.67h.16a2.3 2.3 0 011.54 4l-18.74 17a2.22 2.22 0 01-1.47.59z' fill='%23c1c1c1'/%3E%3Cpath d='M42.33 25.47l-18.74 17-14.73.48 9.82-15.77 23.65-1.68m0-4.6H42l-23.64 1.66a4.59 4.59 0 00-3.58 2.15L5 40.49a4.6 4.6 0 003.91 7H9L23.74 47a4.54 4.54 0 002.94-1.19l18.74-17a4.6 4.6 0 00-3.09-8z' fill='%23404040'/%3E%3Cpath d='M41.7 63.68a2.3 2.3 0 01-1.63-.68L23.68 46.62A2.31 2.31 0 0123 45a2.29 2.29 0 01.67-1.62l29-29c4-4 11.3-6.82 17.72-6.82a17.55 17.55 0 016.15 1 2.24 2.24 0 01.9.51 2.33 2.33 0 01.68 1.1c2.88 7.76-.7 18.74-5.78 23.83l-29 29a2.3 2.3 0 01-1.64.68z' fill='%23c1c1c1'/%3E%3Cpath d='M70.43 9.83a15.27 15.27 0 015.48.93c2.62 6.81-.69 17.06-5.21 21.58l-29 29L25.31 45l29-29c3.41-3.41 10.09-6.14 16.09-6.14m0-4.6c-7 0-14.94 3.08-19.35 7.49l-29 29a4.6 4.6 0 000 6.51l16.39 16.37a4.6 4.6 0 006.51 0l29-29c5.69-5.69 9.55-17.53 6.34-26.25a4.39 4.39 0 00-.8-1.49 4.65 4.65 0 00-2.27-1.53 20 20 0 00-6.81-1.11z' fill='%23404040'/%3E%3Cpath d='M75.94 10.79c2.61 6.8-.7 17-5.22 21.56l-29 29-8.2-8.15z' fill='%23efefef'/%3E%3Cpath d='M60.26 21.25a3.66 3.66 0 105.18 0 3.65 3.65 0 00-5.18 0z' fill='none' stroke='%23404040' stroke-linejoin='round' stroke-width='4.6'/%3E%3Cline x1='36.99' y1='41.7' x2='47.49' y2='31.7' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4.6'/%3E%3C/g%3E%3C/svg%3E%0A")
}

.nav__item-hover {
  margin: 0;
  line-height: 1;
  text-decoration: none
}

.nav__item-hover-inner {
  display: block;
  position: relative;
  font-weight: 400;
  line-height: 1.25
}

.nav__item-hover-inner[data-hover] {
  color: hsl(0, 0%, 21%);
}

.nav__item-hover-inner::before {
  content: attr(data-hover);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: rgb(197, 90, 122);
  transition: all cubic-bezier(1, 0, 0, 1) .3s
}

.nav__item-hover-inner::after {
  content: attr(data-hover);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: hsl(0, 0%, 21%);
  transition: all cubic-bezier(1, 0, 0, 1) .3s .2s
}
@media screen and (min-width: 48rem){
  .md\:space-before {
    justify-content: flex-end;
}
}

@media(hover: hover) {
  .nav__item:hover .nav__item-hover-inner::after, .nav__item:hover .nav__item-hover-inner::before {
    width: 100%
  }
}

@media screen and (min-width: 800px) {
  .nav {
    font-size: 30px;
    background-color: transparent;
    position: relative;
    border-top: none;
    display: block;
    margin-right: 8%;
  }
  .nav a {
    margin-top: 0
  }
  .nav a[data-id]:before {
    display: none
  }
}
/* ----------------------------------------------------------------------------------------------------------------------------- */
.tex p{
  color: hsl(0, 0%, 21%);
}

/* a{
  text-decoration: none;
  font-size: .9rem;
  text-transform: uppercase;
  position: relative;
  top: 50%;
  bottom: 50%;
  transform: translateY(-50%);
} */

.main-info-section{
  height: calc(100vh - 81.6px);
}

.tex{
  margin-top: 15%;
 
}
.tex h2{
  color:hsl(0, 9%, 7%);
  font-family: mosk-ultra;
  font-size: 2rem;
}

.tex h1{
  
  color:hsl(0, 9%, 7%);
  font-size:3rem ;
  cursor: context-menu;
  font-family: mosk-ultra;
}

.tex span{
  display:inline-block;
  /* position: relative; */
}


span:hover{
  color: #48cfad;
  transition: all .5s;
}

span.name{
  color: aliceblue;
  /* font-family: 'Fredoka One', cursive; */
  font-family: mosk-ultra;
}


span.m-left{
  margin-left:-10px;
}


.tex p{
  letter-spacing: 3px;
  word-spacing: 10px;
  font-size: .8rem;
}

#resume span {
  background: #FFF;
  display: block;
  padding: 15px 15px;
  border-radius: 5px;
  border: 2px solid #000;
}
#resume:hover {
  box-shadow: 0 2px 0 #000, 0 2px 0px 2px rgb(197, 90, 122)
}
#resume:active {
  top: 4px;
  padding-bottom: 0px;
  box-shadow: 0 1px 0 #000;
}
#resume {
  position: relative;
  float: left;
  font: normal 15px mosk, sans-serif;
  margin-right: 10px;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  padding-bottom: 3px;
  border-radius: 5px;
  box-shadow: 0 2px 0 #000;
  transition: padding 0.1s, box-shadow 0.1s, top 0.1s;
  background-image: url('data:image/gif;base64,R0lGODlhBAAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NUY1OENCRDdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NUY1OENCRTdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk1RjU4Q0JCN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk1RjU4Q0JDN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAAQABAAAAgYEEpdoeQUAOw==');
}



/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------Main content---------------------- */
.row{
  display: flex;
  /* align-items: start; */
  flex-wrap: wrap;
  justify-content: space-around;
}
.col-2{
    flex-basis: 50%;
    min-width: 300px;
}
.col-2 .holder{
    max-width: 100%;
    /* padding: 5px 300px; */
    margin-top:30%;
    margin-left:30%;
}


.datetime{
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font-family: "Segoe UI", sans-serif;
  width: 340px;
  padding: 15px 10px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  box-shadow: 30px 30px 40px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  backdrop-filter: blur(20px);
  -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255, 255, 255, 0.1));
  transition: 0.5s;
  transition-property: background, box-shadow;
}

.datetime:hover{
  background-color: rgb(197, 90, 122);
  box-shadow: 0 0 30px rgb(197, 90, 122);
}

.date{
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 3px;
}

.time{
  font-size: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.time span:not(:last-child){
  /* position: relative; */
  margin: 0 6px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 3px;
}

.time span:last-child{
  background:#7e7e76;
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
  margin-top: 10px;
  padding: 0 5px;
  border-radius: 3px;
}

.sub{
  font-family:mosk;
  text-transform: capitalize;
  z-index: 2;
  color: #7e7e76;
}
/* -------------------Works----------------- */

#particles-js {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f1f5f8;
  margin-bottom: -3%;
  margin-top: -20%;
  background-image: cover;
}

.pad-around-xlg {
  padding-bottom: calc(7.5rem + (10 - 7.5) * ((100vw - 20rem)/ (100 - 20)));
}

.works_inner {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.underline__text {
  line-height: 1;
  display: inline;
  background-image: linear-gradient(transparent 50%, pink 50%, pink 85%, transparent 85%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 0 100%;
  font-size: 2rem;
  font-family: mosk-ultra;
}

.underline:hover .underline__text {
  transition: .5s cubic-bezier(.645, .045, .355, 1);
  background-size: 100% 100%;
}

.wrapper {
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(1rem + (8 - 1) * ((100vw - 20rem)/ (100 - 20)));
  padding-right: calc(1rem + (8 - 1) * ((100vw - 20rem)/ (100 - 20)));
}

h2 {
  color: black;
  letter-spacing: .6px;
  align-self: flex-start;
}

article {
  touch-action: none;
  cursor: grab !important;
  user-select: none;
  z-index: 1000;
  transform: translate3d(-51px, 17px, 0px);
}

.Browser {
  color: #000;
  position: relative;
  border-radius: 20px;
  border: solid 2px black;
  padding: 4.5rem 1rem 1rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-left: 30%;
  background: rgba(255, 255, 255, 0.1);
     -o-backdrop-filter: blur(6px);
  -ms-backdrop-filter: blur(6px);
  -moz-backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(10px);

}

.Browser:before {
  position: absolute;
  content: "";
  width: 4rem;
  left: 1rem;
  height: 1.5rem;
  top: .8rem;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 21'%3E%3Cg id='Layer_1' data-name='Layer 1'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23404040'/%3E%3Ccircle cx='40' cy='10' r='10' fill='%23404040'/%3E%3Ccircle cx='70' cy='10' r='10' fill='%23404040'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.Browser:after {
  position: absolute;
  content: "";
  width: 100%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: black;
  top: 2rem;
}

.Browser__heading {
  color: green;
  text-decoration: none;
  padding-bottom: .5rem;
  font-size: 20px;
  font-weight: bold;
}

.Browser__heading:after {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

.Browser p {
  margin-bottom: 1rem;
  margin-top: 1rem;
  text-align: left;
  /* font-size: 29px; */
  font-weight: 200;
}

footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer a {
  color: black;
  z-index: 1;
  text-decoration: none;
  font-family: mosk,sans-serif;
  font-weight: 600;
  border-bottom: 1.5px solid transparent;
  transition: border-color .1s ease-out;
}
a {
  color: black;
  text-decoration: none;
  padding-bottom: .5rem;
}

:after, :before {
  box-sizing: inherit;
}

.works_heading {
  color: black;
  letter-spacing: .6px;
  align-self: flex-start;
  font-family: Inter, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
  font-size: 50px;
  font-weight: 800;
  z-index: 1;
}

.button {
  padding: 0;
  border: none;
  transform: rotate(4deg);
  transform-origin: center;
  font-size: 17px;
  font-family: 'Gochi Hand', cursive;
  text-decoration: none;
  padding-bottom: 3px;
  border-radius: 5px;
  box-shadow: 0 2px 0 hsl(198, 1%, 29%);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-image: url('data:image/gif;base64,R0lGODlhBAAEAIABAAAAAAAAACH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5NUY1OENCRDdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5NUY1OENCRTdDMDYxMUUyOTEzMEE1MEM5QzM0NDVBMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk1RjU4Q0JCN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk1RjU4Q0JDN0MwNjExRTI5MTMwQTUwQzlDMzQ0NUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAQAAAQAsAAAAAAQABAAAAgYEEpdoeQUAOw==');
  background-color: hsla(166, 100%, 50%, 0.7);
  /* position: absolute; */
}
.button span {
  background: #f1f5f8;
  display: block;
  padding: 1rem 2rem;
  border-radius: 5px;
  border: 2px solid hsl(198, 1%, 29%);
}
.button:active, .button:focus {
  transform: translateY(4px);
  padding-bottom: 0px;
  outline: 0;
}

@media screen and (min-width: 800px) {
  .works_inner {
    display: grid;
    grid-template-columns: 1fr 2rem .33fr .33fr .33fr .33fr;
    grid-template-rows: auto 1fr 2rem .5fr 1fr
  }
  .works_inner .Browser {
    margin-top: 0
  }
  .works_inner .Browser:nth-of-type(1) {
    grid-column: 1/span 1;
    grid-row: 2/span 3;
  }
  .works_inner .Browser:nth-of-type(2) {
    grid-column: 3/span 3;
    grid-row: 4/span 2;
  }
  .works_inner .Browser:nth-of-type(3) {
    grid-column: 4/span 3;
    grid-row: 1/span 2;
  }
  .works_inner .Browser:nth-of-type(4) {
    grid-column: 2/span 3;
    grid-row: 2/span 2;
    margin-top: 50%
  }
  .works_inner .button {
    grid-column: 1/span 1;
    grid-row: 5/span 1;
    justify-self: center;
    align-self: center
  }
  .works_heading {
    margin-bottom: 1.5rem;
    grid-column: 1/span 1;
    grid-row: 1/span 1
  }
  .h1 {
    font-size: 100px;
    line-height: 1.2;
  }
}

.works .works_heading:only-child {
  display: block;
  padding-bottom: 1.5rem;
  background-image: none
}

.works_footer h2 a {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap
}

/* ------------End of works---------------------- */

/* ------------------contact--------------------- */

/* ------------------contact--------------------- */

.rectangle {
  display: inline-block;
  width: 220px;
  height: 220px;
  border-radius: 4px;
  background: linear-gradient(to right, #70e1f5, #ffd194);
  transform: rotate(-19deg);
  position: relative;
  left: 400px;
  /* margin-bottom: -480px; */
  top: 500px;
}

.circular {
  display: inline-block;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: linear-gradient(to right, #f09819, #edde5d);
  /* transform: rotate(-9deg); */
  position: relative;
  right: 240px;
  /* margin-left: -100px; */
  top: 55px;
}

.triangle {
  display: inline-block;
  width: 0;
  border-bottom: 200px solid #b088f9;
  border-left: 130px solid transparent;
  border-right: 130px solid transparent;
  transform: rotate(-40deg);
  position: relative;
  left: 600px;
  top: 5px;
}

.random {
  display: inline-block;
  width: 220px;
  height: 220px;
  border-radius: 1000% 50px 90px 40px;
  transform: rotate(-80deg);
  position: relative;
  right: 10px;
  /* margin-bottom: -500px; */
  top: 550px;
  background: linear-gradient(to right, #77a1d3, #70cbca, #e684ae);
}

.Contact {
  height: 100%;
  position: absolute;
  /* background-color: hsl(169, 67%, 62%); */
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  align-items: center
}

.Contact__inner {
  /* background-color: wheat; */
  
  display: grid;
  position: absolute;
  left: 70%;
  top: 160%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 30px 30px 40px rgba(0, 0, 0, 0.2);
  border-radius: 80px;
  backdrop-filter: blur(10px);
  /* grid-template-rows: repeat(3,auto);
  background: linear-gradient(0deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 2.4rem,#fff 2.4rem,#ffff 100%); */
  min-height: 50vh;
}

.Contact__inner .link {
  color: black;
  z-index: 1;
  text-decoration: none;
  font-family: mosk, sans-serif;
  font-weight: 600;
  border-bottom: 2px solid purple;
  line-height: 2;
}

.Contact__heading {
  margin-bottom: -50px;
  grid-row: 3/span 1;
  font-family: Inter, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
  font-size: 4vw;
  font-weight: 800;
}

.main-social-ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  z-index: 2;
  list-style-type: none;
  height: 4em;
  margin: 0;
  padding: 0;

  
}
/* .main-social-icon {
  color: white;
  background: black;
  height: 100%;
  width: 100%;
  font-size: 16px;
  margin: 0 3px;
  padding: 14px;
  border-radius: 50%;
  transition: all 150ms ease-in-out;
  
  background: #3e4040;
  color: #fff;

 
}
.main-social-icon :hover {
  background: #fff;
  color: #3e4040;
} */


.h5 {
  font-size: 25px;
}

.Contact__content {
  font-size: 19px;
  font-weight: 50;
}

@media screen and (min-width: 800px) {
  .Contact__inner {
    /* width: 50%; */
    grid-template-columns: auto 55%;
    grid-template-rows: repeat(2, auto)
  }
  .Contact__heading {
    align-self: end;
    grid-row: 2/span 1;
    grid-column: 1/span 2
  }
  .Contact__content {
    grid-row: 1/span 1;
    grid-column: 1/span 1
  }
  .Contact__svg {
    margin-bottom: 2rem;
    align-self: center;
    width: 100%;
    max-width: 800px;
    grid-row: 1/span 2;
    grid-column: 2/span 1
  }
}

.pad-before {
  padding-top: calc(2rem + (4 - 2) * ((100vw - 20rem)/ (100 - 20)))
}

.pad-around-lg {
  padding-top: calc(4rem + (6 - 4) * ((100vw - 20rem)/ (100 - 20)));
  padding-bottom: calc(4rem + (6 - 4) * ((100vw - 20rem)/ (100 - 20)))
}

@media screen and (min-width: 100em) {
  .pad-before {
    padding-top: 4rem
  }
}


label {
  position: absolute;
  width: 55px;
  height: 26px;
  right: 80px;
  top: 38px;
  border: 2px solid;
  border-radius: 20px;
  background: radial-gradient(circle, #d5d5d5 0, #525065 100%);
  z-index: 10;
}

#dark-mode-toggle.active {
  background: radial-gradient(circle, rgb(233, 102, 204) 0, #0abbe7 100%);
}

label:before {
  position: absolute;
  content: '';
  width: 20px;
  height: 20px;
  left: 1px;
  top: 1px;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("moon.svg");
  border: solid .1rem gray;
  cursor: pointer;
  transition: 0.4s;
}

label.active:before {
  left: 24px;
  background-color: #fff0a4;
  background: linear-gradient(130deg, #ffc851 0, #fff0a4 45%, #ffc851 45%, #fcb045 100%) !important;
  border: solid .1rem #ff9b04;
}

body.night {
  background: #000;
  /* color: #fff; */
  filter: invert(1) hue-rotate(900deg);
}

/* about page */

.about-topic {
  display: none;
}
.about-text {
  font-family: mosk;
}

.contain {
  max-width: 1300px;
  margin: auto;
  padding-left: 25px;
  padding-right: 25px;
}



.fu {
  /* background-color: hsl(186, 52%, 78%); */
  height: 100vh;
  margin-top: 30%;
  display: flex;
  flex-wrap: wrap;
  z-index: 800;
  overflow: hidden;
  /* margin-bottom: 500px; */
}

.wrap3 {
  flex: 1 40%;
  box-sizing: border-box;
  border: 1px solid hsl(186, 52%, 78%);
}

.wrap3 img {
  transform: rotate(-90deg);
  margin-left: 0px;
  margin-top: 500px;
}

.wrap4 {
  /* background-color: #d88c9a; */
  padding: 80px 60px;
  flex: 1 60%;
  box-sizing: border-box;
  font-family: 'Signika', sans-serif;
  font-size: 2.5rem;
  text-align: center;
  border-bottom: 2px dashed purple;
}

hr {
  width: 10%;
  margin-top: -50px;
  border: 3px solid purple;
}

.sub-heading {
  font-family: Inter, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
  font-size: 2vw;
}

.brain {
  margin-bottom: -80px;
  margin-left: -200px;
}

.otherskills {
  margin-bottom: -40px;
  margin-top: -40px;
}

.skills, .technicalskills {
  font-size: 20px;
  text-transform: capitalize;
  font-family: mosk;
}

.skills li::before {
  content: "👉🏽 ";
}

.technicalskills li::before {
  content: "👩🏾‍💻 ";
}

.sf-flow {
  --flow-space: 1em;
}

.sf-flow>*+* {
  margin-top: 1em;
  margin-top: var(--flow-space)
}

.outline {
  color:hsla(0, 0%, 25%, 0.3);;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: black;
  font-size: 35px;
}

.intro {
  transform: rotate(-20deg);
  transform-origin: bottom left;
  margin-top: 400px;
  margin-right: 75%;
  margin-bottom: -13%;
  display: none;
}

.intro span {
  /* font-family: 'Gochi Hand', cursive; */
  opacity: .6;
}

.js-hover-write {
  position: relative;
  z-index: 2;
}

.js-hover-write span {
  position: absolute;
  font-size: 2rem;
  top: 50%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.outline:hover {
  -webkit-text-fill-color: black;
}
.dog_1 {
  height: 12%;
  position: absolute;
  bottom: 0;
  margin-bottom: -15%;
  -webkit-animation: drive 1s;
  animation: drive 10s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  z-index: 3;
}

@-webkit-keyframes drive {
  from {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }
  to {
    -webkit-transform: translateX(1000px);
    transform: translateX(900px);
  }
}

@keyframes drive {
  from {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
  }
  to {
    -webkit-transform: translateX(1000px);
    transform: translateX(900px);
  }
}
/* Media queries */

@media screen and (max-width: 1223px) {
 
  .nav__item {
    padding-left: 15px;
  }
  .nav {
    font-size: 15px;
  }
 /* .horizontal{
  width: 0rem;
  border-radius: 5px;
  margin-left: -200px;
  margin-top: 350px;
  height: 450px;
 } */
 .holder{
  display:none;
}
}

@media screen and (max-width: 1941px) {
  .main-nav {
    position: absolute;
    margin-top: 700px;
    margin-left: 400px;
  }
  .main-header {
    z-index: 2;
  
  }
  .dog_1 {
    margin-top: 100%;
  }
  /* .horizontal{
    width: 0rem;
    border-radius: 5px;
    margin-left: -200px;
    margin-top: 350px;
    height: 450px;
   } */
}

@media screen and (max-width: 830px) {
  .tex {
    /* margin-left: %; */
    margin-top: 38%;
}
  .tex h1 {
    font-size: 1.9rem;
}
  
  .tex h2 {
    font-size: 1rem;
}
 
.sub {
 font-size: 1rem !important;
}
  .fu {
    margin-top: 20%;
  }
  .main-title {
    display: none;
  }
  .holder{
    display:none;
  }
  /* .horizontal {
    width: 0rem;
    border-radius: 5px;
    margin-left: -680px;
    margin-top: 300px;
    height: 400px;
  
  } */
  .box {
  /* margin-top: -200% !important; */

    margin-left: 60px;
    width: 550px;
}
  .main-header {
    font: 100 40px;
    margin-top: -10px;
    margin-left: -150px;
    z-index: 2;
  }
  h6{
    margin-left: -5px;
   
  }
  .button-resume{
    margin-left: -50px;
  }
  .main-nav {
    position: absolute;
    margin-top: 700px;
    margin-left: 10px;
  }
  label {
    right: 5%;
    margin-top: -2%;
  }
  .wrap3 {
    display: none;
  }
  .wrap4 {
    font-size: 26px;
    overflow: hidden;
    text-align: left;
    background-color: #d88c9a;
    border-bottom: none;
  }
  .otherskills {
    width: 150px !important;
    margin-left: -8px;
    margin-bottom: -70px
  }
  .sub-heading {
    font-size: 26px;
  }
  .about, hr {
    display: none;
  }
  .about-topic {
    display: block;
    font-family: Inter, Source Sans Pro, Helvetica Neue, Arial, sans-serif;
    font-size: 18vw;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: left;
    z-index: 10;
    position: relative;
    line-height: 0.6em;
    pointer-events: none;
    flex: 1 100%;
    margin-bottom: -5%;
  }
  .intro {
    transform: rotate(-12deg);
    transform-origin: left bottom;
    margin: 10px 0px -35px -15px;
    display: block;
    font-size: 20px;
    font-family: jenthill !important;
  }
  .outline {
    font-size: 19px;
  }
  .skills {
    margin-bottom: 50%;
  }
  .button {
    margin-top: 25%;
  }
  .button span {
    padding: 0.5rem 1rem;
  }
  
  .rectangle {
    display: inline-block;
    width: 100px;
    height: 100px;
    left: 0px;
    margin-left: -110px;
    top: 400px;
  }
  
  .circular {
    width: 100px;
    height: 100px;
    right: 110px;
    top: 65px;
  }
  
  .triangle {
    border-bottom: 80px solid #b088f9;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    left: 10px;
    top: 70px;
  }
  
  .random {
    width: 80px;
    height: 80px;
    top: 400px;
    right: 40px;
    transform: rotate(990deg);
  
  }
  
  .Contact {
    height: 100%;
    position: absolute;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    align-items: center;
  
   }
  
  .Contact__inner {
    left: 160px;
    top: 300px;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 280px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 30px 30px 40px rgba(0, 0, 0, 0.1);
    border-radius: 40px;
    padding: 10px;
    -o-backdrop-filter: blur(6px);
      -ms-backdrop-filter: blur(6px);
      -moz-backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(10px);
    min-height: 50vh;
  }
  .h5 {
    font-size: 20px;
  }
  
  .Contact__content {
    /* text-align: center; */
    
    font-size: 20px;
   z-index: 10000 ;
    place-items: center;
  }

}

@media screen and (max-width: 812px) {
  .box {
    /* margin-top: -200% !important; */
      margin-left: 60px;
      width: 550px;
  }
  
  .dog_1 {
    margin-bottom: -2%;
  }
}
@media screen and (max-width: 736px) {

 
  .main-info-section{
    height: 0;
  }
  
  .main-nav {
    position: absolute;
    margin-top: 550px;
    margin-left: 10px;
  }
  .pad-around-xlg {
    padding-top: 0;
  }
   
  .Contact__inner {
    left: 180px;
    top: 310px;
  }
   

  .rectangle {
    display: inline-block;
    width: 100px;
    height: 100px;
    left: 10px;
    margin-left: -110px;
    top: 450px;
  }
  
  .circular {
    width: 100px;
    height: 100px;
    right: 80px;
    top: 65px;
  }
  
  .triangle {
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    left: 0px;
    top: 70px;
  }
  
  .random {
    width: 80px;
    height: 80px;
    top: 420px;
    right: 10px;
    transform: rotate(990deg);
  
  }

}
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2){
    .tex h1{
      font-size:2rem;
      cursor: context-menu;
    }
   }