/* outer right cyan */
/* outer right cyan */
/* outer right cyan */
@keyframes dropdown {
  0% {
    max-height: 0;
    opacity: 0;
  }
  100% {
    max-height: 20rem;
    opacity: 1;
  }
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes revealLetters {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* General settings and design */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  list-style-type: none;
}

:root {
  font-size: 100%;
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Courgette", cursive;
  background-image: linear-gradient(-45deg, rgb(241, 50, 216), rgb(208, 98, 230), rgb(124, 197, 245), rgb(158, 158, 235), rgb(255, 0, 221));
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

section {
  padding: 3.2rem 0;
  margin: 2rem;
  background-image: linear-gradient(-45deg, rgba(225, 245, 116, 0.918), rgb(252, 151, 252), rgb(217, 140, 248));
  background-size: 400% 400%;
  animation: gradient 60s ease infinite;
  border-radius: 3rem;
  box-shadow: 0.2rem 0rem 0.6rem rgb(106, 0, 255);
}

.container {
  padding: 0 1.25rem;
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
}

h2,
h3,
h4,
h5 {
  display: inline;
  position: relative;
  z-index: 900;
  color: #fff;
  letter-spacing: 0.2rem;
  border-radius: 2rem;
  padding: 0.5rem 1rem;
  text-shadow: 6px 0 6px #a408ff, 5px 5px 5px #d26df7, 0 6px 6px rgba(79, 164, 250, 0.7215686275) !important;
}

.h2-title,
.h3-title,
.h4-title {
  margin: 1.5rem 0 2rem;
  z-index: 900;
}

/*Settings and design for all the H2 titles */
.h2-title h2 {
  font-size: 4.5rem;
}

/*Settings and design for all the H3 titles */
.h3-title h3 {
  font-size: 3.2rem;
}

/*Settings and design for all the H4 titles */
.h4-title h4 {
  font-size: 2.5rem;
}

html[lang=de][data-page=index-german] h2,
html[lang=de][data-page=portfolio-german] h2,
html[lang=de][data-page=files-german] h2,
html[lang=de][data-page=contact-german] h2 {
  font-size: 3.5rem;
}
html[lang=de][data-page=index-german] h3,
html[lang=de][data-page=portfolio-german] h3,
html[lang=de][data-page=files-german] h3,
html[lang=de][data-page=contact-german] h3 {
  font-size: 2.3rem;
}
html[lang=de][data-page=index-german] h4,
html[lang=de][data-page=portfolio-german] h4,
html[lang=de][data-page=files-german] h4,
html[lang=de][data-page=contact-german] h4 {
  font-size: 2rem;
}

/* settings for all h5 (project titles) in the website */
h5 {
  font-size: xx-large;
  font-weight: bolder;
  margin-bottom: 1rem;
}

/* Settings and designs for all paragraphs in the website */
.paragraph-div {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  padding: 0.5rem;
  margin: 1rem 0;
  color: #000000;
  background-color: rgba(242, 215, 255, 0.8235294118);
  border: 0.2rem solid #a009f7;
  border-radius: 4rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  font-family: "Kalam", cursive;
}
.paragraph-div i {
  font-size: xx-large;
  color: #a009f7;
  border-radius: 3rem;
  padding: 0.5rem;
}
.paragraph-div .bx:hover {
  color: rgb(89, 0, 255);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  transform: scale(1.1);
  transition: 1s;
  border: rgb(255, 0, 242) outset 0.2rem;
}
.paragraph-div .fa-square-github:hover {
  color: rgb(89, 0, 255);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  transform: scale(1.1);
  transition: 1s;
  border: rgb(255, 0, 242) outset 0.2rem;
}
.paragraph-div p {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 900;
  padding: 1.5rem 0;
  margin: 0 0 0 1rem;
  animation: revealLetters 3s forwards;
  opacity: 0;
  font-size: x-large;
}
.paragraph-div .platforms-links {
  margin: 0.5rem 0;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  padding: 0;
}
.paragraph-div .platforms-links a {
  margin: 1rem 0.4rem;
}
.paragraph-div .platforms-links b {
  font-size: x-large;
}
.paragraph-div a {
  color: inherit;
  text-decoration: inherit;
}
.paragraph-div a:visited {
  color: inherit;
}
.paragraph-div a:hover {
  text-decoration: inherit;
  color: #a009f7;
}

#about .intro-paragraph {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#about .intro-paragraph ul {
  font-size: 1.5rem;
}

.intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: 4rem;
  box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f, inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff, 0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
}

.about-text-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 75%;
  border-radius: 4rem;
  padding: 2rem;
  margin: 4rem;
  background: rgba(254, 107, 254, 0.244);
  backdrop-filter: blur(2rem);
  -webkit-backdrop-filter: blur(1rem);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  color: #000;
  line-height: 2.5rem;
  border: 0.5rem solid #a009f7;
}
.about-text-box i {
  font-size: 3rem;
}

.about-text-box .title-span {
  margin-bottom: 2rem;
  font-size: 3rem;
}

