@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
.box-wrapper, .language .languages, .sections {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0%;
}

.box-wrapper .call-me .call-me__button:hover, .page__right-side .screen__figcaption button:hover, .page__left-side .page__button:not(.page__button_active):hover, .menu .menu__button:not(.menu__button_active):hover {
  cursor: pointer;
  background-color: #e5e3e3;
  opacity: 1;
  border: 1.5px grey solid transparent;
  box-shadow: 1px 5px 2px #8c8c8c;
  background-image: linear-gradient(0deg, #e5e3e3 50%, #a8a8a8 50%);
  background-size: 4px 4px;
}

.preloader {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-image: url(../assets/background/MyPortfolio1.jpg);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
  transition: 0.5s;
}

.sections {
  transition: ease-in-out 0.8s, opacity ease-in-out 0.8s;
  width: 100vw;
  height: calc(100% - 70px);
  overflow: hidden;
}

.start-page {
  display: flex;
}

.inspiration-page {
  overflow-y: scroll;
}

.body {
  visibility: hidden;
  overflow: hidden;
  margin: 0;
  background-image: url(../assets/background/MyPortfolio1.jpg);
}
.body .sections {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}
.body .visible {
  visibility: visible;
  opacity: 1;
}

.menu-mobile {
  width: 100vw;
  height: 70px;
  font-size: 2.2em;
  user-select: none;
  background-color: #b168e8;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  font-family: "Nunito", Arial, sans-serif;
  display: none;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.menu {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu .menu__button {
  width: 24%;
  height: 70px;
  transition: all 0.1s linear;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  color: #230b25;
  font-family: "Nunito", Arial, sans-serif;
  font-size: 2.2em;
  user-select: none;
}
.menu .menu__button:not(.menu__button_active):hover {
  transition: 0.2s;
}
.menu .menu__button:not(.menu__button_active):active {
  box-shadow: 0 3px 0 #8c8c8c;
  transform: translateY(5px);
}
.menu .menu__button_active {
  background: #b168e8;
  border: 1.5px grey solid;
}

.clock {
  box-shadow: inset 0 0 0 0.02em #000;
  display: flex;
  border-radius: 0.5em;
  position: absolute;
  font-size: 250px;
  overflow: hidden;
  height: 1em;
  width: 1em;
  margin-top: 4%;
  margin-left: 5%;
  z-index: 1;
}

.clock::after {
  content: "";
  background-color: #fff;
  border-radius: 0.5em;
  margin-left: -0.5em;
  margin-top: -0.5em;
  position: absolute;
  font-size: 0.01em;
  display: block;
  height: 1em;
  width: 1em;
  left: 50%;
  top: 50%;
}

.clock__hand-container, .clock__hand, .clock__stroke {
  margin-left: -0.5em;
  margin-top: -0.5em;
  font-size: inherit;
  position: absolute;
  display: block;
  height: 1em;
  width: 1em;
  left: 50%;
  top: 50%;
}

.clock__stroke::after {
  content: "";
  border-radius: 0 0 0.02em 0.02em;
  background-color: #000;
  margin-left: -0.01em;
  position: absolute;
  display: block;
  height: 0.05em;
  width: 0.02em;
  top: 0.02em;
  left: 50%;
}

.clock__stroke--small::after {
  content: "";
  border-radius: 0 0 0.0125em 0.0125em;
  height: 0.025em;
  width: 0.015em;
}

.clock__stroke--1 {
  transform: rotate(6deg);
}

.clock__stroke--2 {
  transform: rotate(12deg);
}

.clock__stroke--3 {
  transform: rotate(18deg);
}

.clock__stroke--4 {
  transform: rotate(24deg);
}

.clock__stroke--5 {
  transform: rotate(30deg);
}

.clock__stroke--6 {
  transform: rotate(36deg);
}

.clock__stroke--7 {
  transform: rotate(42deg);
}

.clock__stroke--8 {
  transform: rotate(48deg);
}

.clock__stroke--9 {
  transform: rotate(54deg);
}

.clock__stroke--10 {
  transform: rotate(60deg);
}

.clock__stroke--11 {
  transform: rotate(66deg);
}

.clock__stroke--12 {
  transform: rotate(72deg);
}

.clock__stroke--13 {
  transform: rotate(78deg);
}

.clock__stroke--14 {
  transform: rotate(84deg);
}

.clock__stroke--15 {
  transform: rotate(90deg);
}

.clock__stroke--16 {
  transform: rotate(96deg);
}

.clock__stroke--17 {
  transform: rotate(102deg);
}

.clock__stroke--18 {
  transform: rotate(108deg);
}

.clock__stroke--19 {
  transform: rotate(114deg);
}

.clock__stroke--20 {
  transform: rotate(120deg);
}

.clock__stroke--21 {
  transform: rotate(126deg);
}

.clock__stroke--22 {
  transform: rotate(132deg);
}

.clock__stroke--23 {
  transform: rotate(138deg);
}

.clock__stroke--24 {
  transform: rotate(144deg);
}

.clock__stroke--25 {
  transform: rotate(150deg);
}

.clock__stroke--26 {
  transform: rotate(156deg);
}

.clock__stroke--27 {
  transform: rotate(162deg);
}

.clock__stroke--28 {
  transform: rotate(168deg);
}

.clock__stroke--29 {
  transform: rotate(174deg);
}

.clock__stroke--30 {
  transform: rotate(180deg);
}

.clock__stroke--31 {
  transform: rotate(186deg);
}

.clock__stroke--32 {
  transform: rotate(192deg);
}

.clock__stroke--33 {
  transform: rotate(198deg);
}

.clock__stroke--34 {
  transform: rotate(204deg);
}

.clock__stroke--35 {
  transform: rotate(210deg);
}

.clock__stroke--36 {
  transform: rotate(216deg);
}

.clock__stroke--37 {
  transform: rotate(222deg);
}

.clock__stroke--38 {
  transform: rotate(228deg);
}

.clock__stroke--39 {
  transform: rotate(234deg);
}

.clock__stroke--40 {
  transform: rotate(240deg);
}

.clock__stroke--41 {
  transform: rotate(246deg);
}

.clock__stroke--42 {
  transform: rotate(252deg);
}

.clock__stroke--43 {
  transform: rotate(258deg);
}

.clock__stroke--44 {
  transform: rotate(264deg);
}

.clock__stroke--45 {
  transform: rotate(270deg);
}

.clock__stroke--46 {
  transform: rotate(276deg);
}

.clock__stroke--47 {
  transform: rotate(282deg);
}

.clock__stroke--48 {
  transform: rotate(288deg);
}

.clock__stroke--49 {
  transform: rotate(294deg);
}

.clock__stroke--50 {
  transform: rotate(300deg);
}

.clock__stroke--51 {
  transform: rotate(306deg);
}

.clock__stroke--52 {
  transform: rotate(312deg);
}

.clock__stroke--53 {
  transform: rotate(318deg);
}

.clock__stroke--54 {
  transform: rotate(324deg);
}

.clock__stroke--55 {
  transform: rotate(330deg);
}

.clock__stroke--56 {
  transform: rotate(336deg);
}

.clock__stroke--57 {
  transform: rotate(342deg);
}

.clock__stroke--58 {
  transform: rotate(348deg);
}

.clock__stroke--59 {
  transform: rotate(354deg);
}

.clock__hand--hour::after {
  content: "";
  border-radius: 0.015em 0.015em 0.01em 0.01em;
  background-color: #000;
  margin-bottom: -0.02em;
  margin-left: -0.025em;
  font-size: inherit;
  position: absolute;
  display: block;
  height: 0.25em;
  width: 0.05em;
  bottom: 50%;
  left: 50%;
}

.clock__hand--minute::after {
  content: "";
  border-radius: 0.012em 0.012em 0.01em 0.01em;
  background-color: #000;
  margin-bottom: -0.02em;
  margin-left: -0.015em;
  font-size: inherit;
  position: absolute;
  display: block;
  height: 0.4em;
  width: 0.03em;
  bottom: 50%;
  left: 50%;
}

.clock__hand--second::after {
  content: "";
  border-radius: 0.01em 0.01em 0.005em 0.005em;
  background-color: #f00;
  margin-bottom: -0.02em;
  margin-left: -0.005em;
  font-size: inherit;
  position: absolute;
  display: block;
  height: 0.46em;
  width: 0.01em;
  bottom: 50%;
  left: 50%;
}

.language {
  display: flex;
  gap: 15px;
  flex-direction: column;
  position: absolute;
  right: 3vw;
  top: 5vh;
}
.language .languages {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: url(../assets/icons/bel-lang.png);
  border: none;
  z-index: 3;
}
.language .language__eng {
  background-image: url(../assets/icons/eng-lang.png);
}
.language .language__ru {
  background-image: url(../assets/icons/rus-lang.png);
}
.language .language__lt {
  background-image: url(../assets/icons/lt-lang.jpg);
}
.language .languages:not(.language_active):hover {
  cursor: pointer;
}
.language .languages:not(.language_active):active {
  transform: translateY(5px);
}

.girl {
  position: absolute;
  display: flex;
  bottom: 0%;
  left: calc(50vw - 325px);
  width: 650px;
  z-index: 0;
}

.info {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  gap: 3vh;
  margin: 0 auto;
  width: 60vw;
  color: black;
  font-size: 2.2em;
  line-height: 130%;
  font-family: "Nunito", Arial, sans-serif;
  text-shadow: 0px 1px 1px #8c8c8c;
  user-select: none;
  z-index: 1;
}
.info p {
  margin: 0%;
}

.info__button {
  font-family: "Nunito", Arial, sans-serif;
  background-image: linear-gradient(0deg, #e5e3e3 50%, #c5c5c5 50%);
  background-size: 4px 4px;
  font-size: 0.8em;
  width: 180px;
  height: 50px;
  box-shadow: 1px 5px 2px #8c8c8c;
  cursor: pointer;
  transition: all 0.1s linear;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  border: 1px gray solid;
  margin-bottom: 10px;
  z-index: 1;
}

.info__button:active {
  box-shadow: 0 3px 0 #8c8c8c;
  transform: translateY(5px);
}

.info__button:hover {
  background: #b168e8;
}

.links {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: -80px;
  bottom: 0;
  border: 1.5px rgb(17, 17, 17) solid;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background-image: linear-gradient(0deg, #e5e3e3 50%, #c5c5c5 50%);
  background-size: 4px 4px;
  width: 80px;
  text-align: center;
  box-shadow: -1px 5px 2px #8c8c8c;
  transition: 0.5s;
  z-index: 5;
}

.links__img {
  width: 70%;
  padding: 10px;
}

.links_appear {
  right: 0px;
}

/*--------------PROJECTS--------------*/
.page {
  display: flex;
  flex-direction: row;
  width: 90vw;
  margin-left: 5vw;
}

.page__left-side {
  display: flex;
  flex-direction: column;
  gap: 3vh;
  margin-top: 10vh;
}
.page__left-side .page__go-project {
  display: none;
}
.page__left-side .page__button {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  width: 15vw;
  height: 8vh;
  font-family: "Nunito", Arial, sans-serif;
  font-size: 1.1em;
  border: 2px gray solid;
  user-select: none;
  box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2);
}
.page__left-side .page__button:not(.page__button_active):active {
  box-shadow: 0 4px 0 #8c8c8c;
  transform: translateY(7px);
  transition: 0.3s;
}
.page__left-side .page__button_active {
  background: #b168e8;
  border: 1.5px grey solid;
  box-shadow: 10px 10px 10px 2px rgba(34, 60, 80, 0.2) inset;
}

.page__right-side {
  margin-top: 3vh;
}
.page__right-side .screen {
  margin: 0%;
  position: absolute;
  display: flex;
  visibility: hidden;
  gap: 3vh;
  opacity: 0;
  flex-direction: column;
  transition: ease-in-out 0.8s, opacity ease-in-out 0.8s;
  transform: scale(0.9);
}
.page__right-side .screen_active {
  visibility: visible;
  opacity: 1;
}
.page__right-side .screen__screenshot {
  width: 70vw;
}
.page__right-side .screen__figcaption {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: "Nunito", Arial, sans-serif;
  font-size: 1.5em;
}
.page__right-side .screen__figcaption button {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  border: 1.5px #b168e8 solid;
  background-color: #b168e8;
  height: 7vh;
  width: 10vw;
  font-family: "Nunito", Arial, sans-serif;
  font-size: 1.5em;
}
.page__right-side .screen__figcaption button:active {
  box-shadow: 0 3px 0 #8c8c8c;
  transform: translateY(5px);
  transition: 0.3s;
}
.page__right-side .screen__figcaption .button-go_scale {
  animation: wiggle 2s linear infinite;
}
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

/*------------inspiration-----------*/
.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin-top: 2%;
}

.gallery__card {
  height: 230px;
  width: 200px;
  transition: 0.3s;
}
.gallery__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1.5px grey solid;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  box-shadow: 1px 5px 2px #8c8c8c;
}

.gallery__card:hover {
  transform: rotate(-2deg) scale(1.1);
  transition: 1s;
  z-index: 1;
  cursor: pointer;
}

.gallery__card:active {
  transform: none;
}

@keyframes appearModal {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}
.animation-modal {
  animation-name: appearModal;
  animation-duration: 1s;
}

.modal-card {
  display: flex;
  position: fixed;
  left: calc(50vw - 450px);
  flex-direction: column;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
}
.modal-card .modal-card__close-btn {
  margin-left: 870px;
  background: none;
  border: none;
  cursor: pointer;
  width: 100px;
  margin-bottom: -16px;
}
.modal-card .modal-card__close-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal-card .modal-card__close-btn:hover {
  transform: scale(1.2);
  transition: all 0.2s linear;
}
.modal-card .modal-card__close-btn:active {
  transform: translateY(5px);
}
.modal-card .modal-card__wrapper {
  height: 500px;
  width: 900px;
}
.modal-card .modal-card__wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

.black-back {
  visibility: hidden;
  width: 100vw;
  height: 100vh;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8666666667);
  z-index: 8;
  margin: 0px;
  cursor: pointer;
}

/*----------CONTACTS--------------*/
.box-wrapper {
  background-image: url(../assets/background/contacts.png);
  width: 945px;
  height: 550px;
  min-height: unset;
  object-fit: contain;
  background-color: inherit;
  margin: 0 auto;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  display: flex;
  justify-content: space-around;
}
.box-wrapper .call-me {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 60px;
  margin-top: 10px;
  width: 45vw;
}
.box-wrapper .call-me .call-me__btn {
  display: none;
}
.box-wrapper .call-me .call-me__content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.box-wrapper .call-me .hidden {
  visibility: hidden;
  opacity: 0;
}
.box-wrapper .call-me .call-me__cancel {
  display: none;
  width: 50px;
  height: 50px;
  background-image: url(../assets/icons/call-me_cancel.png);
  background-color: inherit;
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
}
.box-wrapper .call-me .call-me__heading {
  font-size: 3em;
  font-family: "Nunito", Arial, sans-serif;
  color: white;
  text-align: center;
  font-weight: lighter;
}
.box-wrapper .call-me .call-me__button {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  font-family: "Nunito", Arial, sans-serif;
  font-size: 1.5em;
  height: 120%;
  width: 200px;
  border: 2px gray solid;
  background-color: white;
}
.box-wrapper .call-me .call-me__button:hover {
  background-image: url(../assets/background/contact-buttons.png);
}
.box-wrapper .call-me .call-me__button:active {
  box-shadow: 0 3px 0 #8c8c8c;
  transform: translateY(5px);
}
.box-wrapper .text-me {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 45vw;
}
.box-wrapper .text-me .text-me__heading {
  font-size: 3em;
  font-family: "Nunito", Arial, sans-serif;
  color: rgb(8, 8, 8);
  text-align: center;
  font-weight: lighter;
  margin-top: 72px;
}
.box-wrapper .text-me .contact_button {
  display: none;
}
.box-wrapper .text-me .text-me__content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.box-wrapper .text-me .text-me__cancel {
  display: none;
  width: 50px;
  height: 50px;
  background-image: url(../assets/icons/call-you_cancel.png);
  background-color: inherit;
  background-size: cover;
  background-position: center;
  margin-top: -20px;
  margin-bottom: 20px;
}
.box-wrapper .text-me .text-me__button {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  font-family: "Nunito", Arial, sans-serif;
  font-size: 1.5em;
  height: 110%;
  width: 200px;
  border: 2px gray solid;
  background-color: white;
}
.box-wrapper .text-me .text-me__button:hover {
  background: #b168e8;
  cursor: pointer;
  border: 1.5px grey solid transparent;
  box-shadow: 1px 5px 2px #8c8c8c;
}
.box-wrapper .text-me .text-me__button:active {
  box-shadow: 0 3px 0 #8c8c8c;
  transform: translateY(5px);
}
.box-wrapper .contact-text_clip {
  background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: clip 2s linear infinite;
  display: inline-block;
  font-size: 190px;
}
@keyframes clip {
  to {
    background-position: 200% center;
  }
}

@media (max-width: 999.9px) {
  .menu__button {
    font-size: 1.5em;
  }
  .info {
    font-size: 1.7em;
  }
  .clock {
    display: none;
  }
  .girl {
    width: 600px;
  }
  /*------------INSPIRATION------------*/
  .inspiration-page__button {
    display: flex;
  }
  .modal-card {
    left: 10vw;
    top: calc(10vh - 40px);
  }
  .modal-card .modal-card__close-btn {
    margin-left: 77vw;
    z-index: 10;
    margin-bottom: -12px;
    width: 60px;
  }
  .modal-card .modal-card__wrapper {
    height: 80vh;
    width: 80vw;
  }
  /*----------CONTACTS---------*/
  .box-wrapper {
    background-image: none;
    flex-direction: column;
    width: unset;
    height: unset;
    margin-top: 6vh;
    align-items: center;
  }
  .box-wrapper .text-me .text-me__heading {
    display: none;
  }
  .box-wrapper .text-me .text-me__btn {
    display: flex;
    position: absolute;
    background-image: url(../assets/icons/call-you.png);
    justify-content: center;
    align-items: center;
    height: 260px;
    width: 260px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0%;
    cursor: pointer;
    bottom: -400px;
    transition: 0.5s;
  }
  .box-wrapper .text-me .text-me__btn p {
    font-family: "Nunito", Arial, sans-serif;
    font-size: 2em;
    text-align: center;
    width: 70%;
    user-select: none;
  }
  .box-wrapper .text-me .text-me__btn_down {
    bottom: 8vh;
  }
  .box-wrapper .text-me .text-me__cancel {
    display: flex;
    transition: 0.3s;
  }
  .box-wrapper .text-me .text-me__cancel:hover {
    cursor: pointer;
    transform: scale(1.2);
  }
  .box-wrapper .text-me .text-me__cancel:active {
    transform: scale(0.8);
  }
  .box-wrapper .text-me .text-me__content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 7vh;
    transition: visibility 0.7s linear, opacity 0.7s linear;
    display: flex;
    background-color: lightgreen;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    flex-direction: column;
    height: 75vh;
    width: 85vw;
    gap: 30px;
    justify-content: center;
    align-items: center;
    align-content: center;
    box-shadow: 5px 5px 15px 5px #a7a7a7;
  }
  .box-wrapper .text-me .visible {
    visibility: visible;
    opacity: 1;
  }
  .box-wrapper .call-me {
    align-items: center;
  }
  .box-wrapper .call-me .call-me__cancel {
    transition: 0.3s;
    display: flex;
  }
  .box-wrapper .call-me .call-me__cancel:hover {
    cursor: pointer;
    transform: scale(1.2);
  }
  .box-wrapper .call-me .call-me__cancel:active {
    transform: scale(0.8);
  }
  .box-wrapper .call-me .call-me__heading {
    display: none;
  }
  .box-wrapper .call-me .call-me__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 260px;
    width: 260px;
    background-image: url(../assets/icons/call-me.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0%;
    cursor: pointer;
    margin-top: -400px;
    transition: 0.5s;
  }
  .box-wrapper .call-me .call-me__btn p {
    font-family: "Nunito", Arial, sans-serif;
    font-size: 2em;
    text-align: center;
    width: 70%;
    user-select: none;
  }
  .box-wrapper .call-me .call-me__btn_up {
    margin-top: 0;
  }
  .box-wrapper .call-me .call-me__content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    transition: visibility 0.7s linear, opacity 0.7s linear;
    display: flex;
    background-color: #b168e8;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    flex-direction: column;
    height: 75vh;
    width: 85vw;
    gap: 45px;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-top: 40vh;
    z-index: 2;
    box-shadow: 5px 5px 15px 5px #686868;
  }
  .box-wrapper .call-me .visible {
    visibility: visible;
    opacity: 1;
  }
}
@media (max-width: 690px) {
  .menu-mobile {
    display: flex;
    cursor: pointer;
  }
  .menu {
    transition: 0.5s;
    position: absolute;
    top: -350px;
    z-index: 5;
    flex-direction: column;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    background-image: linear-gradient(0deg, #e5e3e3 50%, #c5c5c5 50%);
    background-size: 4px 4px;
    cursor: pointer;
  }
  .menu .menu__button {
    height: 75px;
  }
  .menu-appear {
    top: 70px;
  }
  .menu-mobile_color {
    background: lightgreen;
  }
  .girl {
    width: 95vw;
    left: calc(3vw + 30px);
  }
  .clock {
    display: none;
  }
  .info__button {
    display: none;
  }
  .links {
    left: 0;
    right: unset;
    bottom: 0;
  }
  /*------PROJECTS---------*/
  .page {
    margin: 0 auto;
    margin-top: 2vh;
  }
  .page .page__left-side {
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    gap: 4vh;
  }
  .page .page__left-side .page__go-project {
    display: flex;
    justify-content: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    width: 60vw;
    height: 10vh;
    border: 1px black solid;
    user-select: none;
    text-decoration: none;
    background-color: lightgreen;
  }
  .page .page__left-side .page__go-project button {
    border: none;
    background-color: unset;
    font-family: "Nunito", Arial, sans-serif;
    font-size: 1.2em;
  }
  .page .page__left-side .go-project_right {
    margin-right: -600px;
    transition: 0.5s;
  }
  .page .page__left-side .transition-right {
    margin-right: 0;
  }
  .page .page__left-side .go-project_left {
    margin-left: -600px;
    transition: 0.5s;
    background-image: linear-gradient(0deg, #e5e3e3 50%, #c5c5c5 50%);
    background-size: 4px 4px;
  }
  .page .page__left-side .transition-left {
    margin-left: 0;
  }
  .page .page__left-side .page__go-project:active {
    box-shadow: 0 3px 0 #8c8c8c;
    transform: translateY(5px);
  }
  .page .page__left-side .page__button {
    display: none;
  }
  .page .page__right-side {
    display: none;
  }
}
@media (max-width: 500px) {
  .info {
    width: 66vw;
    margin-top: 6vh;
    margin-left: 5vw;
    justify-content: flex-start;
  }
  .modal-card .modal-card__close-btn {
    margin-left: 72vw;
  }
}

/*# sourceMappingURL=style.css.map */