style.css

/* ctrl+# google fonts v*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap");

:root {
   --clr-body-bg: rgb(37, 33, 31);
   --clr-card-bg: rgb(56, 55, 55);
   --clr-text: #ffffff;
   --clr-grey: #7e7e7e;
   --clr-heading: hsl(209 50% 25%);
}

.white {
   --clr-body-bg: rgb(255, 255, 255);
   --clr-card-bg: hsl(0, 100%, 83%);
   --clr-text: hsl(0, 0%, 0%);
   --clr-heading: hsl(0, 0%, 23%);
}

*,
::after,
::before {
   margin: 0;
   padding: 0;
   line-height: 1.2;
   box-sizing: border-box;
}

body {
   font-family: "Poppins", sans-serif;
   background-color: var(--clr-body-bg);
}

html {
   scroll-behavior: smooth;
}

p,
h2 {
   color: var(--clr-text);
   margin-top: 5px;
   line-height: 1.4;
}

a,
.btn {
   transition: all 300ms ease;
}

nav {
   justify-content: space-around;
   align-items: center;
   height: 17vh;
}

.nav-links {
   display: flex !important;
   gap: 2rem;
   list-style: none;
   font-size: 1.5rem;
}

a {
   color: var(--clr-text);
   text-decoration: none;
   text-decoration-color: var(--clr-text);
}

a:hover {
   color: var(--clr-grey) !important;
   text-decoration: underline;
   text-underline-offset: 1rem;
   text-decoration-color: var(--clr-text);
}

.logo {
   font-size: 1.5rem;
}

.logo:hover {
   cursor: default;
}

.hamburger-menu {
   position: relative;
   display: inline-block;
}

.hamburger-icon {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 24px;
   width: 30px;
   cursor: pointer;
}

.hamburger-icon span {
   width: 100%;
   height: 2px;
   background-color: var(--clr-text);
   /* transition: all 0.3 ease; */
}

.menu-links {
   position: absolute;
   top: 100%;
   right: 0%;
   background-color: var(--clr-body-bg);
   width: fit-content;
   max-height: 0;
   overflow: hidden;
   /* transition: all 0.3 ease; */
}

.menu-links a {
   display: block;
   padding: 10px;
   text-align: center;
   font-size: 1.5rem;
   color: var(--clr-text);
   text-decoration: none;
   /* transition: all 0.3 ease-in-out; */
}

.menu-links {
   list-style: none;
}

.menu-links.open {
   max-height: 300px;
}

.hamburger-icon.open span:first-child {
   transform: rotate(45deg) translate(10px, 5px);
}

.hamburger-icon.open span:nth-child(2) {
   opacity: 0;
}

.hamburger-icon.open span:last-child {
   transform: rotate(-45deg) translate(10px, -5px);
}

.hamburger-icon span:first-child {
   transform: none;
   opacity: 1;
}

.icon {
   cursor: pointer;
   height: 2rem;
}

.icon.x:hover {
   filter: invert(50%);
}

#theme {
   padding: 10px;
   font-weight: 800;
   border-radius: 10px;
   box-shadow: 1px 1px 0 0;
   background-color: var(--clr-grey);
   border: 0;
}

#theme:active,
.btn-color-1:active,
.btn-color-2:active {
   background-color: var(--clr-card-bg);
   outline: white solid 2px;
}

#theme:hover,
.btn-color-1:hover,
.btn-color-2:hover {
   background-color: var(--clr-card-bg);
   color: var(--clr-text);
   opacity: 0.9;
}

#theme:focus,
.btn-color-1:focus,
.btn-color-2:focus {
   outline: red solid 2px;
   background-color: var(--clr-card-bg);
   opacity: 0.9;
}

/*btn*/
.btn-container {
   display: flex;
   justify-content: center;
   gap: 1rem;
}

.btn {
   font-weight: 600;
   transition: all 300ms ease;
   padding: 1rem;
   width: 8rem;
   border-radius: 2rem;
}

.btn-color-1,
.btn-color-2 {
   border: solid;
}

.btn-color-1:hover,
.btn-color-2:hover {
   cursor: pointer;
}

.btn-color-1,
.btn-color-2:hover {
   background: var(--clr-grey);
   color: var(--clr-text);
}

.btn-color-1:hover {
   background: var(--clr-card-bg);
   color: var(--clr-text);
   border-color: var(--clr-text);
   opacity: 0.6;
}

.btn-color2 {
   background: none;
   border: var(--clr-card-bg) 0.1rem solid;
}

.btn-container {
   gap: 1rem;
}

/*section*/
section {
   padding-top: 4vh;
   margin: 0px 10rem;
   box-sizing: border-box;
   min-height: fit-content;
}

.section-container {
   display: flex;
}

#profile {
   display: flex;
   justify-content: center;
   gap: 5rem;
   height: 80vh;
}

.section_pic-container {
   display: flex;
   height: 400px;
   width: 400px;
   margin: auto 0;
}

.section_text {
   display: grid;
   align-self: center;
   text-align: center;
}

.section_text>* {
   margin: 10px 0;
}

.section_text p {
   font-size: 1.15rem;
   font-weight: 600;
}

.section_text_p1 {
   font-size: 1.15rem;
   text-align: center;
}

.section_text_p2 {
   font-size: 1.15rem;
   margin-bottom: 1rem;
}

.title {
   font-size: 3rem;
   text-align: center;
}

#socials-container {
   display: flex;
   justify-content: center;
   margin-top: 1rem;
   gap: 1rem;
}

/*about*/
#about {
   position: relative;
}

.about-containers {
   gap: 2rem;
   margin: 2rem auto;
   justify-content: space-around;
   display: flex;
   flex: 1 1 50%;
}