.sub-menu ul {
  display: flex;
  margin-bottom: 2rem;
}
.sub-menu ul li {
  margin: 1rem;
  padding: 0.6rem;
  text-shadow: #fff 0px 0px 5px, #fff 0px 0px 10px, #fff 0px 0px 15px, 2px 2px 2px rgba(255, 255, 255, 0.04);
  color: #a009f7;
  font-weight: 500;
  justify-content: space-between;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 2rem;
  justify-content: center;
  text-align: center;
  border: rgba(242, 215, 255, 0.6705882353) outset 0.5rem;
}
.sub-menu ul li:hover {
  font-weight: 600;
  border: #a009f7 0.5rem outset;
}

.title-span {
  font-size: 2rem;
  font-weight: bolder;
  color: #a009f7;
  text-shadow: #fff 0px 0px 5px, #fff 0px 0px 10px, #fff 0px 0px 15px, 2px 2px 2px rgba(255, 255, 255, 0.04);
}

.intro-paragraph {
  flex-direction: row;
}

/* Settings and design for all buttons in the website */
button {
  font-size: xx-large;
  color: #fff;
  background-color: #a009f7;
  border-radius: 2rem;
  box-shadow: 0.5rem 0.3rem 0.5rem rgb(129, 130, 133);
  padding: 1rem;
  margin: 1rem 0 1.5rem;
  z-index: 100;
  cursor: pointer;
  font-family: "Courgette", cursive;
}
button:hover {
  transform: scale(1.1);
  transition: 1s;
}

.container-captcha {
  margin: 3rem 0;
}

.h-captcha iframe {
  border: 0.3rem rgba(242, 215, 255, 0.6705882353) outset;
  margin: 1.5rem;
  border-radius: 2rem;
}

.h-captcha iframe:hover {
  border: 0.3rem #a009f7 outset;
}

/* Styles to show that links and buttons are disabled */
.disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

.disabled:hover {
  cursor: not-allowed;
}

/* Style the sticky note */
.sticky-note {
  background-color: rgba(242, 215, 255, 0.8235294118);
  border: #a009f7 0.3rem outset;
  font-size: 2rem;
  position: fixed;
  top: 2rem;
  left: 1rem;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  font-size: 1.3rem;
  color: #4e484e;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  text-shadow: #fff 0px 0px 5px, #fff 0px 0px 10px, #fff 0px 0px 15px, 2px 2px 2px rgba(255, 255, 255, 0.04);
}

/* Optional: Add a close button (can be hidden when CAPTCHA is completed) */
.sticky-note p {
  margin: 0;
}

@media screen and (max-width: 1200px) {
  .sub-menu ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column !important;
  }
  .sub-menu ul li {
    font-size: 1.3rem;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .intro {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}
@media screen and (max-width: 670px) {
  .intro-paragraph ul {
    flex-direction: column;
  }
  .about-text-box {
    width: 100%;
  }
  .about-text-box .title-span {
    margin-bottom: 2rem;
    font-size: 2rem;
  }
}
@media screen and (max-width: 480px) and (orientation: portrait) {
  body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    float: left;
  }
  section {
    width: 120%;
    margin-left: 15%;
  }
}
/* outer right cyan */
.backupH1Title {
  display: none;
}

/* header designs and settings */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  color: #fff;
  background-color: #a009f7;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  padding: 1.25rem 0;
  border-bottom: transparent;
  background-size: 600% auto;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
header .icon-top-draculady {
  display: none;
  padding: 0;
  width: 35%;
  height: auto;
  margin: 2% 35%;
  position: relative;
  z-index: 500;
  border-radius: 50%;
  background-color: #9d62eb;
  box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f, inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff, 0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
}
header .icon-top-draculady img {
  width: 100%;
}
header .icon-draculady {
  display: block;
  padding: 0;
  width: 25%;
  height: auto;
  margin: 2% 35%;
  position: relative;
  z-index: 100;
  border-radius: 50%;
  background-color: #9d62eb;
  box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f, inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff, 0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
}
header .icon-draculady img {
  width: 100%;
}
header h1 {
  text-shadow: 1px 1px 1px #919191, 1px 2px 1px #919191, 1px 3px 1px #919191, 1px 4px 1px #919191, 1px 5px 1px #919191, 1px 6px 1px #919191, 1px 7px 1px #919191, 1px 8px 1px #919191, 1px 9px 1px #919191, 1px 10px 1px #919191, 1px 18px 6px rgba(16, 16, 16, 0.4), 1px 22px 10px rgba(16, 16, 16, 0.2), 1px 25px 35px rgba(16, 16, 16, 0.2), 1px 30px 60px rgba(16, 16, 16, 0.4);
  font-family: "poetsen One";
  font-size: 6rem;
  letter-spacing: 0.3rem;
  margin: 3% 0;
  z-index: 999;
  position: relative;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 500;
  font-size: xx-large;
  margin-top: 1rem;
}
nav ul li {
  display: inline;
  position: relative;
  z-index: 500;
  margin: 0 3rem;
  text-shadow: 1px 1px 1px #5ff6ff, 1px 2px 1px #ffffff, 1px 3px 1px #ffffff, -1px 3px 2px #ffffff, -1px -1px 1px #ffffff, 2px -1px 2px #a5cef0, 1px 7px 4px rgba(0, 9, 35, 0.4), 1px 9px 10px rgba(0, 64, 255, 0.2), 1px 9px 35px rgba(0, 64, 255, 0.2), 1px 9px 60px rgba(0, 64, 255, 0.4);
  letter-spacing: 0.2rem;
  font-size: 2.5rem;
}
nav ul li a {
  color: #fff;
  text-decoration: none;
  border-radius: 2rem;
  padding: 0.5rem;
  position: relative;
  z-index: 500;
}
nav ul li a:hover {
  font-weight: bolder;
}

