@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@800&display=swap');

:root {
  --bg-color: #f9f9fd;
  --text-color: #303034;
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Work Sans', 'SF Pro Display', sans-serif;
  font-weight: 800;
  background-color: var(--bg-color);
  overflow-x: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  width: clamp(500px, 40vw, 1000px);
  margin: 250px 0 200px;
  margin-left: 16vw;
  transition: transform 0.16s;
  will-change: transform;
}

[data-reveal] {
  will-change: transform;
}

.color-scheme-selector {
  position: absolute;
  top: -1px;
  left: 56.5%;
  width: 17.5%;
  height: 3.3vw;
  min-height: 40px;
  z-index: 10;
  transform: translateY(-100%) translateX(-30px);
  opacity: 0.1;
  animation: tremas 0.4s 0.3s 1 forwards;
}

.color-scheme-selector input {
  display: none;
}

.color-scheme-selector input+label {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: transparent;
  outline: 0px solid transparent;
  border-radius: 2vw;
  cursor: pointer;
  transition: 0.2s;
}

.color-scheme-selector input:hover+label {
  background-color: rgba(200, 200, 210, 0.5);
  outline: none;
}

.color-scheme-selector input+label::after,
.color-scheme-selector input+label::before {
  content: '';
  position: absolute;
  top: 0.3vw;
  left: 0.3vw;
  height: calc(100% - 0.6vw);
  width: calc(49% - 0.6vw);
  background-color: var(--text-color);
  border-radius: 1.4vw;
  transition: 0.2s;
}

.color-scheme-selector input+label::before {
  left: initial;
  right: 0.3vw;
  transition: 0.2s ease-out;
}

.color-scheme-selector input:hover+label::before {
  opacity: 0.05;
}

.color-scheme-selector input:hover+label::after {
  width: calc(55% - 0.6vw);
}

.color-scheme-selector input:active+label::after {
  width: calc(70% - 0.6vw);
}

.color-scheme-selector input:checked+label::after {
  transform-origin: right;
  left: calc(100% - 0.3vw);
  transform: translateX(-100%);
}

.color-scheme-selector input:checked+label::before {
  right: calc(100% - 0.3vw);
  transform: translateX(100%);
}

svg {
  overflow: visible;
}

text {
  width: 100%;
  fill: var(--text-color);
  cursor: default;
}

a {
  position: relative;
  line-height: 0em;
  text-decoration: none;
}

a text {
  cursor: pointer;
  transition: transform 0.1s;
  transform-origin: right;
}

a:hover text {
  fill: blue;
  transform: translateX(1px);
}

a:active text {
  fill: blue;
}

a[target="_blank"]::after {
  content: '';
  display: flex;
  position: absolute;
  left: calc(100% + 20px);
  top: 50%;
  opacity: 0;
  transition: 0.1s;
  width: 10vw;
  height: 76%;
  mask: url(/img/external.svg);
  -webkit-mask: url(/img/external.svg);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background-color: blue;
  transform: translate(-20px, -50%);
}

a#back::after {
  content: '';
  display: flex;
  position: absolute;
  top: 50%;
  opacity: 0;
  transition: 0.1s;
  width: 10vw;
  right: calc(100% + 20px);
  height: 81%;
  margin-top: 0.1%;
  mask: url(/img/back.svg);
  -webkit-mask: url(/img/back.svg);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  background-color: blue;
  transform: translate(20px, -50%) scaleX(-1);
}

a[target="_blank"]:hover::after {
  transform: translate(0, -50%);
  opacity: 1;
}

a#back:hover text {
  transform: translateX(-1px);
}

a#back:hover::after {
  transform: translate(0, -50%) scaleX(-1);
  opacity: 1;
}

#webdoy::after {
  margin-top: 0.5%;
  height: 84%;
}

#iconic_com::after {
  margin-top: 0.2%;
  height: 72%;
}

#synapse::after {
  margin-top: 0.2%;
  height: 72%;
}

#komento::after {
  height: 85%;
}

#pulp::after {
  margin-top: 0.6%;
  height: 82%;
}

#kul_vibez::after {
  margin-top: 1.5%;
  height: 71%;
}

#art_disco::after {
  margin-top: 0.3%;
  height: 73%;
}

#consignity::after {
  margin-top: 0.3%;
  height: 83%;
}

#dribbble::after {
  background-color: #ea4c89;
  margin-top: -0.2%;
}

#linkedin::after {
  background-color: #0a66c2;
  margin-top: -0.2%;
}

#telegram::after {
  background-color: #1c93e3;
  height: 82%;
  margin-top: 0.1%;
}

#cv::after {
  margin-top: 0.7%;
}

#dribbble:hover text {
  fill: #ea4c89;
}

#linkedin:hover text {
  fill: #0a66c2;
}

#telegram:hover text {
  fill: #1c93e3;
}

#dribbble:active text {
  fill: #ea4c89;
}

#linkedin:active text {
  fill: #0a66c2;
}

#telegram:active text {
  fill: #1c93e3;
}

@media screen and (max-width: 1247px) {
  .color-scheme-selector input+label {
    border-radius: 30px;
  }

  .color-scheme-selector input+label::after,
  .color-scheme-selector input+label::before {
    border-radius: 30px;
  }
}

@media screen and (max-width: 750px) {
  body {
    padding: 30px;
  }

  .container {
    width: 100%;
    margin: 50px 0 0;
    margin-left: 0;
  }

  span,
  a {
    padding: 2px 0;
  }

  a[target="_blank"]::after {
    content: none;
    display: none;
  }

  .color-scheme-selector {
    height: 7vw;
    min-height: 0px;
  }

  .color-scheme-selector input+label {
    border-radius: 3.8vw;
  }

  .color-scheme-selector input+label::after,
  .color-scheme-selector input+label::before {
    border-radius: 3.8vw;
  }
}

@media (any-pointer: coarse) {
  body {
    touch-action: manipulation;
  }

  a:hover text {
    transform: none;
  }
}

@keyframes tremas {
  from {
    opacity: 0.1;
    transform: translateY(-100%) translateX(-30px);
  }

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