.about-details-container {
   display: flex;
   margin: 2rem auto;
}

.about-pic {
   border-radius: 2rem;
}

.arrow {
   position: absolute;
   right: -5rem;
   /* bottom: 2.5rem; */
}

/*experience*/
.text-container {
   margin-top: 15px;
}

.details-container {
   align-items: center;
   justify-content: center;
   padding: 3rem;
   display: grid;
   align-items: center;
   flex: 1;
   background: var(--clr-body-bg);
   border-radius: 2rem;
   border: var(--clr-grey) 0.1rem solid;
   border-color: var(--clr-grey);
   text-align: center;
   box-shadow: 5px 5px var(--clr-grey);
   mask: linear-gradient(transparent, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
   -webkit-mask: linear-gradient(transparent, #ffffff 25%, #ffffff 75%, rgba(255, 255, 255, 0) 100%);

}

.section-container {
   gap: 4rem;
   height: 80%;
}

.section_pic-container {
   height: 400px;
   width: 400px;
   margin: auto 0;
}

#experience {
   position: relative;
}

.experience-sub-title {
   color: var(--clr-text);
   font-weight: 600;
   font-size: 1.75rem;
   margin-bottom: 2rem;
}

.experience-details-container {
   display: flex;
   justify-content: space-around;
   flex-direction: column;
}

.article-container {
   display: flex;
   width: fit-content;
   /* text-align: initial; */
   flex-wrap: wrap;
   flex-direction: row;
   gap: 2rem;
   justify-content: space-around;
}

article {
   display: flex;
   width: 10rem;
   justify-content: space-around;
   gap: 0.5rem;
}

article .icon {
   cursor: pointer;
}

/*projects*/
#projects,
#experience {
   position: relative;
   margin-top: 3rem;
}

.color-container {
   border-color: var(--clr-grey);
   background: var(--clr-body-bg);
}

.project-img {
   box-shadow: 2px 2px var(--clr-grey);
   border-radius: 1.5rem;
   max-width: 300px;
   height: 200px;
   vertical-align: middle;
   shape-margin: 0.8rem;
}

.project-img:hover {
   transform: translateX(2%);
   transform: translateY(1%);
}

.project-title {
   margin: 1rem;
   color: var(--clr-text);
}

.project-btn {
   color: var(--clr-text);
   background-color: var(--clr-heading);
   border-color: var(--clr-grey);
}

/*contact*/
#contact {
   display: flex;
   justify-content: center;
   flex-direction: column;
   height: 70vh;
}

.contact-info-upper-container {
   display: flex;
   justify-content: center;
   border-radius: 2rem;
   border: var(--clr-grey) 0.1rem solid;
   border-color: var(--clr-body-bg);
   background: var(--clr-card-bg);
   margin: 2rem;
   padding: 0.5rem;
}

.contact-info-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   margin: 0.3rem;
}

.contact-info-container p {
   font-size: larger;
}

.contact-icon {
   cursor: default;
}

.email-icon {
   height: 2.5rem;
}

footer p {
   text-align: center;
   font-size: 0.8em;
}

/*cookie*/
.wrapper {
   position: fixed;
   bottom: 50px;
   right: -400px;
   max-width: 345px;
   width: 100%;
   background: var(--clr-grey);
   border-radius: 8px;
   padding: 15px 25px 22px;
   transition: right 0.3s ease;
   z-index: 10;
   display: none;
}

.wrapper header {
   display: flex;
   align-items: center;
   column-gap: 15px;
}

header i {
   color: var(--clr-heading);
   font-size: 32px;
}

.wrapper .data p {
   margin-top: 16px;
}

.wrapper .data p {
   color: var(--clr-text);
   font-size: 16px;
}

.data p a {
   color: var(--clr-text);
   text-decoration: none;
}

.data p a:hover {
   text-decoration: underline;
}