.dropdown-portfolio {
  display: none;
  position: absolute;
  z-index: 1000 !important;
  top: 75%;
  left: 50%;
  min-width: 25rem;
  background-color: rgba(180, 142, 229, 0.7176470588);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  border-radius: 2rem;
  transform: translateX(-50%);
}
.dropdown-portfolio li {
  display: block;
  position: relative;
  z-index: 1000;
  padding: 0.6rem 0.4rem;
  font-size: 2rem;
}
.dropdown-portfolio li a {
  color: #fff;
  padding: 0 0.5rem;
  position: relative;
  z-index: 1000;
}
.dropdown-portfolio li:hover {
  position: relative;
  z-index: 1000;
}

.dropdown:hover .dropdown-portfolio {
  display: block;
  opacity: 1;
  visibility: visible;
  animation: dropdown 1s ease-out forwards;
  position: absolute;
  z-index: 1000;
}

/* Settings for the Footer of the pages */
footer {
  padding: 1.5rem 0;
  margin: 2rem 0 0 0;
  width: 100%;
  bottom: 0;
  font-size: x-large;
  color: #fff;
  background-color: #a009f7;
  letter-spacing: 0.18rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  text-align: center;
  border-top: 0.3rem solid rgb(236, 196, 247);
}
footer:hover {
  border-top: 0.3rem outset rgb(70, 0, 102);
}
footer p::before, footer p::after {
  content: "\f5fc";
  font-family: "FontAwesome";
  position: relative;
  padding: 0 15rem;
}
footer .logo {
  display: none;
  margin: 1.5% 30%;
  padding: 0.5rem;
  width: 40%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 10%;
  background-color: #9d62eb;
}
footer .logo img {
  width: 100%;
}

