* {
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  color: #222222;
  scroll-behavior: smooth;
}

body {
  background-color: #f7f7f7;
  padding-top: 3rem;
}

a {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a,
.contact-title {
  transition: 0.2s ease;
}

a:hover,
.contact-title:hover {
  color: #C2CA44;
}

/* Background */
.bg {
  position: fixed;
  inset: 0;
  filter: saturate(1.2);
  z-index: -10;

  transform: translate(calc(var(--mx, 0px) * 1px), calc(var(--my, 0px) * 1px));

  transition: transform 0.15s ease-out;
}

/* базовый blob */
.blob {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;

  /* главное — НЕ сплошной цвет */
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 30%), radial-gradient(circle at 70% 60%, currentColor, rgba(0, 0, 0, 0) 100%);

  filter: blur(110px);
  mix-blend-mode: screen;

  animation: float 1s infinite ease-in-out;
}

.b1 {
  color: #68fa00;
  top: 20%;
  left: 25%;
  animation-duration: 15s;
}

.b2 {
  color: #e5ff00;
  top: 35%;
  left: 55%;
  animation-duration: 10s;
}

.b3 {
  color: #00bbff;
  top: 55%;
  left: 35%;
  animation-duration: 12s;
}

.b4 {
  color: #f12cb6;
  top: 45%;
  left: 65%;
  animation-duration: 25s;
}

.glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
}

/* движение без “петли” по ощущениям */
@keyframes float {
  0% {
    transform: translate(-80px, -60px) scale(1);
  }

  25% {
    transform: translate(90px, -40px) scale(1.15);
  }

  50% {
    transform: translate(60px, 90px) scale(1.05);
  }

  75% {
    transform: translate(-90px, 70px) scale(1.2);
  }

  100% {
    transform: translate(-80px, -60px) scale(1);
  }
}

/* /Background */

.pc {
  display: block;
}

.mobile {
  display: none;
}

.container {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1200px;
  height: 89vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.trilabra {
  font-family: inter;
  text-align: center;
  width: 50%;
  padding-top: 15px;
}

.trilabra.mobile {
  margin-top: 5vh;
  text-align: left;
  width: 100%;
}

.site-logo-container {
  height: 6em;
}

.site-logo {
  width: 60px;
  height: 71.27px;
  margin-bottom: 2em;
  max-height: 6em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.site-logo.changed {
  width: 110px;
  /* height: 71.27px; */
}

.trilabra p {
  line-height: 25px;
}

.trilabra-logo {
  width: 100px;
  margin-bottom: 15px;
}

.name {
  margin-bottom: 1em;
}

.profession {
  margin-bottom: 0.5em;
}

.contacts {
  display: block;
  margin-bottom: 0.5em;
}

.contact-element {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.section-header {
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.portfolio-shop-link-logos {
  margin-top: 10px;
  list-style: none;

  li {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
  }
}

.portfolio-shop-link-logos img {
  width: 20px;
  height: auto;
}

.contact-link,
.portfolio-link,
.pet-link {
  margin-bottom: 0.5em;
}

.homepage__trilabra-authorship {
  font-size: 14px;
  margin-top: 8px;
}

.github-link {
  margin-top: 5vh;
}

.github-img {
  width: 40px;
}

/* Flying alien and austronaut */
.floating-objects {
  position: fixed;
  right: 28%;
  top: 60%;
  transform: translateY(-50%);
  display: flex;
  gap: 40px;
  pointer-events: none;
  z-index: 100;
}

.floating {
  width: 5rem;
  display: block;
  animation: float 8s ease-in-out infinite;
}

.astronaut {
  position: relative;
  top: -20px;
  animation-delay: 2s;
}

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

/* Задаем переменную для сдвига blobs от ширины экрана */
.bg {
  --shift-x: 0px;
  position: fixed;
  inset: 0;
  transform: translateX(var(--shift-x));
}

@media (max-width: 900px) {
  /* Сдвигаем blobs  */
  .bg {
    --shift-x: -350px;
  }

  .pc {
    display: none;
  }

  .mobile {
    display: block;
  }

  .container {
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 7vh;
    height: auto;
    margin-bottom: 10vh;
  }

  .trilabra-logo {
    width: 75px;
    margin-bottom: 5px;
  }

  .floating-objects {
    right: 20%;
    top: 90%;
  }
}

@media (max-width: 600px) {
  /* Сдвигаем blobs */
  .bg {
    --shift-x: -400px;
  }
}

@media (max-width: 500px) {

  .webdev {
    width: 100%;
  }
}

@media (max-width: 500px) {
  /* Сдвигаем blobs */
  .bg {
    --shift-x: -600px;
  }
}