.wrapper .buttons {
   margin-top: 16px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.wrapper .button {
   border: none;
   color: var(--clr-text);
   padding: 8px 0;
   border-radius: 4px;
   background: var(--clr-body-bg);
   cursor: pointer;
   width: calc(100% / 2 - 10px);
   transition: all 0.2s ease;
}

.wrapper .button .button:hover {
   background-color: var(--clr-body-bg);
}

.wrapper.show {
   right: 20px;
   display: grid;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
@keyframes rainbow {
   0% {
      background-position: 0% 50%;
   }

   50% {
      background-position: 100% 50%;
   }

   100% {
      background-position: 0% 50%;
   }
}

.rainbow-text:hover {
   background-image: linear-gradient(to right, white, red, orange, green, blue, indigo, violet);
   background-size: 300% auto;
   color: #000;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: rainbow 5s linear infinite;
   /* box-shadow: 0 0 0 1px; */
   /* font-size: 3rem; */
}

.button {
   position: relative;
   width: 120px;
   height: 40px;
   background-color: #000;
   display: flex;
   align-items: center;
   color: white;
   flex-direction: column;
   justify-content: center;
   border: none;
   padding: 12px;
   gap: 12px;
   border-radius: 8px;
   cursor: pointer;
}

.button::before {
   content: "";
   position: absolute;
   inset: 0;
   left: -4px;
   top: -1px;
   margin: auto;
   width: 128px;
   height: 48px;
   border-radius: 10px;
   background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);
   z-index: -10;
   pointer-events: none;
   transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button::after {
   content: "";
   z-index: -1;
   position: absolute;
   inset: 0;
   background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%);
   transform: translate3d(0, 0, 0) scale(0.95);
   filter: blur(20px);
}

.button:hover::after {
   filter: blur(30px);
}

.button:hover::before {
   transform: rotate(-180deg);
}

.button:active::before {
   scale: 0.7;
}

/*///////////////////////////////////////////////////////////////////////////////////////////*/
.container {
   position: relative;
   display: grid;
   place-items: center;
   opacity: 0.3;
   width: 40%;
   height: 70%;
   --color: #a7bdfa;
   background: linear-gradient(45deg, var(--color) 25%, transparent 25%) -50px 0, linear-gradient(-45deg, var(--color) 25%, transparent 25%) -50px 0,
      linear-gradient(45deg, transparent 75%, var(--color) 75%) -50px 0, linear-gradient(-45deg, transparent 75%, var(--color) 75%) -50px 0;
   background-color: #221b0f;
   background-size: 10px 40px;
}

.con {
   display: grid;
   place-items: center;
   width: 50%;
   height: 50%;
   --bg: linear-gradient(45deg, rgb(0, 0, 0) 25%, transparent 25%, transparent 75%, rgb(0, 0, 0) 75%, rgb(0, 0, 0)),
      linear-gradient(45deg, rgb(0, 0, 0) 25%, white 25%, white 75%, rgb(0, 0, 0) 75%, rgb(0, 0, 0));
   --bgsize: 60px 60px;
   --bgposition: 0 0, 30px 30px;
   background-color: white;
   background-image: var(--bg);
   background-size: var(--bgsize);
   background-position: var(--bgposition);
   position: relative;
   perspective: 1000px;
   transform-style: preserve-3d;
   overflow: hidden;
   box-shadow: inset 0px 0px 500px rgb(15, 15, 15);
}

.con::before {
   content: "";
   width: 100%;
   height: 150%;
   box-shadow: 0px -100px 500px black, inset 0px 100px 500px rgb(15, 15, 15);
   position: absolute;
   top: 55%;
   background-image: var(--bg);
   background-size: var(--bgsize);
   background-position: var(--bgposition);
   transform-origin: top;
   transform: rotateX(80deg);
}

/*///////////////////////////////////////////////////////////////////////////////////////////////*/
.brick {
   height: 2px;
   width: 2px;
   box-shadow: 2px 2px 0px #ff9999, 4px 2px 0px #ff9999, 6px 2px 0px #ff9999, 8px 2px 0px #ff9999, 10px 2px 0px #ff9999, 12px 2px 0px #ff9999, 14px 2px 0px #ff9999, 16px 2px 0px #ff9999,
      18px 2px 0px #ff9999, 20px 2px 0px #ff9999, 22px 2px 0px #ff9999, 24px 2px 0px #ff9999, 26px 2px 0px #ff9999, 28px 2px 0px #ff9999, 30px 2px 0px #ff9999, 32px 2px 0px #ff9999,
      2px 4px 0px #cc3300, 4px 4px 0px #cc3300, 6px 4px 0px #cc3300, 8px 4px 0px #cc3300, 10px 4px 0px #cc3300, 12px 4px 0px #cc3300, 14px 4px 0px #cc3300, 16px 4px 0px #000, 18px 4px 0px #cc3300,
      20px 4px 0px #cc3300, 22px 4px 0px #cc3300, 24px 4px 0px #cc3300, 26px 4px 0px #cc3300, 28px 4px 0px #cc3300, 30px 4px 0px #cc3300, 32px 4px 0px #000, 2px 6px 0px #cc3300, 4px 6px 0px #cc3300,
      6px 6px 0px #cc3300, 8px 6px 0px #cc3300, 10px 6px 0px #cc3300, 12px 6px 0px #cc3300, 14px 6px 0px #cc3300, 16px 6px 0px #000, 18px 6px 0px #cc3300, 20px 6px 0px #cc3300, 22px 6px 0px #cc3300,
      24px 6px 0px #cc3300, 26px 6px 0px #cc3300, 28px 6px 0px #cc3300, 30px 6px 0px #cc3300, 32px 6px 0px #000, 2px 8px 0px #000, 4px 8px 0px #000, 6px 8px 0px #000, 8px 8px 0px #000,
      10px 8px 0px #000, 12px 8px 0px #000, 14px 8px 0px #000, 16px 8px 0px #000, 18px 8px 0px #000, 20px 8px 0px #000, 22px 8px 0px #000, 24px 8px 0px #000, 26px 8px 0px #000, 28px 8px 0px #000,
      30px 8px 0px #000, 32px 8px 0px #000, 2px 10px 0px #cc3300, 4px 10px 0px #cc3300, 6px 10px 0px #cc3300, 8px 10px 0px #000, 10px 10px 0px #cc3300, 12px 10px 0px #cc3300, 14px 10px 0px #cc3300,
      16px 10px 0px #cc3300, 18px 10px 0px #cc3300, 20px 10px 0px #cc3300, 22px 10px 0px #cc3300, 24px 10px 0px #000, 26px 10px 0px #cc3300, 28px 10px 0px #cc3300, 30px 10px 0px #cc3300,
      32px 10px 0px #cc3300, 2px 12px 0px #cc3300, 4px 12px 0px #cc3300, 6px 12px 0px #cc3300, 8px 12px 0px #000, 10px 12px 0px #cc3300, 12px 12px 0px #cc3300, 14px 12px 0px #cc3300,
      16px 12px 0px #cc3300, 18px 12px 0px #cc3300, 20px 12px 0px #cc3300, 22px 12px 0px #cc3300, 24px 12px 0px #000, 26px 12px 0px #cc3300, 28px 12px 0px #cc3300, 30px 12px 0px #cc3300,
      32px 12px 0px #cc3300, 2px 14px 0px #cc3300, 4px 14px 0px #cc3300, 6px 14px 0px #cc3300, 8px 14px 0px #000, 10px 14px 0px #cc3300, 12px 14px 0px #cc3300, 14px 14px 0px #cc3300,
      16px 14px 0px #cc3300, 18px 14px 0px #cc3300, 20px 14px 0px #cc3300, 22px 14px 0px #cc3300, 24px 14px 0px #000, 26px 14px 0px #cc3300, 28px 14px 0px #cc3300, 30px 14px 0px #cc3300,
      32px 14px 0px #cc3300, 2px 16px 0px #000, 4px 16px 0px #000, 6px 16px 0px #000, 8px 16px 0px #000, 10px 16px 0px #000, 12px 16px 0px #000, 14px 16px 0px #000, 16px 16px 0px #000,
      18px 16px 0px #000, 20px 16px 0px #000, 22px 16px 0px #000, 24px 16px 0px #000, 26px 16px 0px #000, 28px 16px 0px #000, 30px 16px 0px #000, 32px 16px 0px #000, 2px 18px 0px #cc3300,
      4px 18px 0px #cc3300, 6px 18px 0px #cc3300, 8px 18px 0px #cc3300, 10px 18px 0px #cc3300, 12px 18px 0px #cc3300, 14px 18px 0px #cc3300, 16px 18px 0px #000, 18px 18px 0px #cc3300,
      20px 18px 0px #cc3300, 22px 18px 0px #cc3300, 24px 18px 0px #cc3300, 26px 18px 0px #cc3300, 28px 18px 0px #cc3300, 30px 18px 0px #cc3300, 32px 18px 0px #000, 2px 20px 0px #cc3300,
      4px 20px 0px #cc3300, 6px 20px 0px #cc3300, 8px 20px 0px #cc3300, 10px 20px 0px #cc3300, 12px 20px 0px #cc3300, 14px 20px 0px #cc3300, 16px 20px 0px #000, 18px 20px 0px #cc3300,
      20px 20px 0px #cc3300, 22px 20px 0px #cc3300, 24px 20px 0px #cc3300, 26px 20px 0px #cc3300, 28px 20px 0px #cc3300, 30px 20px 0px #cc3300, 32px 20px 0px #000, 2px 22px 0px #cc3300,
      4px 22px 0px #cc3300, 6px 22px 0px #cc3300, 8px 22px 0px #cc3300, 10px 22px 0px #cc3300, 12px 22px 0px #cc3300, 14px 22px 0px #cc3300, 16px 22px 0px #000, 18px 22px 0px #cc3300,
      20px 22px 0px #cc3300, 22px 22px 0px #cc3300, 24px 22px 0px #cc3300, 26px 22px 0px #cc3300, 28px 22px 0px #cc3300, 30px 22px 0px #cc3300, 32px 22px 0px #000, 2px 24px 0px #000, 4px 24px 0px #000,
      6px 24px 0px #000, 8px 24px 0px #000, 10px 24px 0px #000, 12px 24px 0px #000, 14px 24px 0px #000, 16px 24px 0px #000, 18px 24px 0px #000, 20px 24px 0px #000, 22px 24px 0px #000,
      24px 24px 0px #000, 26px 24px 0px #000, 28px 24px 0px #000, 30px 24px 0px #000, 32px 24px 0px #000, 2px 26px 0px #cc3300, 4px 26px 0px #cc3300, 6px 26px 0px #cc3300, 8px 26px 0px #000,
      10px 26px 0px #cc3300, 12px 26px 0px #cc3300, 14px 26px 0px #cc3300, 16px 26px 0px #cc3300, 18px 26px 0px #cc3300, 20px 26px 0px #cc3300, 22px 26px 0px #cc3300, 24px 26px 0px #000,
      26px 26px 0px #cc3300, 28px 26px 0px #cc3300, 30px 26px 0px #cc3300, 32px 26px 0px #cc3300, 2px 28px 0px #cc3300, 4px 28px 0px #cc3300, 6px 28px 0px #cc3300, 8px 28px 0px #000,
      10px 28px 0px #cc3300, 12px 28px 0px #cc3300, 14px 28px 0px #cc3300, 16px 28px 0px #cc3300, 18px 28px 0px #cc3300, 20px 28px 0px #cc3300, 22px 28px 0px #cc3300, 24px 28px 0px #000,
      26px 28px 0px #cc3300, 28px 28px 0px #cc3300, 30px 28px 0px #cc3300, 32px 28px 0px #cc3300, 2px 30px 0px #cc3300, 4px 30px 0px #cc3300, 6px 30px 0px #cc3300, 8px 30px 0px #000,
      10px 30px 0px #cc3300, 12px 30px 0px #cc3300, 14px 30px 0px #cc3300, 16px 30px 0px #cc3300, 18px 30px 0px #cc3300, 20px 30px 0px #cc3300, 22px 30px 0px #cc3300, 24px 30px 0px #000,
      26px 30px 0px #cc3300, 28px 30px 0px #cc3300, 30px 30px 0px #cc3300, 32px 30px 0px #cc3300, 2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000, 8px 32px 0px #000, 10px 32px 0px #000,
      12px 32px 0px #000, 14px 32px 0px #000, 16px 32px 0px #000, 18px 32px 0px #000, 20px 32px 0px #000, 22px 32px 0px #000, 24px 32px 0px #000, 26px 32px 0px #000, 28px 32px 0px #000,
      30px 32px 0px #000, 32px 32px 0px #000;
}

.brick.one {
   transform: translateX(-60px);
}

.brick.two {
   transform: translateY(-110px);
}

.mush {
   height: 2px;
   width: 2px;
   box-shadow: 14px 2px 0px #fc9838, 16px 2px 0px #fc9838, 18px 2px 0px #fc9838, 20px 2px 0px #fc9838, 12px 4px 0px #fc9838, 14px 4px 0px #fc9838, 16px 4px 0px #fc9838, 18px 4px 0px #fc9838,
      20px 4px 0px #d82800, 22px 4px 0px #d82800, 10px 6px 0px #fc9838, 12px 6px 0px #fc9838, 14px 6px 0px #fc9838, 16px 6px 0px #fc9838, 18px 6px 0px #d82800, 20px 6px 0px #d82800,
      22px 6px 0px #d82800, 24px 6px 0px #d82800, 8px 8px 0px #fc9838, 10px 8px 0px #fc9838, 12px 8px 0px #fc9838, 14px 8px 0px #fc9838, 16px 8px 0px #fc9838, 18px 8px 0px #d82800,
      20px 8px 0px #d82800, 22px 8px 0px #d82800, 24px 8px 0px #d82800, 26px 8px 0px #d82800, 6px 10px 0px #fc9838, 8px 10px 0px #fc9838, 10px 10px 0px #fc9838, 12px 10px 0px #fc9838,
      14px 10px 0px #fc9838, 16px 10px 0px #fc9838, 18px 10px 0px #fc9838, 20px 10px 0px #d82800, 22px 10px 0px #d82800, 24px 10px 0px #d82800, 26px 10px 0px #fc9838, 28px 10px 0px #fc9838,
      4px 12px 0px #fc9838, 6px 12px 0px #fc9838, 8px 12px 0px #d82800, 10px 12px 0px #d82800, 12px 12px 0px #d82800, 14px 12px 0px #fc9838, 16px 12px 0px #fc9838, 18px 12px 0px #fc9838,
      20px 12px 0px #fc9838, 22px 12px 0px #fc9838, 24px 12px 0px #fc9838, 26px 12px 0px #fc9838, 28px 12px 0px #fc9838, 30px 12px 0px #fc9838, 4px 14px 0px #fc9838, 6px 14px 0px #d82800,
      8px 14px 0px #d82800, 10px 14px 0px #d82800, 12px 14px 0px #d82800, 14px 14px 0px #d82800, 16px 14px 0px #fc9838, 18px 14px 0px #fc9838, 20px 14px 0px #fc9838, 22px 14px 0px #fc9838,
      24px 14px 0px #fc9838, 26px 14px 0px #fc9838, 28px 14px 0px #fc9838, 30px 14px 0px #fc9838, 2px 16px 0px #fc9838, 4px 16px 0px #fc9838, 6px 16px 0px #d82800, 8px 16px 0px #d82800,
      10px 16px 0px #d82800, 12px 16px 0px #d82800, 14px 16px 0px #d82800, 16px 16px 0px #fc9838, 18px 16px 0px #fc9838, 20px 16px 0px #fc9838, 22px 16px 0px #fc9838, 24px 16px 0px #fc9838,
      26px 16px 0px #d82800, 28px 16px 0px #d82800, 30px 16px 0px #fc9838, 32px 16px 0px #fc9838, 2px 18px 0px #fc9838, 4px 18px 0px #fc9838, 6px 18px 0px #d82800, 8px 18px 0px #d82800,
      10px 18px 0px #d82800, 12px 18px 0px #d82800, 14px 18px 0px #d82800, 16px 18px 0px #fc9838, 18px 18px 0px #fc9838, 20px 18px 0px #fc9838, 22px 18px 0px #fc9838, 24px 18px 0px #fc9838,
      26px 18px 0px #d82800, 28px 18px 0px #d82800, 30px 18px 0px #d82800, 32px 18px 0px #fc9838, 2px 20px 0px #fc9838, 4px 20px 0px #fc9838, 6px 20px 0px #fc9838, 8px 20px 0px #d82800,
      10px 20px 0px #d82800, 12px 20px 0px #d82800, 14px 20px 0px #fc9838, 16px 20px 0px #fc9838, 18px 20px 0px #fc9838, 20px 20px 0px #fc9838, 22px 20px 0px #fc9838, 24px 20px 0px #fc9838,
      26px 20px 0px #fc9838, 28px 20px 0px #d82800, 30px 20px 0px #d82800, 32px 20px 0px #fc9838, 2px 22px 0px #fc9838, 4px 22px 0px #fc9838, 6px 22px 0px #fc9838, 8px 22px 0px #fc9838,
      10px 22px 0px #fc9838, 12px 22px 0px #fc9838, 14px 22px 0px #fc9838, 16px 22px 0px #fc9838, 18px 22px 0px #fc9838, 20px 22px 0px #fc9838, 22px 22px 0px #fc9838, 24px 22px 0px #fc9838,
      26px 22px 0px #fc9838, 28px 22px 0px #fc9838, 30px 22px 0px #fc9838, 32px 22px 0px #fc9838, 4px 24px 0px #fc9838, 6px 24px 0px #d82800, 8px 24px 0px #d82800, 10px 24px 0px #d82800,
      12px 24px 0px #fff, 14px 24px 0px #fff, 16px 24px 0px #fff, 18px 24px 0px #fff, 20px 24px 0px #fff, 22px 24px 0px #fff, 24px 24px 0px #d82800, 26px 24px 0px #d82800, 28px 24px 0px #d82800,
      30px 24px 0px #fc9838, 10px 26px 0px #fff, 12px 26px 0px #fff, 14px 26px 0px #fff, 16px 26px 0px #fff, 18px 26px 0px #fff, 20px 26px 0px #fff, 22px 26px 0px #fff, 24px 26px 0px #fff,
      10px 28px 0px #fff, 12px 28px 0px #fff, 14px 28px 0px #fff, 16px 28px 0px #fff, 18px 28px 0px #fff, 20px 28px 0px #fff, 22px 28px 0px #fc9838, 24px 28px 0px #fff, 10px 30px 0px #fff,
      12px 30px 0px #fff, 14px 30px 0px #fff, 16px 30px 0px #fff, 18px 30px 0px #fff, 20px 30px 0px #fff, 22px 30px 0px #fc9838, 24px 30px 0px #fff, 12px 32px 0px #fff, 14px 32px 0px #fff,
      16px 32px 0px #fff, 18px 32px 0px #fff, 20px 32px 0px #fc9838, 22px 32px 0px #fff;
   transform: translate(-0px, -0px);
   z-index: -1;
   opacity: 0;
}

.box {
   position: absolute;
   background-color: rgba(46, 37, 37, 0);
   z-index: 3;
   width: 34px;
   height: 34px;
}

.box:hover+.mush {
   animation: mush 0.5s linear forwards;
   opacity: 1;
}

@keyframes mush {
   0% {
      transform: scale(0.8) translate(-0px, -0px);
   }

   50% {
      transform: scale(1.1) translate(-0px, -80px);
   }

   100% {
      transform: scale(1.1) translate(-0px, -35px);
   }
}

.tooltip-mario-container {
   height: 2px;
   width: 2px;
   box-shadow: 4px 2px 0px #ce3100, 6px 2px 0px #ce3100, 8px 2px 0px #ce3100, 10px 2px 0px #ce3100, 12px 2px 0px #ce3100, 14px 2px 0px #ce3100, 16px 2px 0px #ce3100, 18px 2px 0px #ce3100,
      20px 2px 0px #ce3100, 22px 2px 0px #ce3100, 24px 2px 0px #ce3100, 26px 2px 0px #ce3100, 28px 2px 0px #ce3100, 30px 2px 0px #ce3100, 2px 4px 0px #ce3100, 4px 4px 0px #ff9c31, 6px 4px 0px #ff9c31,
      8px 4px 0px #ff9c31, 10px 4px 0px #ff9c31, 12px 4px 0px #ff9c31, 14px 4px 0px #ff9c31, 16px 4px 0px #ff9c31, 18px 4px 0px #ff9c31, 20px 4px 0px #ff9c31, 22px 4px 0px #ff9c31,
      24px 4px 0px #ff9c31, 26px 4px 0px #ff9c31, 28px 4px 0px #ff9c31, 30px 4px 0px #ff9c31, 32px 4px 0px #000, 2px 6px 0px #ce3100, 4px 6px 0px #ff9c31, 6px 6px 0px #000, 8px 6px 0px #ff9c31,
      10px 6px 0px #ff9c31, 12px 6px 0px #ff9c31, 14px 6px 0px #ff9c31, 16px 6px 0px #ff9c31, 18px 6px 0px #ff9c31, 20px 6px 0px #ff9c31, 22px 6px 0px #ff9c31, 24px 6px 0px #ff9c31,
      26px 6px 0px #ff9c31, 28px 6px 0px #000, 30px 6px 0px #ff9c31, 32px 6px 0px #000, 2px 8px 0px #ce3100, 4px 8px 0px #ff9c31, 6px 8px 0px #ff9c31, 8px 8px 0px #ff9c31, 10px 8px 0px #ff9c31,
      12px 8px 0px #ce3100, 14px 8px 0px #ce3100, 16px 8px 0px #ce3100, 18px 8px 0px #ce3100, 20px 8px 0px #ce3100, 22px 8px 0px #ff9c31, 24px 8px 0px #ff9c31, 26px 8px 0px #ff9c31,
      28px 8px 0px #ff9c31, 30px 8px 0px #ff9c31, 32px 8px 0px #000, 2px 10px 0px #ce3100, 4px 10px 0px #ff9c31, 6px 10px 0px #ff9c31, 8px 10px 0px #ff9c31, 10px 10px 0px #ce3100,
      12px 10px 0px #ce3100, 14px 10px 0px #000, 16px 10px 0px #000, 18px 10px 0px #000, 20px 10px 0px #ce3100, 22px 10px 0px #ce3100, 24px 10px 0px #ff9c31, 26px 10px 0px #ff9c31,
      28px 10px 0px #ff9c31, 30px 10px 0px #ff9c31, 32px 10px 0px #000, 2px 12px 0px #ce3100, 4px 12px 0px #ff9c31, 6px 12px 0px #ff9c31, 8px 12px 0px #ff9c31, 10px 12px 0px #ce3100,
      12px 12px 0px #ce3100, 14px 12px 0px #000, 16px 12px 0px #ff9c31, 18px 12px 0px #ff9c31, 20px 12px 0px #ce3100, 22px 12px 0px #ce3100, 24px 12px 0px #000, 26px 12px 0px #ff9c31,
      28px 12px 0px #ff9c31, 30px 12px 0px #ff9c31, 32px 12px 0px #000, 2px 14px 0px #ce3100, 4px 14px 0px #ff9c31, 6px 14px 0px #ff9c31, 8px 14px 0px #ff9c31, 10px 14px 0px #ce3100,
      12px 14px 0px #ce3100, 14px 14px 0px #000, 16px 14px 0px #ff9c31, 18px 14px 0px #ff9c31, 20px 14px 0px #ce3100, 22px 14px 0px #ce3100, 24px 14px 0px #000, 26px 14px 0px #ff9c31,
      28px 14px 0px #ff9c31, 30px 14px 0px #ff9c31, 32px 14px 0px #000, 2px 16px 0px #ce3100, 4px 16px 0px #ff9c31, 6px 16px 0px #ff9c31, 8px 16px 0px #ff9c31, 10px 16px 0px #ff9c31,
      12px 16px 0px #000, 14px 16px 0px #000, 16px 16px 0px #ff9c31, 18px 16px 0px #ce3100, 20px 16px 0px #ce3100, 22px 16px 0px #ce3100, 24px 16px 0px #000, 26px 16px 0px #ff9c31,
      28px 16px 0px #ff9c31, 30px 16px 0px #ff9c31, 32px 16px 0px #000, 2px 18px 0px #ce3100, 4px 18px 0px #ff9c31, 6px 18px 0px #ff9c31, 8px 18px 0px #ff9c31, 10px 18px 0px #ff9c31,
      12px 18px 0px #ff9c31, 14px 18px 0px #ff9c31, 16px 18px 0px #ce3100, 18px 18px 0px #ce3100, 20px 18px 0px #000, 22px 18px 0px #000, 24px 18px 0px #000, 26px 18px 0px #ff9c31,
      28px 18px 0px #ff9c31, 30px 18px 0px #ff9c31, 32px 18px 0px #000, 2px 20px 0px #ce3100, 4px 20px 0px #ff9c31, 6px 20px 0px #ff9c31, 8px 20px 0px #ff9c31, 10px 20px 0px #ff9c31,
      12px 20px 0px #ff9c31, 14px 20px 0px #ff9c31, 16px 20px 0px #ce3100, 18px 20px 0px #ce3100, 20px 20px 0px #000, 22px 20px 0px #ff9c31, 24px 20px 0px #ff9c31, 26px 20px 0px #ff9c31,
      28px 20px 0px #ff9c31, 30px 20px 0px #ff9c31, 32px 20px 0px #000, 2px 22px 0px #ce3100, 4px 22px 0px #ff9c31, 6px 22px 0px #ff9c31, 8px 22px 0px #ff9c31, 10px 22px 0px #ff9c31,
      12px 22px 0px #ff9c31, 14px 22px 0px #ff9c31, 16px 22px 0px #ff9c31, 18px 22px 0px #000, 20px 22px 0px #000, 22px 22px 0px #ff9c31, 24px 22px 0px #ff9c31, 26px 22px 0px #ff9c31,
      28px 22px 0px #ff9c31, 30px 22px 0px #ff9c31, 32px 22px 0px #000, 2px 24px 0px #ce3100, 4px 24px 0px #ff9c31, 6px 24px 0px #ff9c31, 8px 24px 0px #ff9c31, 10px 24px 0px #ff9c31,
      12px 24px 0px #ff9c31, 14px 24px 0px #ff9c31, 16px 24px 0px #ce3100, 18px 24px 0px #ce3100, 20px 24px 0px #ff9c31, 22px 24px 0px #ff9c31, 24px 24px 0px #ff9c31, 26px 24px 0px #ff9c31,
      28px 24px 0px #ff9c31, 30px 24px 0px #ff9c31, 32px 24px 0px #000, 2px 26px 0px #ce3100, 4px 26px 0px #ff9c31, 6px 26px 0px #ff9c31, 8px 26px 0px #ff9c31, 10px 26px 0px #ff9c31,
      12px 26px 0px #ff9c31, 14px 26px 0px #ff9c31, 16px 26px 0px #ce3100, 18px 26px 0px #ce3100, 20px 26px 0px #000, 22px 26px 0px #ff9c31, 24px 26px 0px #ff9c31, 26px 26px 0px #ff9c31,
      28px 26px 0px #ff9c31, 30px 26px 0px #ff9c31, 32px 26px 0px #000, 2px 28px 0px #ce3100, 4px 28px 0px #ff9c31, 6px 28px 0px #000, 8px 28px 0px #ff9c31, 10px 28px 0px #ff9c31,
      12px 28px 0px #ff9c31, 14px 28px 0px #ff9c31, 16px 28px 0px #ff9c31, 18px 28px 0px #000, 20px 28px 0px #000, 22px 28px 0px #ff9c31, 24px 28px 0px #ff9c31, 26px 28px 0px #ff9c31,
      28px 28px 0px #000, 30px 28px 0px #ff9c31, 32px 28px 0px #000, 2px 30px 0px #ce3100, 4px 30px 0px #ff9c31, 6px 30px 0px #ff9c31, 8px 30px 0px #ff9c31, 10px 30px 0px #ff9c31,
      12px 30px 0px #ff9c31, 14px 30px 0px #ff9c31, 16px 30px 0px #ff9c31, 18px 30px 0px #ff9c31, 20px 30px 0px #ff9c31, 22px 30px 0px #ff9c31, 24px 30px 0px #ff9c31, 26px 30px 0px #ff9c31,
      28px 30px 0px #ff9c31, 30px 30px 0px #ff9c31, 32px 30px 0px #000, 2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000, 8px 32px 0px #000, 10px 32px 0px #000, 12px 32px 0px #000,
      14px 32px 0px #000, 16px 32px 0px #000, 18px 32px 0px #000, 20px 32px 0px #000, 22px 32px 0px #000, 24px 32px 0px #000, 26px 32px 0px #000, 28px 32px 0px #000, 30px 32px 0px #000,
      32px 32px 0px #000;
   position: absolute;
   transform: translate(-30px);
   z-index: 3;
}

/*///////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* footer soc links animation */
.soc {
   display: none;
}

.container:hover .soc {
   display: block;
   position: relative;
   margin: auto;
}

.main_back {
   position: absolute;
   border-radius: 10px;
   transform: rotate(90deg);
   width: 11em;
   height: 11em;
   background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);
   z-index: -2;
   box-shadow: inset 0px 0px 180px 5px var(--clr-body-bg);
}

