html {
  font-size: 14px;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

:root {
  --bg-color: #1f1f1f;
  --primary-color: #1f1f1f;
  --secondary-color: #222222;
  --text-color: whitesmoke;
  --linear-gradient: linear-gradient(90deg, #7104ff, #04ff92, #7104ff);
  --conic-color1: #3C91E6;
  --conic-color2: #5C946E;
  --line-color: #747474;
  --secondary-text: #2496ed60;
}

.light-mode {
  --bg-color: whitesmoke;
  --text-color: #222222;
  --primary-color: grey;
  --secondary-color: #e0e0e0;
  --linear-gradient: linear-gradient(90deg, #b700ff, #00ff40, #b700ff);
  --conic-color1: #490166;
  --conic-color2: #006e1c;
  --secondary-text: #000000c5;
}

.theme-button,
.light-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100px;
  height: 30px;
  border-radius: 6px;
  color: var(--text-color);
  left: 110%;
  top: 0;
  translate: -50% -50%;
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  background-color: var(--secondary-color);
  border: 1px var(--secondary-color) solid;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  opacity: 1;
  transition: background-color 0.2s, transform .1s ease-in-out;

}

.theme-button:active,
.light-button:active {
  background-color: var(--bg-color);
  transform: scale(0.8);
}

.light-button {
  top: 25%;
  left: 130%;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-color);
  position: relative;
  font-family: 'Montserrat', sans-serif;
}

.main-text {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  font-size: 500;
}

.big-text-name {
  font-size: xx-large;
  background: var(--linear-gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradientMove 5s linear infinite;
}

.name {
  font-size: 50px;
  font-weight: 200;
  font-family: "Libre Barcode 128 Text", sans-serif;
}

.work-title {
  font-size: x-large;
  color: var(--text-color);
}

.big-text {
  font-size: larger;
}

.link {
  color: var(--text-color);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.fancy-text {
  background: var(--linear-gradient);
  -webkit-background-clip: text;
  background-size: 200% auto;
  color: transparent;
  animation: fadeInOutHalf 3s linear infinite, gradientMove 5s linear infinite;
}

.link:hover {
  background: var(--linear-gradient);
  -webkit-background-clip: text;
  background-size: 200% auto;
  color: transparent;
  animation: fadeInOutHalf 3s linear infinite, gradientMove 5s linear infinite;
}

body,
.main,
.main-container,
.tech,
.summary,
.main-projects,
.project-items,
.languages,
.frameworks,
.tools,
.os,
.contact-box {
  transition: background-color .5s, color 0.5s;
}

.main {
  position: absolute;
  left: 50%;
  top: 0%;
  translate: -50%;
  height: fit-content;
  width: calc(100% - 15px);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  border-radius: 10px;
  gap: 3rem;
  margin: 0;
  padding: 4rem 0 0 0;
  z-index: 0;
  background: var(--bg-color);
}

.main-container {
  width: 100%;
  max-width: 320px;
  height: 175px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--secondary-color);
  color: var(--text-color);
  position: relative;
  margin: 0;
  padding: 10px;
  cursor: pointer;
  text-align: center;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.main-container.side-light::after,
.main-container.side-light::before {
  content: '';
  position: absolute;
  height: calc(100% + 2px);
  width: calc(100% + 2px);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 10px;
  opacity: 1;
  animation: fadeIn .5s ease-in-out forwards, spin 6s linear infinite;
}

.main-container:hover.side-light::after,
.main-container:hover.side-light::before {
  opacity: .1;
  animation: fadeOut .5s ease-in-out forwards, spin 6s linear infinite;

}

.main-container-mugshot {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #303030;
  position: relative;
  margin: 0;
  z-index: -1;
}

.main-container-mugshot.side-light::after,
.main-container-mugshot.side-light::before {
  content: '';
  position: absolute;
  height: calc(100% + 2px);
  width: calc(100% + 2px);

  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 50%;
  animation: fadeIn .5s ease-in-out forwards, spin 6s linear infinite;
}

.main-container.side-light::before,
.main-container-mugshot.side-light::before,
.languages.side-light::before {
  filter: blur(1rem);
  opacity: 0.5;
}

.mugshot {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.main-container-mugshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.boxes {
  position: relative;
  height: 50px;
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: expand-gap 2.5s ease-in-out forwards;
  border-bottom: white 1px solid;
  margin: 0;
}

.display-box {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  border-radius: 50%;
  transition: transform .5s;
  display: none;
}

.display-box {
  transition: transform .5s;
  animation: pulse 1s infinite;

}

.static-box:hover {
  transform: scale(1.2);
  animation: pulse 1s infinite;
}

.falling-box-left1 {
  width: 60px;
  height: 60px;
  opacity: 0;
  animation: fall-left1 2s ease-in-out forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.static-box-left1 {
  background-color: red;
}

.falling-box-left2 {
  width: 70px;
  height: 70px;
  opacity: 0;
  animation: fall-left2 2s ease-in-out forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.falling-box-right2 {
  width: 50px;
  height: 50px;
  opacity: 0;
  animation: fall-right2 2s ease-in-out forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.falling-box-right1 {
  width: 50px;
  height: 50px;
  opacity: 0;
  animation: fall-right1 2s ease-in-out forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.box-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box1 {
  animation-delay: 0s;
}

.box2 {
  animation-delay: 0.15s;
}

.box3 {
  animation-delay: 0.2s;
}

.box4 {
  animation-delay: 0.1s;
}

.tech {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  gap: 1rem;
  width: 100%;
  max-width: 480px;
  height: 290px;
  border-radius: 10px;
  padding-top: 1rem;
  padding-left: 1px;
  background-color: var(--secondary-color);
  cursor: pointer;

}

.tech.side-light::after,
.tech.side-light::before {
  content: '';
  position: absolute;
  height: calc(100% + 2px);
  width: calc(100% + 2px);

  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 10px;
  opacity: 1;
  animation: fadeIn .5s ease-in-out forwards, spin 6s linear infinite;
}

.tech.side-light:hover::after,
.tech.side-light:hover::before {
  opacity: .1;
  animation: fadeOut .5s ease-in-out forwards, spin 6s linear infinite;

}

.tech.side-light::before {
  filter: blur(.5rem);
  opacity: 0.2;
}

.languages,
.tools,
.os,
.frameworks {
  position: relative;
  display: flex;
  padding: 0 0 0 1rem;
  gap: .5rem;
  justify-content: start;
  align-content: center;
  border-bottom: 1px solid var(--bg-color);
  margin-bottom: 1rem;
  max-width: 500px;
  background-color: var(--bg-color);
  border-radius: 4px;
  cursor: pointer;
}

.languages:hover::after,
.languages:hover::before,
.tools:hover::after,
.tools:hover::before,
.os:hover::after,
.os:hover::before,
.frameworks:hover::after,
.frameworks:hover::before {
  content: '';
  position: absolute;
  height: 90%;
  width: 60%;

  top: 50%;
  left: 30%;
  translate: -50% -50%;
  z-index: -1;
  animation: 2s pulse linear infinite;
  opacity: .05;
  border-radius: 10px;
  cursor: pointer;
}

.languages:hover::before,
.tools:hover::before,
.os:hover::before,
.frameworks:hover::before {
  filter: blur(.5rem);
  opacity: 0.2;
}

.title {
  color: var(--text-color);
  font-size: large;
  font-weight: 500;
  position: absolute;
  top: -25px;
  left: 5px;
  opacity: 0;
}

.title.show {
  animation: slideInSimpleRight 1s ease-in-out forwards;
  opacity: 1;
}

.tbox {
  width: fit-content;
  height: 15px;
  margin-bottom: 5px;
  margin-top: 5px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  gap: 2px;
  padding: 4px;
  font-weight: 500;
  opacity: 0;
  font-size: 8px;
}

.tbox img {
  width: 10px;
  height: 10px;
}

.tbox.show {
  opacity: 1;
  transform: translateX(-100vw);
  animation: slideIn 1s ease-in-out forwards;

}

.tbox:hover {
  transform: scale(1.5);
  cursor: pointer;
}

.tbox-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 2px;
}

.net {
  background: rgba(81, 43, 212, 0.5);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(81, 43, 212, 1);
}


.javascript {
  background: rgba(247, 222, 30, .6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(247, 222, 30, 1);
}

.linux {
  background: rgba(252, 198, 36, .6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(252, 198, 36, 1);
}

.windows {
  background: rgba(115, 115, 115, .6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(115, 115, 115, 1);

}

.css {
  background: rgba(28, 136, 199, .6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(28, 136, 199, 1);
}

.csharp {
  background: rgba(81, 43, 212, .6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(81, 43, 212, 1);
}

.mysql {
  background: rgba(81, 43, 212, .6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(81, 43, 212, 1);

}

.xunit {
  background: rgba(128, 128, 128, .6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(128, 128, 128, 1);
}

.efcore {
  background: rgba(104, 33, 122, .6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(104, 33, 122, 1);
}

.html {
  background: rgba(227, 79, 38, .6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(227, 79, 38, 1);

}

.docker {
  background: rgba(36, 150, 237, .6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(36, 150, 237, 1);

}

.git {
  background: rgba(45, 186, 78, .6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(45, 186, 78, 1);
}

.azure {
  background: rgba(0, 120, 212, .6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(0, 120, 212, 1);
}

.unity {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(24, 24, 24, 1);
}

.tbox:nth-child(1) {
  animation-delay: 0.5s;
}

.tbox:nth-child(2) {
  animation-delay: 0.4s;
}

.tbox:nth-child(3) {
  animation-delay: 0.3s;
}

.tbox:nth-child(4) {
  animation-delay: 0.2s;
}

.tbox:nth-child(5) {
  animation-delay: 0.1s;
}

.tbox:nth-child(6) {
  animation-delay: 1.45s;
}

.tbox:nth-child(7) {
  animation-delay: 1.35s;
}

.tbox:nth-child(8) {
  animation-delay: 1.25s;
}

.tbox:nth-child(9) {
  animation-delay: 1.15s;
}

.main-about {
  width: 100%;
  max-width: 480px;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 2rem;
  background-color: var(--bg-color);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}

.main-about.side-light::after,
.main-about.side-light::before {
  content: '';
  position: absolute;
  height: calc(100% + 2px);
  width: calc(100% + 2px);

  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 10px;
  animation: fadeIn .5s ease-in-out forwards, spin 6s linear infinite;
}

.main-about.side-light:hover::after,
.main-about.side-light:hover::before {
  opacity: .1;
  animation: fadeOut .5s ease-in-out forwards, spin 6s linear infinite;
}

.main-about.side-light::before,
.languages.side-light::before {
  filter: blur(1rem);
  opacity: 0.5;
}

.title-about,
.title-main,
.title-tech,
.title-contact-big {
  position: absolute;
  color: var(--text-color);
  font-size: xx-large;
  left: 0;
  top: -60px;
  opacity: 0;

}

.summary {
  width: 100%;
  height: 100%;
  padding: 1rem;
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--secondary-color);
  border-radius: 10px;
}

.summary p {
  color: var(--text-color);
  font-size: large;
}

.main-projects {
  width: 100%;
  max-width: 480px;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 2rem;
  border-radius: 10px;
  background-color: var(--secondary-color);
  cursor: pointer;
}

.main-projects.side-light::after,
.main-projects.side-light::before,
.contact-box.side-light::before,
.contact-box.side-light::after {
  content: '';
  position: absolute;
  height: calc(100% + 2px);
  width: calc(100% + 2px);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 10px;
  animation: fadeIn .5s ease-in-out forwards, spin 6s linear infinite;
}

.main-projects.side-light:hover::after,
.main-projects.side-light:hover::before,
.contact-box.side-light:hover::before,
.contact-box.side-light:hover::after {
  opacity: .1;
  animation: fadeOut .5s ease-in-out forwards, spin 6s linear infinite;
}

.main-projects.side-light::before,
.contact-box.side-light::before,
.languages::before {
  filter: blur(1rem);
  opacity: 0.5;
}

.project-items {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
  padding: .1rem;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  gap: .5rem;
  padding: 2rem 0 2rem 0;
  overflow: hidden;
}

.title-projects {
  position: absolute;
  color: var(--text-color);
  font-size: xx-large;
  left: 0;
  top: -50px;
}

.pr-item {
  text-align: center;
  position: relative;
  width: 98%;
  height: 200px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, .5);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.pr-item-sq {
  text-align: center;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(9.3px);
  -webkit-backdrop-filter: blur(9.3px);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.pr-item.show {
  animation: fadeIn 3s linear forwards;
}

.pr-item-sq.show {
  animation: slideInSimple 1s linear forwards;
}

.pr-item:nth-child(1) {
  animation-delay: .1s;
}

.pr-item:nth-child(2) {
  animation-delay: .2s;
}

.pr-item:nth-child(3) {
  animation-delay: .3s;
}

.pr-item:nth-child(4) {
  animation-delay: .4s;
}

.pr-item:nth-child(5) {
  animation-delay: .1s;
}

.pr-item:nth-child(6) {
  animation-delay: .2s;
}

.pr-item:nth-child(7) {
  animation-delay: .3s;
}

.pr-item-sq:nth-child(1) {
  animation-delay: .6s;
}

.pr-item-sq:nth-child(2) {
  animation-delay: .4s;
}

.pr-item-sq:nth-child(3) {
  animation-delay: .2s;
}

.no-select {
  user-select: none;
}

.no-style {
  text-decoration: none;
  color: inherit;
}

.no-style:hover {
  text-decoration: none;
  color: inherit;
}

.pr-item a,
.pr-item-sq a {
  width: 100%;
  height: 100%;
}

.pr-item img,
.pr-item-sq img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: -1px 0px;
  overflow: hidden;
  filter: blur(1px);
  z-index: -1;
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.pr-item img:hover,
.pr-item-sq img:hover {
  filter: blur(0px);
  transform: scale(1.1);
}

.pr-title {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: x-large;
  color: whitesmoke;

  z-index: 1;
  text-shadow: -1px -1px 0px black,
    1px -1px 0px black,
    -1px 1px 0px black,
    1px 1px 0px black;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;

}

.pr-item:hover .pr-title,
.pr-item-sq:hover .pr-title {
  top: -50%;
  opacity: 0;
}

.contact-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  height: 300px;
  margin-bottom: .1rem;
  gap: .5rem;
  width: 100%;
  height: auto;
  max-width: 480px;
  border-radius: 10px;
  background-color: var(--secondary-color);
  cursor: pointer;
}

.subform-div {
  position: relative;
}

#status {
  color: var(--conic-color1);
}

label {
  color: var(--text-color);
  position: absolute;
  left: 50%;
  top: -15px;
  translate: -50% -50%;
}

.form-email {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 0 2rem 0;
}


.form-email input {
  border-radius: 10px;
  height: 35px;
  width: 250px;
  background: var(--text-color);
  color: var(--bg-color);
  border: 1px solid black;
  padding: 5px;
}

.form-email textarea {
  background: var(--text-color);
  color: var(--bg-color);
  border-radius: 10px;
  width: 300px;
  height: 150px;
  padding: 1rem;
  border: 1px solid black;
}

.form-email button {
  border-radius: 10px;
  border: 1px solid black;
  width: 80px;
  background-color: var(--conic-color1);
  color: var(--bg-color);
}

.title-contact {
  position: absolute;
  font-weight: 500;
  font-size: large;
  top: 20px;
  left: 50px;
  color: var(--text-color);
  translate: -50% -50%;
}

.contact-group {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1rem;
  padding-left: 2.4rem;
  color: var(--text-color);
}

.contact-group img {
  width: 20px;
  height: 20px;
}

.slide {
  opacity: 0;
}

.slide.show {
  animation: slideInSimple 1s ease-in-out forwards;
  opacity: 1;
}

.privacy {
  left: 50%;
  top: 100%;
  color: var(--secondary-text);
}

.title-contact-big,
.title-tech,
.title-main {
  display: none;
}

.experience-main {
  display: flex;
  border: red 1px dashed;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: start;
}

.experience-content {
  width: 100%;
  height: 800px;
  max-width: 600px;
  min-width: 400px;
  border: 1px solid yellow;
  background-color: var(--text-color);
  border-radius: 5px;
}



@keyframes spin {
  from {
    --angle: 0deg;
  }

  to {
    --angle: 360deg;
  }

}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: .1;
  }
}

@keyframes borderPath {
  0% {
    border-top-color: black;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  25% {
    border-top-color: transparent;
    border-right-color: black;
  }

  50% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: black;
  }

  75% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: black;
  }

  100% {
    border-top-color: black;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}

@keyframes expand-gap {
  from {
    gap: 0px
  }

  to {
    gap: calc(100% / 4 - 50px);
  }
}

@keyframes fall-left2 {
  0% {
    transform: translateY(-500px);
    opacity: 0;
  }

  70% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  80% {
    transform: translateY(-10px) rotate(-5deg);
    opacity: 1;
  }

  90% {
    transform: translateY(0) rotate(-10deg);
    opacity: 1;
  }

  95% {
    transform: translateY(-5px) rotate(-15deg);
    opacity: 1;
  }

  100% {
    transform: translateY(0px) rotate(-20deg);
    opacity: 1;
  }
}

@keyframes fall-right2 {
  0% {
    transform: translateY(-500px);
    opacity: 0;
  }

  70% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  80% {
    transform: translateY(-10px) rotate(5deg);
    opacity: 1;
  }

  90% {
    transform: translateY(0) rotate(10deg);
    opacity: 1;
  }

  95% {
    transform: translateY(-5px) rotate(15deg);
    opacity: 1;
  }

  100% {
    transform: translateY(0px) rotate(20deg);
    opacity: 1;
  }
}

@keyframes fall-left1 {
  0% {
    transform: translateY(-500px);
    opacity: 0;
  }

  70% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  80% {
    transform: translateY(-5px) rotate(-15deg);
    opacity: 1;
  }

  90% {
    transform: translateY(0) rotate(-30deg);
    opacity: 1;
  }

  95% {
    transform: translateY(-2.5px) rotate(-45deg);
    opacity: 1;
  }

  100% {
    transform: translateY(0px) rotate(-60deg);
    opacity: 1;
  }
}

@keyframes fall-right1 {
  0% {
    transform: translateY(-500px);
    opacity: 0;
  }

  70% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  80% {
    transform: translateY(-5px) rotate(15deg);
    opacity: 1;
  }

  90% {
    transform: translateY(0) rotate(30deg);
    opacity: 1;
  }

  95% {
    transform: translateY(-2px) rotate(45deg);
    opacity: 1;
  }

  97% {
    transform: translateY(-2px) rotate(55deg);
    opacity: 1;
  }

  100% {
    transform: translateY(0px) rotate(60deg);
    opacity: 1;
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

@keyframes slideIn {
  0% {
    transform: translateX(-100vw);
    opacity: 0;
  }

  80% {
    transform: translateX(0);
  }

  85% {
    transform: translateX(-2vw);
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInSimple {
  from {
    transform: translateX(-100vw);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInSimpleRight {
  from {
    transform: translateX(100vw);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes dropFromTop {
  from {
    transform: translateY(-100vh);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeInOutHalf {
  0% {
    opacity: .6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: .6;
  }
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

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

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

@media (min-width: 450px) {

  .tbox {
    height: 28px;
    gap: 4px;
  }

  .tbox .text {
    font-size: 18px;
    font-weight: 400;
  }

  .tbox img {
    width: 20px;
    height: 20px;
  }
}

@media (min-width: 768px) {

  html {
    font-size: 16px;
  }

  .title-contact {
    opacity: 0;
  }

  .main-container::before,
  .main-container::after,
  .tech::before,
  .tech::after,
  .main-about::before,
  .main-about::after,
  .project-items::before,
  .project-items::after,
  .main-projects::before,
  .main-projects::after,
  .main-container-mugshot::before,
  .main-container-mugshot::after,
  .contact-box::before,
  .contact-box::after {
    background-image: conic-gradient(from var(--angle), transparent, var(--conic-color1), transparent, var(--conic-color2));
  }

  .form-email {
    gap: 3rem;
    padding: 4rem 0 4rem 0;
    font-size: larger;
  }

  .form-email textarea {
    width: 500px;
    padding: 1rem;
  }

  .form-email button {
    width: 100px;
    height: 40px;
  }

  .privacy {
    left: 50%;
    top: 100%;
    color: var(--secondary-text);
  }

  .title-contact-big,
  .title-tech,
  .title-main,
  .title-about,
  .title-projects {
    display: block;
    opacity: 0;
  }

  .title-contact-big.show,
  .title-tech.show,
  .title-main.show,
  .title-about.show,
  .title-projects.show {
    animation: slideInSimple 1.8s ease-in-out forwards;
  }

  .main-container {
    text-align: center;
  }

  .title-contact-big {
    top: -20px;
  }

  .main {
    gap: 8rem;
    padding-top: 50px;
  }

  .main-container-mugshot {
    width: 300px;
    height: 300px;
  }

  .name {
    font-size: 50px;
  }

  .tech,
  .main-about,
  .main-projects,
  .contact-box {
    max-width: clamp(800px, 80%, 1000px);
  }

  .languages,
  .tools,
  .os,
  .frameworks {
    margin: 0;
  }

  .tech {
    padding: 0;
  }

  .title {
    left: 525px;
    top: 50%;
    font-size: xx-large;
    font-weight: 400;
    translate: 0% -50%;
  }

  .tbox {
    height: 30px;
    gap: 4px;
  }

  .tbox .text {
    font-size: 18px;
    font-weight: 400;
  }

  .tbox img {
    width: 20px;
    height: 20px;
  }

  .pr-item {
    width: 350px;
    height: 350px;

  }

  .pr-item img {
    filter: blur(2px);
  }

  .pr-item:nth-child(4) img {
    object-position: -100px 0px;
  }

  .pr-item:nth-child(5) img {
    object-position: -140px 0px;
  }

  .pr-item:nth-child(7) img {
    object-position: -150px 0px;
  }

  .pr-title {
    font-size: xx-large;
  }

  .title-about,
  .title-projects,
  .title-main,
  .title-tech {
    font-size: 30px;
    left: -160px;
    top: -60px;
  }

  .title-contact-big {
    top: -50px;
    left: -160px;
  }

  .section-line {
    left: -198px;
    opacity: 0;
  }

  .section-dot {
    left: -200px;
    opacity: 0;
  }

  .tech .section-line {
    position: absolute;
    width: 2px;
    border: var(--line-color) 1px solid;
    height: 150%;
    top: -20px;
    background-color: var(--line-color);
  }

  .tech .section-dot {
    position: absolute;
    width: 8px;
    border: var(--line-color) 1px solid;
    height: 8px;
    border-radius: 50%;
    top: -40px;
    background-color: var(--line-color);
  }

  .tech .section-line {
    position: absolute;
    width: 2px;
    border: var(--line-color) 1px solid;
    height: 138%;
    top: -10px;
    background-color: var(--line-color);
  }

  .main-about .section-dot {
    position: absolute;
    width: 8px;
    border: var(--line-color) 1px solid;
    height: 8px;
    border-radius: 50%;
    top: -40px;
    background-color: var(--line-color);
  }

  .main-about .section-line {
    position: absolute;
    width: 2px;
    border: var(--line-color) 1px solid;
    height: calc(100% + 115px);
    top: -15px;
    background-color: var(--line-color);
  }

  .main-projects .section-line {
    position: absolute;
    width: 2px;
    border: var(--line-color) 1px solid;
    height: calc(100% + 100px);
    top: -10px;
    background-color: var(--line-color);
  }

  .main-projects .section-dot {
    position: absolute;
    width: 8px;
    border: var(--line-color) 1px solid;
    height: 8px;
    border-radius: 50%;
    top: -40px;
    background-color: var(--line-color);
  }

  .contact-box .section-line {
    position: absolute;
    width: 2px;
    border: var(--line-color) 1px solid;
    height: 100%;
    top: 0px;
    background-color: var(--line-color);
  }

  .contact-box .section-dot {
    position: absolute;
    width: 8px;
    border: #303030 1px solid;
    height: 8px;
    border-radius: 50%;
    top: -25px;
    background-color: var(--line-color);
  }

  .section-line.show {
    background-size: 200% auto;
    background-image: var(--linear-gradient);
    color: transparent;
    animation: gradientMove 5s linear infinite;
    border-image-slice: 1;
    width: 4px;
    border-radius: 10px;
  }

  .section-dot.show {
    background-size: 200% auto;
    background-image: var(--linear-gradient);

    color: transparent;
    animation: gradientMove 5s linear infinite;
    border-image-slice: 1;
  }


  .section-line.show {
    background-size: 200% auto;
    background-image: var(--linear-gradient);
    color: transparent;
    border-image-slice: 1;
    width: 4px;
    animation: slideInSimple 2s ease-in-out forwards, gradientMove 5s linear infinite;

  }

  .section-dot.show {
    background-size: 200% auto;
    background-image: var(--linear-gradient);
    color: transparent;
    border-image-slice: 1;
    animation: slideInSimple 2s ease-in-out forwards, gradientMove 5s linear infinite;

  }


}

@media (min-width: 2560px) {

  .title-about,
  .title-projects,
  .title-main,
  .title-tech,
  .title-contact-big {
    left: -360px;
    opacity: 0;

  }

  .main-container {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .main-container::before,
  .main-container::after,
  .tech::before,
  .tech::after,
  .main-about::before,
  .main-about::after,
  .project-items::before,
  .project-items::after,
  .main-projects::before,
  .main-projects::after {
    background-image: conic-gradient(from var(--angle), transparent, var(--conic-color1), transparent, var(--conic-color2));
  }

  .privacy {
    left: 50%;
    top: 100%;
    color: var(--secondary-text);
  }

  .pr-item:nth-child(1) {
    animation-delay: .1s;
  }

  .pr-item:nth-child(2) {
    animation-delay: .2s;
  }

  .pr-item:nth-child(3) {
    animation-delay: .3s;
  }

  .pr-item:nth-child(4) {
    animation-delay: .4s;
  }

  .pr-item:nth-child(5) {
    animation-delay: .1s;
  }

  .pr-item:nth-child(6) {
    animation-delay: .2s;
  }

  .pr-item:nth-child(7) {
    animation-delay: .3s;
  }

  .pr-item.show {
    width: 300px;
    height: 300px;
    animation: fadeIn 3s ease-in-out forwards;
  }

  .title-about.show,
  .title-projects.show,
  .title-main.show,
  .title-tech.show,
  .title-contact-big.show {
    left: -360px;
    animation: slideInSimple 1.8s ease-in-out forwards;
  }

  .title-contact-big,
  .title-tech,
  .title-main {
    display: block;
  }

  .section-line {
    left: -400px;
  }

  .section-dot {
    left: -402px;
  }

  .section-line.show {
    background-size: 200% auto;
    background-image: var(--linear-gradient);
    color: transparent;
    border-image-slice: 1;
    width: 4px;
    animation: slideInSimple 2s ease-in-out forwards, gradientMove 5s linear infinite;
  }

  .section-dot.show {
    background-size: 200% auto;
    background-image: var(--linear-gradient);
    color: transparent;
    border-image-slice: 1;
    animation: slideInSimple 2s ease-in-out forwards, gradientMove 5s linear infinite;

  }
}

@media (min-width: 1028px) and (max-width: 1440px) {

  .privacy {
    left: 50%;
    top: 100%;
    color: var(--secondary-text);
  }

  .main-container {
    text-align: center;
  }

  .main-container::before,
  .main-container::after,
  .tech::before,
  .tech::after,
  .main-about::before,
  .main-about::after,
  .project-items::before,
  .project-items::after,
  .main-projects::before,
  .main-projects::after,
  .contact-box::before,
  .contact-box::after {
    background-image: conic-gradient(from var(--angle), transparent, var(--conic-color1), transparent, var(--conic-color2));
  }

  .title-about,
  .title-projects,
  .title-main,
  .title-tech,
  .title-contact-big {
    left: -60px;
  }

  .title-about.show,
  .title-projects.show,
  .title-main.show,
  .title-tech.show,
  .title-contact-big.show {
    left: -60px;
    animation: slideInSimple 1.8s ease-in-out forwards;
  }

  .title-contact-big.show,
  .title-tech,
  .title-main {
    display: block;
  }

  .pr-item:nth-child(1) {
    animation-delay: .1s;
  }

  .pr-item:nth-child(2) {
    animation-delay: .2s;
  }

  .pr-item:nth-child(3) {
    animation-delay: .3s;
  }

  .pr-item:nth-child(4) {
    animation-delay: .4s;
  }

  .pr-item:nth-child(5) {
    animation-delay: .1s;
  }

  .pr-item:nth-child(6) {
    animation-delay: .2s;
  }

  .pr-item:nth-child(7) {
    animation-delay: .3s;
  }

  .pr-item.show {
    width: 300px;
    height: 300px;
    animation: fadeIn 2s ease-in-out forwards;
  }

  .section-line {
    opacity: 0;
    left: -80px;
    border-radius: 10px;
  }

  .section-dot {
    opacity: 0;
    left: -82px;
  }

  .section-line.show {
    background-size: 200% auto;
    background-image: var(--linear-gradient);
    color: transparent;
    border-image-slice: 1;
    width: 4px;
    animation: slideInSimple 2s ease-in-out forwards, gradientMove 5s linear infinite;
  }

  .section-dot.show {
    background-size: 200% auto;
    background-image: var(--linear-gradient);
    color: transparent;
    border-image-slice: 1;
    animation: slideInSimple 2s ease-in-out forwards, gradientMove 5s linear infinite;
  }
}

@media (min-width: 769px) and (max-width: 1028px) {

  .title-about,
  .title-projects,
  .title-main,
  .title-tech,
  .title-contact-big {
    left: 0px;
  }

  .main-container::before,
  .main-container::after,
  .tech::before,
  .tech::after,
  .main-about::before,
  .main-about::after,
  .project-items::before,
  .project-items::after,
  .main-projects::before,
  .main-projects::after,
  .contact-box::before,
  .contact-box::after {
    background-image: conic-gradient(from var(--angle), transparent, var(--conic-color1), transparent, var(--conic-color2));
  }

  .main-container {
    text-align: center;
  }

  .title-tech {
    display: block;
  }

  .title-main {
    display: none;
  }

  .section-line {
    left: -20px;
    display: none;
  }

  .section-dot {
    left: -23px;
    display: none;
  }

  .pr-item:nth-child(1) {
    animation-delay: .1s;
  }

  .pr-item:nth-child(2) {
    animation-delay: .2s;
  }

  .pr-item:nth-child(3) {
    animation-delay: .3s;
  }

  .pr-item:nth-child(4) {
    animation-delay: .4s;
  }

  .pr-item:nth-child(5) {
    animation-delay: .1s;
  }

  .pr-item:nth-child(6) {
    animation-delay: .2s;
  }

  .pr-item:nth-child(7) {
    animation-delay: .3s;
  }

  .privacy {
    left: 50%;
    top: 100%;
  }
}