@media screen and (max-width: 1800px) {
  footer p::before,
  footer p::after {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .icon-draculady {
    display: none !important;
  }
  .icon-top-draculady {
    display: block !important;
  }
  nav ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-left: 0;
  }
  nav ul li {
    display: block;
    margin: 1rem 0;
  }
  .dropdown:hover .dropdown-portfolio {
    position: relative;
    z-index: 1000;
  }
}
@media screen and (max-width: 480px) and (orientation: portrait) {
  h1 {
    transform: scale(0.7);
  }
  header,
  footer {
    width: 150%;
  }
}
/* outer right cyan */
/* Settings and design of the main picture */
.profile-picture {
  display: flex;
  justify-content: center;
}
.profile-picture img {
  margin: 4rem 1rem 1rem;
  width: 30rem;
  height: 30rem;
  position: static;
  z-index: 900;
  border-radius: 50%;
  border: 0.5rem solid #a009f7;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

/* Settings and design of the images inside the about me paragraph */
.paragraph-div img {
  /* Settings of images inside the div paragraph, p_img_1 and p_img_2 */
  position: relative;
  z-index: 900;
  border-radius: 4rem;
  margin: 2rem 1rem 0 2rem;
  border: 0.5rem outset;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.paragraph-div img:hover {
  border-color: #a009f7;
  transition: 2s;
}

.p_img_1 img {
  width: 20rem;
  height: 20rem;
  margin-top: 5rem;
  border-color: #a009f7;
  z-index: 3;
}

.p_img_2 img {
  width: 22rem;
  height: auto;
  border-color: #a009f7;
  bottom: -40%;
  display: none;
}

@media screen and (max-width: 1800px) {
  .profile-picture img {
    max-width: 20rem;
    max-height: 20rem;
  }
}
/* outer right cyan */
@keyframes rotate {
  0% {
    transform: perspective(100rem) rotateY(0deg);
  }
  100% {
    transform: perspective(100rem) rotateY(360deg);
  }
}
/* settings and design for the carousel slider presentation */
.slider-box {
  border-radius: 3rem;
  box-shadow: 0px 1px 2px 0px rgba(137, 45, 223, 0.7), 1px 2px 4px 0px rgba(81, 224, 15, 0.7), 2px 4px 8px 0px rgba(119, 15, 238, 0.7), 2px 4px 16px 0px rgba(233, 6, 157, 0.7);
  padding: 10rem;
}
.slider-box .slider {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 900;
  padding: 0rem;
  margin: auto;
  width: 20rem;
  height: 15rem;
  transform-style: preserve-3d;
  animation: rotate 40s linear infinite;
}
.slider-box .slider span {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(35rem);
  transition: 1s;
  border-radius: 3rem;
}
.slider-box .slider span:hover img {
  transform: translateY(-2rem) scale(1.2);
  border: #a009f7 outset 0.5rem;
}
.slider-box .slider span img {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 3rem;
  border: #a009f7 outset 0.3rem;
  position: absolute;
  -o-object-fit: contain;
     object-fit: contain;
  transition: 3s;
  background-color: rgba(242, 215, 255, 0.6705882353);
}

.carousel-item img {
  -o-object-fit: contain;
     object-fit: contain;
}

html[data-page=index-english] #portfolio .container .h3-title,
html[data-page=index-german] #portfolio .container .h3-title {
  margin-bottom: 3rem;
}

html[data-page=index-english] .h4-title,
html[data-page=index-german] .h4-title {
  margin-top: 3rem;
}

@media screen and (max-width: 1400px) {
  .slider-box {
    padding: 8rem;
  }
  .slider-box .slider {
    width: 18rem;
    height: 13rem;
  }
  .slider-box .slider span {
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(25rem);
  }
}
@media screen and (max-width: 1200px) {
  .slider-box {
    padding: 8rem;
  }
  .slider-box .slider {
    width: 18rem;
    height: 13rem;
  }
  .slider-box .slider span {
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(25rem);
  }
}
@media screen and (max-width: 992px) {
  .slider-box {
    padding: 6rem;
  }
  .slider-box .slider {
    width: 14rem;
    height: 11rem;
  }
  .slider-box .slider span {
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(18rem);
  }
}
@media screen and (max-width: 768px) {
  .slider-box {
    padding: 4rem;
  }
  .slider-box .slider {
    width: 10rem;
    height: 9rem;
  }
  .slider-box .slider span {
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(13rem);
  }
}
@media screen and (max-width: 576px) {
  .slider-box {
    padding: 2rem;
  }
  .slider-box .slider {
    width: 8rem;
    height: 7rem;
  }
  .slider-box .slider span {
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(10rem);
  }
}
/* outer right cyan */
/* Settings and design for all portfolio items in the website */
.portfolio-items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 1rem;
  margin: 1.5rem 0 0 0;
}
.portfolio-items .portfolio-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  margin: 0 0 2rem 0;
  width: calc(33.33% - 1.25rem);
  max-width: 35rem;
  min-width: 20rem;
  min-height: 19rem;
  background-color: rgba(242, 215, 255, 0.6705882353);
  border: 0.4rem outset #a009f7;
  border-radius: 5.5rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  transition: transform 1s;
}
.portfolio-items .portfolio-item:hover button {
  background-color: rgba(242, 215, 255, 0.6705882353);
}
.portfolio-items .portfolio-item:hover {
  background-color: #a009f7;
  border: rgba(242, 215, 255, 0.6705882353) 0.5rem outset;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  transform: scale(1.05);
  z-index: 1000;
  color: #fff;
}
.portfolio-items .portfolio-item:hover p {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
}
.portfolio-items .portfolio-item:hover .portfolio-item-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 1s;
}
.portfolio-items .portfolio-item p {
  margin-bottom: 1.5rem;
  font-size: x-large;
  display: none;
}
.portfolio-items .portfolio-item a {
  display: flex;
  justify-content: center;
}
.portfolio-items .portfolio-item .portfolio-item-image {
  padding: 0;
  margin: 0 0 1rem 0;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.portfolio-items .portfolio-item .portfolio-item-image img {
  padding: 0;
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
}

.show-first {
  display: flex;
}

.show-all {
  margin-top: -1rem;
}
.show-all:target {
  display: flex;
}

.show-all-button {
  display: none;
}

.elements-table tr td i {
  cursor: pointer;
}

@media (max-width: 1026px) {
  .portfolio-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 1rem 0;
  }
  .portfolio-items .portfolio-item {
    width: 80%;
    margin: 1rem 0;
  }
}
@media (min-width: 650px) and (max-width: 1025px) {
  .portfolio-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-left: 15%;
    margin-right: 15%;
  }
  .portfolio-items .portfolio-item {
    width: 100%;
  }
}
@media (max-width: 480px) and (orientation: portrait) {
  .portfolio-item {
    padding: 0.5rem;
    margin: 1rem;
    max-width: 80%;
  }
  .portfolio-item a {
    padding: 0.5rem;
  }
}
/* outer right cyan */
/* Settings and design of "skills and tools" section */
.skills-categories,
.languages-items,
.skill-items {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-wrap: wrap;
}

.skillSetPair {
  flex-direction: row;
  display: flex;
  width: 100%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 3rem;
  margin: 2rem 0;
  border: outset 0.3rem #a009f7;
  background-color: rgba(242, 215, 255, 0.6705882353);
}

.skills-set {
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  width: 50%;
  min-height: 30rem;
  margin: 1rem 4rem;
}

.skill {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 1rem;
  width: 8rem;
  height: 10rem;
  border-radius: 5rem;
  box-sizing: border-box;
}
.skill i {
  font-size: 3rem;
  color: #fff;
  padding: 1rem;
  border-radius: 50%;
  fill: #fff;
}
.skill .svg-icon {
  width: 6rem;
  height: 6rem;
  background-color: #a009f7;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border: 0.3rem outset #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skill .svg-icon:hover {
  border: 0.3rem outset rgba(242, 215, 255, 0.6705882353);
}
.skill p {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-shadow: #fff 0px 0px 5px, #fff 0px 0px 10px, #fff 0px 0px 15px, 2px 2px 2px rgba(255, 255, 255, 0.04);
  padding: 0 1rem;
  margin: 1rem 0 0 0;
  height: 3rem;
  font-weight: 900;
  letter-spacing: 0.1rem;
}

.language-item,
.languages-items {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
}