.main {
   opacity: 0.9;
   display: flex;
   flex-wrap: wrap;
   width: 14em;
   align-items: center;
   justify-content: center;
   z-index: -1;
}

.card {
   width: 60px;
   height: 60px;
   border-top-left-radius: 10px;
   background: lightgrey;
   transition: 0.4s ease-in-out, 0.2s background-color ease-in-out, 0.2s background-image ease-in-out;
   background: rgba(255, 255, 255, 0.596);
   backdrop-filter: blur(5px);
   border: 1px solid transparent;
   -webkit-backdrop-filter: blur(5px);
   display: flex;
   align-items: center;
   justify-content: center;
}

.card .instagram {
   opacity: 0;
   transition: 0.2s ease-in-out;
   fill: #cc39a4;
}

.card:nth-child(2) {
   border-radius: 0px;
}

.card:nth-child(2) .twitter {
   opacity: 0;
   transition: 0.2s ease-in-out;
   fill: #03a9f4;
}

.card:nth-child(3) {
   border-top-right-radius: 10px;
   border-top-left-radius: 0px;
}

.card:nth-child(3) .dribble {
   opacity: 0;
   transition: 0.2s ease-in-out;
   fill: #ffb5d2;
}

.card:nth-child(4) {
   border-radius: 0px;
}

.card:nth-child(4) .codepen {
   opacity: 0;
   transition: 0.2s ease-in-out;
   fill: black;
}

.card:nth-child(5) {
   border-radius: 0px;
}

.card:nth-child(5) .uiverse {
   position: absolute;
   margin-left: 0.2em;
   margin-top: 0.2em;
   opacity: 0;
   transition: 0.2s ease-in-out;
}

.card:nth-child(6) {
   border-radius: 0px;
}

.card:nth-child(6) .discord {
   opacity: 0;
   transition: 0.2s ease-in-out;
   fill: #8c9eff;
}

.card:nth-child(7) {
   border-bottom-left-radius: 10px;
   border-top-left-radius: 0px;
}

.card:nth-child(7) .github {
   opacity: 0;
   transition: 0.2s ease-in-out;
   fill: black;
}

.card:nth-child(8) {
   border-radius: 0px;
}

.card:nth-child(8) .telegram {
   opacity: 0;
   transition: 0.2s ease-in-out;
   fill: #29b6f6;
}

.card:nth-child(9) {
   border-bottom-right-radius: 10px;
   border-top-left-radius: 0px;
}

.card:nth-child(9) .reddit {
   opacity: 0;
   transition: 0.2s ease-in-out;
}

.main:hover {
   width: 14em;
   cursor: pointer;
}