.language-item {
  flex-direction: column;
  margin: 3rem;
}
.language-item p {
  padding: 0;
  font-size: 3rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 1rem;
}
.language-item .language-parameter {
  height: 2rem;
  width: 12rem;
  border: outset 0.3rem rgba(242, 215, 255, 0.6705882353);
  border-radius: 1rem;
  margin-top: -1rem;
  margin-bottom: 5rem;
}
.language-item .language-parameter p {
  font-size: 2rem;
  align-items: center;
  text-align: center;
  display: flex;
  justify-content: center;
  text-shadow: #fff 0px 0px 5px, #fff 0px 0px 10px, #fff 0px 0px 15px, 2px 2px 2px rgba(255, 255, 255, 0.04);
  margin: 3rem 0;
}
.language-item .english-parameter {
  background-image: linear-gradient(to right, #a009f7, #a009f7, rgba(242, 215, 255, 0.6705882353));
}
.language-item .german-parameter {
  background-image: linear-gradient(to right, #a009f7, #a009f7, #a009f7, rgba(242, 215, 255, 0.6705882353), rgba(242, 215, 255, 0.6705882353));
}
.language-item .hebrew-parameter {
  background-color: #a009f7;
}

.language-emoji {
  border-radius: 50%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  width: 6rem;
  height: 6rem;
  border: outset 0.3rem rgba(242, 215, 255, 0.6705882353);
}
.language-emoji:hover {
  border: #a009f7 outset 0.3rem;
}

@media screen and (max-width: 1100px) {
  .skills-categories,
  .skillSetPair {
    flex-direction: column;
    justify-content: center;
    display: flex;
    align-items: center;
  }
  h2,
  h3 {
    transform: scale(0.7);
  }
  .skills-set {
    width: 100%;
    margin: 1rem;
  }
}
@media screen and (max-width: 480px) and (orientation: portrait) {
  .skills-categories {
    flex-direction: column;
    width: 100%;
  }
  .skills-set {
    width: 100%;
  }
}
/* outer right cyan */
/* Settings and design for all contact options */
.contact-options-divs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  flex-direction: column;
  padding: 1rem;
  border-radius: 3rem;
  /* Settings and design of the contact form */
}
.contact-options-divs .contact-form,
.contact-options-divs .contact-directly {
  display: inline-block;
  position: static;
  z-index: 900;
  padding: 1.5rem;
  margin: 0 1rem;
  max-width: 40rem;
  min-height: 15rem;
  font-size: x-large;
  background-color: rgba(242, 215, 255, 0.6705882353);
  line-height: 3rem;
  border: 0.1rem solid rgba(177, 177, 177, 0.548);
  border-radius: 3rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.contact-options-divs .contact-form a,
.contact-options-divs .contact-directly a {
  color: #000000;
  border-radius: 50%;
}
.contact-options-divs .contact-form a:hover,
.contact-options-divs .contact-directly a:hover {
  font-weight: bolder;
  text-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.contact-options-divs .contact-form i,
.contact-options-divs .contact-directly i {
  font-size: x-large;
  color: #a009f7;
  border-radius: 50%;
  padding: 1rem;
  transition: 1s;
}
.contact-options-divs .contact-form i:hover,
.contact-options-divs .contact-directly i:hover {
  transform: scale(1.2);
}
.contact-options-divs .contact-form:hover,
.contact-options-divs .contact-directly:hover {
  text-shadow: 0.1rem 0.2rem 0.4rem rgb(249, 249, 253);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.contact-options-divs .contact-options-list {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
}
.contact-options-divs .form {
  margin: 1rem 0 0 0;
  font-size: x-large;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.contact-options-divs .form input,
.contact-options-divs .form textarea {
  margin: -2rem 0;
  display: flex;
  width: 100%;
}
.contact-options-divs .form input {
  padding: 0.5rem;
  margin: 0;
  height: 3rem;
  border-radius: 1rem;
  font-size: 1.2rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.contact-options-divs .form textarea {
  padding: 0.5rem;
  margin: 0;
  width: 32rem;
  height: 10rem;
  border-radius: 1rem;
  resize: none;
  font-size: 1.2rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.contact-options-divs .form input:hover,
.contact-options-divs .form textarea:hover {
  border: 0.3 inset gray !important;
}
.contact-options-divs .contact-directly {
  display: flex;
  width: 100%;
}
.contact-options-divs .contact-directly li {
  width: 20%;
  border-radius: 50%;
  margin: 0.5rem;
  border: #a009f7 0.3rem outset;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.contact-options-divs .contact-directly li:hover {
  border: #a009f7 0.3rem inset;
  background-color: rgba(242, 215, 255, 0.6705882353);
}
.contact-options-divs .contact-directly li i {
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 2.5rem;
  padding: 2rem;
  border-radius: 50%;
}
.contact-options-divs .contact-directly li a {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  border-radius: 50%;
}
.contact-options-divs .contact-directly li i:hover {
  color: white;
  text-shadow: 6px 0 6px #a408ff, 5px 5px 5px #d26df7, 0 6px 6px rgba(79, 164, 250, 0.7215686275);
  border-radius: 50%;
}

.social-media-3d-menu {
  box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f, inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff, 0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
  width: 100%;
  border-radius: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35rem;
  font-size: 1.5rem;
}
.social-media-3d-menu ul {
  padding: -10rem;
  position: relative;
  transform: skewY(-25deg);
}
.social-media-3d-menu ul li {
  position: absolute;
  top: 0;
  transform: translate(calc(var(--i) * 4rem), calc(var(--i) * 4rem));
  width: 10rem;
  padding: 1.7rem;
  background: #383838;
  transition: 0.5s;
}
.social-media-3d-menu ul li:hover {
  top: -5.5rem;
  background: var(--clr);
  text-shadow: #fff 0px 0px 5px, 2px 2px 2px rgba(255, 255, 255, 0.04);
}
.social-media-3d-menu ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4rem;
  width: 4rem;
  height: 100%;
  background: #a009f7;
  transform-origin: right;
  transform: skewY(45deg);
  transition: 0.5s;
}
.social-media-3d-menu ul li:hover::before {
  background: var(--clr);
  filter: brightness(0.8);
}
.social-media-3d-menu ul li::after {
  content: attr(data-text);
  position: absolute;
  top: -4rem;
  left: 0;
  width: 100%;
  height: 4rem;
  background: #a009f7;
  transform-origin: bottom;
  transform: skewX(45deg);
  box-shadow: -120px 120px 20px rgba(0, 0, 0, 0.25);
  transition: 1s;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  left: 0.05em;
  padding-left: 1.5rem;
  box-sizing: border-box;
  color: white;
  font-weight: bolder;
}
.social-media-3d-menu ul li:hover::after {
  filter: brightness(0.9);
  background: var(--clr);
  color: white;
  box-shadow: -170px 170px 20px rgba(0, 0, 0, 0.25);
}
.social-media-3d-menu ul li a {
  color: transparent;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  transition: 0.5s;
}
.social-media-3d-menu ul li:hover a {
  color: white;
}
.social-media-3d-menu ul li a span {
  position: absolute;
  top: 0;
  left: -4rem;
  width: 4rem;
  text-align: center;
  height: 100%;
  color: white;
  padding-top: 0.8rem;
  transform-origin: right;
  transform: skewY(45deg);
  transition: 1s;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25em;
}
.social-media-3d-menu ul li a span:hover {
  text-shadow: #fff 0px 0px 5px, 2px 2px 2px rgba(255, 255, 255, 0.04);
}
.social-media-3d-menu ul li:hover a span {
  color: white;
}
.social-media-3d-menu .facebook-list-item {
  background: #1877f2;
}
.social-media-3d-menu .telegram-list-item {
  background: #0088cc;
}
.social-media-3d-menu .email-list-item {
  background: #d93025;
}
.social-media-3d-menu .twitter-list-item {
  background: #1da1f2;
}
.social-media-3d-menu .linkedIn-list-item {
  background: #0a66c2;
}
.social-media-3d-menu .github-list-item {
  background: #181717;
}
.social-media-3d-menu .xing-list-item {
  background: #b7df4b;
}
.social-media-3d-menu .discord-list-item {
  background: #5865f2;
}
.social-media-3d-menu .skype-list-item {
  background: #00aff0;
}
.social-media-3d-menu .signal-list-item {
  background: #3ea6e3;
}

.business-card {
  border: #a009f7 0.3rem outset;
  border-radius: 3rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-color: rgba(242, 215, 255, 0.6705882353);
  max-width: 100%;
  padding: 0.5rem;
  margin: 0.5rem;
}

.warning-paragraph {
  display: none;
  font-size: 1.5rem;
  text-shadow: #fff 0px 0px 5px, #fff 0px 0px 10px, #fff 0px 0px 15px, 2px 2px 2px rgba(255, 255, 255, 0.04);
}

/* Media query for tablets and smaller desktops */
@media screen and (max-width: 1450px) {
  .container {
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .my-files {
    max-width: 30rem;
    min-height: 10rem;
    font-size: x-large;
  }
  .form input,
  .form textarea {
    width: 28rem;
  }
}
/* Media query for tablets and larger smartphones */
@media screen and (max-width: 1100px) {
  #social-media-3d {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .container {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
  .contact-form,
  .my-files {
    padding: 1rem;
    margin: 1.5rem 0.5rem;
    width: 26rem;
  }
  .contact-directly li {
    margin: 0.5rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .form input,
  .form textarea {
    width: 22rem !important;
  }
  .contact-options-list {
    display: flex;
  }
  .business-card img {
    width: 85%;
  }
}
/* Media query for mobile phones */
@media screen and (max-width: 480px) {
  body {
    width: 150%;
  }
  .contact-form,
  .my-files {
    padding: 0.5rem;
    margin: 1.5rem 0.5rem;
    max-width: 23rem;
    font-size: 1rem;
  }
  .contact-form {
    width: 100%;
  }
  .form input,
  .form textarea {
    width: 29rem !important;
    margin: 0 2rem;
  }
  #social-media-3d {
    display: none;
  }
}
/* outer right cyan */
@keyframes colorWaveAnimation {
  0% {
    border-color: rgb(238, 96, 219);
  }
  16.67% {
    border-color: rgb(238, 96, 96);
  }
  33.33% {
    border-color: rgb(138, 41, 230);
  }
  50% {
    border-color: rgb(96, 174, 238);
  }
  66.67% {
    border-color: rgb(51, 51, 235);
  }
  83.33% {
    border-color: rgb(96, 233, 238);
  }
  100% {
    border-color: rgb(68, 240, 105);
  }
}
/* Settings fot the smiley and "hire me" boxes */
.hire-me {
  margin: 1.5rem;
  top: 8rem;
  right: 1rem;
  position: fixed;
  z-index: 0;
  transform: translateY(-50%);
}
.hire-me:hover {
  z-index: 1000;
}
.hire-me:hover .face {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border: 1rem;
}
.hire-me:hover .face::before {
  width: 3.5rem;
  height: 2rem;
  top: 6rem;
  left: 3rem;
  background-color: rgb(248, 86, 210);
  border: rgb(248, 86, 210) 0.5rem solid;
  border-bottom-left-radius: 3rem;
  border-bottom-right-radius: 3rem;
}
.hire-me:hover .face .eye {
  box-shadow: 0.5rem 0.5rem 0.5rem 0.5rem #fff;
}
.hire-me .hire-me-textbox {
  display: inherit;
  position: absolute;
  padding: 1rem;
  max-width: 8rem;
  right: 10rem;
  top: -3rem;
  z-index: 0;
  font-size: larger;
  font-weight: bold;
  color: #fff;
  background-color: #a009f7;
  border-radius: 2rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.hire-me .hire-me-textbox:hover {
  border: 0.1rem solid gray;
  box-shadow: 0rem 0rem 1rem 1rem #a4e9f5;
}
.hire-me .face {
  display: flex;
  position: relative;
  margin: 0 0 0 5rem;
  width: 10rem;
  height: 10rem;
  border: 0.8rem solid rgba(242, 215, 255, 0.6705882353);
  border-radius: 50%;
  background-color: rgba(255, 209, 5, 0.8431372549);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.hire-me .face:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border: 1rem;
}
.hire-me .face::before {
  content: "";
  width: 3rem;
  height: 0.6rem;
  top: 5.5rem;
  left: 2.5rem;
  background-color: rgb(248, 86, 210);
  border: 0.4rem solid rgb(248, 86, 210);
  border-bottom-left-radius: 0rem;
  border-bottom-right-radius: 0rem;
  position: absolute;
  transition: 0.5s;
}
.hire-me .face:hover::before {
  width: 4rem;
  height: 2rem;
  top: 6.5rem;
  left: 2.5rem;
}
.hire-me .face:hover .eye {
  box-shadow: 0.5rem 0.5rem 0.5rem 0.5rem #fff;
}
.hire-me .face .eyes {
  display: flex;
  position: relative;
  top: 1.5rem;
  left: 2rem;
}
.hire-me .face .eyes .eye {
  display: block;
  position: relative;
  background-color: #fff;
  margin: 0 0.25rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}
.hire-me .face .eyes .eye::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  top: 50%;
  left: 1rem;
  background-color: #000000;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

/* Adjust the location and activity of the button "change language" */
.languages {
  padding: 0.8rem;
  top: 70%;
  right: 1.5rem;
  position: fixed;
  z-index: 0;
  transform: translateY(-50%);
  font-size: 6rem;
  border: #a009f7 0.3rem solid;
  border-radius: 50%;
  animation: colorWaveAnimation 6s infinite;
}
.languages img {
  margin: 0 auto;
  width: 3rem;
  height: 3rem;
  display: block;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 50%;
}
.languages:hover {
  z-index: 1000;
  border: 0.3rem #a009f7 inset;
  animation: none;
  background-color: rgba(242, 215, 255, 0.6705882353);
}

/* Settings and design for Back to top button */
.backtotop {
  padding: 0.5rem;
  max-width: 10rem;
  top: 90%;
  right: 1.5rem;
  position: fixed;
  z-index: 0;
  transform: translateY(-50%);
  border: #a009f7 0.3rem solid;
  border-radius: 50%;
  color: #a009f7;
  font-size: 2.5rem;
  animation: colorWaveAnimation 6s infinite;
  text-shadow: #fff 0px 0px 5px, #fff 0px 0px 10px, #fff 0px 0px 15px, 2px 2px 2px rgba(255, 255, 255, 0.04);
}
.backtotop:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border: 0.3rem #a009f7 outset;
  z-index: 1000;
  animation: none;
  background-color: rgba(242, 215, 255, 0.6705882353);
}
.backtotop i {
  color: #a009f7;
}

/* Targeting the ShareThis button classes */
.sticky-share-buttons .st-btn {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.sticky-share-buttons .st-btn:hover {
  background-color: #a009f7;
  color: white;
}

@media screen and (max-width: 1000px) {
  .languages p {
    display: none;
  }
  .languages img {
    margin: 0 auto;
    width: 2rem;
    height: 2rem;
    display: block;
  }
  .languages img:hover {
    width: 3rem;
    height: 3rem;
  }
  .backtotop a {
    text-transform: capitalize;
  }
  .backtotop a .back-to {
    display: none;
  }
  .hire-me {
    transform: translateY(-50%) scale(0.7);
    margin: 1rem;
    top: 6rem;
    right: 0.2rem;
  }
}
/* outer right cyan */
@keyframes dropdown {
  0% {
    max-height: 0;
    opacity: 0;
  }
  100% {
    max-height: 20rem;
    opacity: 1;
  }
}
/* outer right cyan */
.download-files {
  display: flex;
  justify-content: center;
  align-items: center;
}

.all-files {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.all-files img {
  width: 15rem;
  margin: 1rem 1.5rem;
  border: #a009f7 0.5rem outset;
  border-radius: 2rem;
}
.all-files .file-item {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 4rem;
  margin: 1.5rem 0.5rem;
  width: 25rem;
  border: 0.5rem rgba(242, 215, 255, 0.8235294118) solid;
  z-index: 1000;
}
.all-files .file-item:hover {
  border: 0.2rem #a009f7 solid;
}
.all-files .button-div {
  pointer-events: auto;
}
.all-files button a {
  align-items: center;
  justify-content: center;
}
.all-files .file-title {
  margin: 1rem 0;
  font-size: 2rem;
}

@media screen and (max-width: 1000px) {
  .all-files {
    flex-direction: column;
  }
  .all-files .file-item {
    margin: 2rem 0;
  }
}
@media screen and (max-width: 480px) {
  .all-files {
    flex-direction: column;
  }
}
.custom-cursor {
  position: absolute;
  width: 1.5rem; /* Cursor width */
  height: 1.5rem; /* Cursor height */
  border-radius: 50%; /* Make it circular */
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.6); /* Glowing effect */
  pointer-events: none; /* Ensure the cursor doesn't interfere with mouse events */
  transform: translate(-50%, -50%); /* Center the cursor */
  transition: transform 0.1s ease; /* Smooth movement */
}

/* Hide the custom cursor when hovering over <i> elements */
i:hover ~ .custom-cursor {
  display: none; /* Hide the cursor */
}

/* Ensure the cursor is shown again when leaving the icon */
i {
  position: relative;
  z-index: 1; /* Keep icons above the custom cursor */
}

a:hover ~ .custom-cursor {
  display: none; /* Hide the cursor */
}

/* outer right cyan */
#my-timeline-resume {
  text-shadow: 6px 0 6px #a408ff, 5px 5px 5px #d26df7, 0 6px 6px rgba(79, 164, 250, 0.7215686275);
}

.container-menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}
.container-menu ul li {
  cursor: pointer;
}

.container-timeline {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
  text-align: left;
  border-radius: 3rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border: rgba(242, 215, 255, 0.6705882353) 0.2rem outset;
}

.container-timeline:hover {
  border: #a009f7 0.2rem outset;
}

.container-timeline ul li {
  width: 50%;
  height: auto;
  padding: 1.5rem 1rem;
  margin: 7rem 0.7rem;
  background-color: rgba(242, 215, 255, 0.8235294118);
  border-radius: 2rem;
  box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.3607843137);
  z-index: 99;
  position: relative;
}

.titles-wrapper {
  margin: 0.7rem 0.5rem;
}

.timeline-work-experience-container,
.timeline-education-container {
  border-left: 0.5rem outset #a009f7;
  margin: 0 3rem;
  width: 60%;
}
.timeline-work-experience-container ul li,
.timeline-education-container ul li {
  width: 100%;
  border-left: 0.5rem outset #a009f7;
  border-right: 0.5rem outset #a009f7;
  margin-left: -0.5rem;
}

.container-timeline ul li h4 {
  font-size: 1.4rem;
  color: #a009f7;
}

.container-timeline ul li:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.container-timeline ul li:hover .circle {
  box-shadow: inset 0 0 50px #fff, inset 20px 0 80px #f0f, inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff, 0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;
}

.container-timeline ul li h3 {
  font-size: 2rem;
}

.container-timeline ul li i {
  padding: 0.7rem;
  font-size: 2rem;
  color: #fff;
  text-shadow: 6px 0 6px #a408ff, 5px 5px 5px #d26df7, 0 6px 6px rgba(79, 164, 250, 0.7215686275);
  border-radius: 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.container-timeline ul li p {
  padding: 0.5rem;
  margin: 0.5rem;
  font-size: 1.5rem;
}

.container-timeline ul li .circle {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  background-image: linear-gradient(to right, #a009f7, rgb(248, 86, 210));
  position: absolute;
  top: 45%;
  left: -1.5rem;
}

.container-timeline ul li .date {
  font-size: 1.65rem;
  position: absolute;
  top: -3.5rem;
  width: 15rem;
  height: 3rem;
  background-image: linear-gradient(to right, #a009f7, rgb(248, 86, 210));
  border-radius: 2rem;
  color: white;
  text-align: center;
  padding: 0.4rem;
  display: grid;
  place-items: center;
}

@media screen and (max-width: 1400px) {
  .container-timeline {
    flex-direction: column;
  }
  .timeline-work-experience-container,
  .timeline-education-container {
    width: 90%;
  }
}
@font-face {
  font-family: "Kalam";
  src: url("../fonts/kalam-regular-webfont.woff2") format("woff2"), url("../fonts/kalam-regular-webfont.woff") format("woff"), url("../fonts/kalam-regular.ttf") format("truetype");
}
@font-face {
  font-family: "Courgette";
  src: url("../fonts/courgette-regular-webfont.woff2") format("woff2"), url("../fonts/courgette-regular-webfont.woff") format("woff"), url("../fonts/courgette-regular.ttf") format("truetype");
}
@font-face {
  font-family: "Poetsen One";
  src: url("../fonts/poetsenone-regular-webfont.woff2") format("woff2"), url("../fonts/poetsenone-regular-webfont.woff") format("woff"), url("../fonts/poetsenone-regular.ttf") format("truetype");
}/*# sourceMappingURL=style.css.map */