.main:hover .main_back {
   opacity: 0;
}

.main:hover .card {
   margin: 0.2em;
   border-radius: 10px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.3);
   background: rgba(255, 255, 255, 0.2);
}

.main:hover .card:nth-child(5) {
   border: transparent;
}

.main:hover .text {
   opacity: 0;
   z-index: -3;
}

.main:hover .instagram {
   opacity: 1;
}

.main:hover .twitter {
   opacity: 1;
}

.main:hover .dribble {
   opacity: 1;
}

.main:hover .codepen {
   opacity: 1;
}

.main:hover .uiverse {
   opacity: 1;
}

.main:hover .discord {
   opacity: 1;
}

.main:hover .github {
   opacity: 1;
}

.main:hover .telegram {
   opacity: 1;
}

.main:hover .reddit {
   opacity: 1;
}

.card:nth-child(1):hover {
   background-color: #cc39a4;
}

.card:nth-child(1):hover .instagram {
   fill: white;
}

.card:nth-child(2):hover {
   background-color: #03a9f4;
}

.card:nth-child(2):hover .twitter {
   fill: white;
}

.card:nth-child(3):hover {
   background-color: #ffb5d2;
}

.card:nth-child(3):hover .dribble {
   fill: white;
}

.card:nth-child(4):hover {
   background-color: #1e1f26;
}

.card:nth-child(4):hover .codepen {
   fill: white;
}

.card:nth-child(5):hover {
   animation: backgroundIMG 0.1s;
   animation-fill-mode: forwards;
}

.card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop {
   stop-color: white;
}

.card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop {
   stop-color: white;
}

.card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop {
   stop-color: white;
}

.card:nth-child(6):hover {
   background-color: #8c9eff;
}

.card:nth-child(6):hover .discord {
   fill: white;
}

.card:nth-child(7):hover {
   background-color: black;
}

.card:nth-child(7):hover .github {
   fill: white;
}

.card:nth-child(8):hover {
   background-color: #29b6f6;
}

.card:nth-child(8):hover .telegram>path:nth-of-type(1) {
   fill: white;
}

.card:nth-child(8):hover .telegram>path:nth-of-type(2) {
   fill: #29b6f6;
}

.card:nth-child(8):hover .telegram>path:nth-of-type(3) {
   fill: #29b6f6;
}

.card:nth-child(9):hover {
   background-color: rgb(255, 69, 0);
}

.card:nth-child(9) .reddit>g circle {
   fill: rgb(255, 69, 0);
}

.card:nth-child(9) .reddit>g path {
   fill: white;
}

@keyframes backgroundIMG {
   100% {
      background-image: linear-gradient(#bf66ff, #6248ff, #00ddeb);
   }
}

.experience-details-container {
   overflow: hidden;
}

.about-containers.asdf {
   display: flex;
   overflow: hidden;
   margin: 2rem auto;
   mask: linear-gradient(transparent, #ffffff 10%, #ffffff 90%, transparent 100%);
   -webkit-mask: linear-gradient(transparent, #ffffff 10%, #ffffff 90%, transparent 100%);
}

.about-containers.asdf.animated {
   flex-wrap: nowrap;
   width: max-content;
   will-change: transform;
   animation: scroll 20s linear infinite;
}

@keyframes scroll {
   0% {
      transform: translateX(0%);
   }

   100% {
      transform: translateX(-50%);
   }
}

.text {
   position: absolute;
   font-size: 0.7em;
   transition: 0.4s ease-in-out;
   color: black;
   text-align: center;
   font-weight: bold;
   letter-spacing: 0.33em;
   z-index: 3;
}