@font-face {
  font-family: Coolvetica Rg;
  src: url('../fonts/coolvetica-rg.ttf') format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1 {
  color: #dadada;
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 4vw;
  font-weight: 400;
  line-height: 100%;
}

p {
  color: #dadada;
  margin-bottom: 0;
  font-family: Onest, sans-serif;
  font-size: 1.3vw;
  line-height: 150%;
}

.hero {
  z-index: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: visible;
}

.header {
  z-index: 5;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  mix-blend-mode: difference;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: .65vw 0 .65vw 1.3vw;
  display: flex;
  position: fixed;
  inset: 0% 0% auto;
}

.body {
  background-color: #0d0d0d;
}

.logo-box {
  border-radius: .65vw;
  justify-content: center;
  align-items: center;
  height: 3.86vw;
  display: flex;
  overflow: hidden;
}

.image {
  mix-blend-mode: difference;
  width: 2.55vw;
  height: 2.55vw;
}

.header-button {
  mix-blend-mode: difference;
  background-color: #dadada;
  border-radius: .65vw;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 10.52vw;
  height: 2.88vw;
  margin-right: 1.3vw;
  text-decoration: none;
  transition: all .2s ease-in-out;
  display: flex;
}

.header-button:hover {
  background-color: #282828;
}

.header-text {
  mix-blend-mode: difference;
  font-family: Space Mono, sans-serif;
  font-size: 1.05vw;
  font-weight: 400;
  text-decoration: none;
}

.div-block {
  opacity: .1;
  -webkit-text-fill-color: inherit;
  background-color: #fff;
  background-clip: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
}

.div-block-2 {
  opacity: .19;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #fff;
  width: 3vw;
  height: 3vw;
}

.div-block-3 {
  width: 0;
  height: 0;
}

.image-2 {
  width: 100%;
  height: 100%;
  position: absolute;
}

.hero-desc-one {
  text-transform: uppercase;
  width: 20vw;
  margin-right: 3.6vw;
  font-size: 1.7vw;
  font-weight: 700;
  line-height: 120%;
  overflow: hidden;
}

.hero-desc-two {
  font-size: 1.7vw;
  line-height: 120%;
  overflow: hidden;
}

.lines-desc {
  z-index: 0;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: flex-start;
  height: 100%;
  display: flex;
  position: relative;
}

.line-vertical {
  opacity: .1;
  background-color: #fff;
  width: .1vw;
  height: 100%;
  margin-left: 0;
}

.line-horzz {
  opacity: .1;
  background-color: #fff;
  width: 100%;
  height: .1vh;
  margin-top: 26.3vh;
  margin-left: 0;
  position: absolute;
}

.text-span {
  font-weight: 700;
}

.line-vertical-one {
  opacity: .1;
  background-color: #fff;
  width: .1vw;
  height: 100%;
  margin-left: 17.6vw;
}

.heading {
  width: 34.8vw;
  font-size: 8.5vw;
  line-height: 80%;
}

.hero-heading {
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
  position: absolute;
  inset: auto 1.3vw 2.9vw;
}

.hero-image {
  width: 21.5vw;
}

.portfolio {
  z-index: 1;
  background-color: #121212;
  padding-top: 5.8vw;
  padding-bottom: 10.4vw;
  position: relative;
}

.heading-portfolio {
  margin-bottom: 7.8vw;
  padding-left: 1.3vw;
  padding-right: 1.3vw;
}

.h2-port {
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 8.3vw;
  line-height: 80%;
}

.project {
  grid-column-gap: 2vw;
  grid-row-gap: 2vw;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 11.7vw;
  padding-left: 1.3vw;
  padding-right: 1.3vw;
  display: flex;
}

.project.posl {
  margin-bottom: 0;
}

.project-desc {
  width: 100%;
  height: 100%;
}

.img-project {
  pointer-events: auto;
  border-radius: .8vw;
  width: 48vw;
  max-width: 48vw;
  transition: all .35s ease-in-out;
  overflow: hidden;
  transform: scale(1);
}

.img-project:hover {
  transform: scale(1.1);
}

.h3-project {
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 3.14vw;
  line-height: 80%;
}

.h3-wrap {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.61vw;
  display: flex;
}

.h3-number {
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 3.14vw;
  line-height: 80%;
}

.desc {
  text-transform: uppercase;
  margin-bottom: 9.3vw;
  font-weight: 700;
}

.desc-span {
  color: #dadada99;
}

.link {
  color: #dadada;
}

.project-buttons {
  grid-column-gap: 1.3vw;
  grid-row-gap: 1.3vw;
  flex-flow: column;
  display: flex;
}

.project-read-button {
  mix-blend-mode: normal;
  background-color: #272727;
  border-radius: .65vw;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3.4vw;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.project-read-button:hover {
  filter: invert();
}

.project-read-text {
  text-transform: uppercase;
  mix-blend-mode: normal;
  font-family: Space Mono, sans-serif;
  font-size: 1.05vw;
  font-weight: 400;
  text-decoration: none;
}

.project-live-button {
  mix-blend-mode: normal;
  background-color: #dadada;
  border-radius: .65vw;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3.4vw;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.project-live-button:hover {
  filter: invert();
}

.project-live-text {
  color: #121212;
  text-transform: uppercase;
  mix-blend-mode: normal;
  font-family: Space Mono, sans-serif;
  font-size: 1.05vw;
  font-weight: 400;
  text-decoration: none;
}

.line-mob {
  opacity: .1;
  background-color: #fff;
  width: 100%;
  height: .1vh;
  margin-top: 26.3vh;
  margin-left: 0;
  display: none;
  position: absolute;
}

.about {
  z-index: 1;
  background-color: #0d0d0d;
  padding-top: 0;
  padding-right: 0;
  position: relative;
}

.heading-about {
  z-index: 1;
  text-align: center;
  margin-bottom: 3.9vw;
  padding-top: 6.5vw;
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 8.3vw;
  line-height: 80%;
  position: relative;
}

.about-div {
  z-index: 1;
  grid-column-gap: 2.6vw;
  grid-row-gap: 2.6vw;
  justify-content: space-between;
  margin-bottom: 13vw;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12vw;
  padding-right: 12vw;
  display: flex;
  position: relative;
}

.img-about {
  width: 25.3vw;
}

.about-desc-one {
  text-align: justify;
  width: 100%;
  margin-bottom: 1.96vw;
}

.about-desc-two {
  text-align: justify;
  width: 100%;
  margin-bottom: 3.27vw;
}

.what-button {
  mix-blend-mode: normal;
  background-color: #dadada;
  border-radius: .65vw;
  justify-content: center;
  align-items: center;
  width: 38.5vw;
  height: 3.4vw;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.what-button:hover {
  filter: invert();
}

.heading-what {
  z-index: 1;
  text-align: center;
  margin-bottom: 5.2vw;
  padding-top: 0;
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 8.3vw;
  line-height: 80%;
  position: relative;
}

.what-div {
  z-index: 1;
  padding-bottom: 6.5vw;
  padding-left: 1.3vw;
  padding-right: 1.3vw;
  display: block;
  position: relative;
}

.what-card {
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  background-color: #ffffff0d;
  border-radius: .65vw;
  width: 31.5vw;
  height: 18.76vw;
  padding: 1.96vw;
}

.cards {
  justify-content: space-between;
  margin-bottom: 5.2vw;
  display: flex;
}

.what-phrase {
  text-align: center;
  width: 76vw;
  margin-bottom: 4.5vw;
  margin-left: auto;
  margin-right: auto;
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 4.18vw;
  line-height: 80%;
}

.skills {
  z-index: 1;
  background-color: #fff;
  position: relative;
}

.what-card-img {
  width: 4.38vw;
}

.card-head {
  grid-column-gap: 1.3vw;
  grid-row-gap: 1.3vw;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 1.96vw;
  display: flex;
}

.card-h3 {
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 2.35vw;
  line-height: 80%;
}

.card-desc {
  width: 99%;
}

.line-about-vertical {
  z-index: 0;
  opacity: .1;
  background-color: #fff;
  width: .1vw;
  height: 100%;
  margin-left: 42.3vw;
  position: absolute;
  inset: 0%;
}

.line-about-vertical.two {
  margin-left: 75.1vw;
}

.line-about-hor {
  opacity: .1;
  background-color: #fff;
  width: 100%;
  height: .1vw;
  margin-top: 6.5vw;
  position: absolute;
  inset: 0%;
}

.line-about-hor.two {
  margin-left: 75.1vw;
}

.heading-skills {
  z-index: 1;
  color: #1c1c1c;
  text-align: center;
  margin-bottom: 2vw;
  padding-top: 6.5vw;
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 8.3vw;
  line-height: 80%;
  position: relative;
}

.skills-desc {
  color: #1c1c1c;
  text-align: center;
  width: 57vw;
  margin-bottom: 4.6vw;
  margin-left: auto;
  margin-right: auto;
}

.skills-grid {
  grid-column-gap: 1.3vw;
  grid-row-gap: 1.3vw;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 7.19vw;
  padding-left: 1.3vw;
  padding-right: 1.3vw;
  display: grid;
}

.skill-card {
  grid-column-gap: 1.96vw;
  grid-row-gap: 1.96vw;
  background-color: #ebebeb;
  border-radius: .65vw;
  justify-content: space-between;
  align-items: center;
  padding: 1vw 2vw 1vw 1vw;
  display: flex;
}

.skill-img {
  width: 4.51vw;
  max-width: 4.51vw;
}

.skill-h3 {
  color: #1c1c1c;
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 2.35vw;
  line-height: 80%;
}

.skill-level {
  color: #a5a5a5;
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 2.09vw;
  line-height: 80%;
}

.skill-h3-wrap {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.3vw;
  display: flex;
}

.skill-wrapper {
  border-radius: 10%;
  width: 100%;
}

.skill-line {
  background-color: #555;
  border-radius: 10px;
  width: 100%;
  height: .33vw;
  min-height: .33vw;
  max-height: .33vw;
  position: relative;
}

.skill-line.java {
  background-color: #c7c7c7;
}

.skill-line-java {
  background-color: #555;
  border-radius: 10px;
  width: 66%;
  height: .33vw;
  position: absolute;
}

.skill-line-java.java {
  background-color: #c7c7c7;
}

.contacts {
  z-index: 1;
  background-color: #0d0d0d;
  padding-bottom: 5.23vw;
  position: relative;
}

.heading-contacts {
  z-index: 1;
  text-align: center;
  margin-bottom: 1.96vw;
  padding-top: 6.5vw;
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 8.3vw;
  line-height: 80%;
  position: relative;
}

.contacts-desc {
  z-index: 1;
  color: #dadada;
  text-align: center;
  width: 68vw;
  margin-bottom: 5.2vw;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.contacts-div {
  z-index: 1;
  grid-column-gap: 1.3vw;
  grid-row-gap: 1.3vw;
  justify-content: center;
  align-items: center;
  margin-bottom: 5.2vw;
  display: flex;
  position: relative;
}

.contact-card {
  grid-column-gap: 1.3vw;
  grid-row-gap: 1.3vw;
  background-color: #191919;
  border-radius: .65vw;
  justify-content: center;
  align-items: center;
  height: 5.7vw;
  padding: 1vw 3vw;
  text-decoration: none;
  display: flex;
}

.image-3 {
  width: 3.73vw;
  max-width: 3.73vw;
}

.contact-con {
  opacity: .6;
  text-transform: uppercase;
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 2.09vw;
  font-weight: 400;
  line-height: 80%;
  text-decoration: none;
}

.copy {
  z-index: 1;
  color: #dadada99;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 1.5vw;
  position: relative;
}

.about-button {
  mix-blend-mode: normal;
  background-color: #dadada;
  border-radius: .65vw;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 38.5vw;
  height: 3.4vw;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.about-button:hover {
  filter: invert();
}

.preloader {
  z-index: 100;
  background-color: #0d0d0d;
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  inset: 0%;
}

.div-block-4, .div-block-5 {
  overflow: hidden;
}

.div-block-6, .div-block-7 {
  margin-top: 26.3vh;
  overflow: hidden;
}

.img-wrapper {
  border-radius: .8vw;
  overflow: hidden;
}

.all-elements-animation, .hero-preloader-anim, .contact-animation, .buttons-click {
  display: none;
}

.project-modal {
  z-index: 4;
  background-color: #000000b3;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
}

.modal-box {
  z-index: 4;
  grid-column-gap: 1.95vw;
  grid-row-gap: 1.95vw;
  background-color: #121212;
  border-radius: .7vw;
  justify-content: space-between;
  align-items: flex-start;
  width: 97.4%;
  height: 85%;
  margin-top: 6vw;
  margin-left: auto;
  margin-right: auto;
  padding: 1.95vw 1.3vw 1.95vw 1.95vw;
  display: flex;
  position: relative;
  overflow: auto;
}

.image-4, .modal-image {
  width: 37.8vw;
}

.modal-desc {
  width: 100%;
  padding-top: 2vw;
}

.paragraph {
  margin-bottom: 2.61vw;
  font-family: Coolvetica Rg, Impact, sans-serif;
  font-size: 3.14vw;
  line-height: 80%;
}

.desc-modal {
  text-transform: uppercase;
  margin-bottom: 1.96vw;
  font-weight: 700;
}

.cont-span {
  color: #dadada99;
  font-family: Onest, sans-serif;
  font-size: 1.3vw;
  line-height: 150%;
}

.overview {
  margin-bottom: 2vw;
}

.overview.one {
  margin-bottom: 0;
}

.close-modal {
  opacity: .55;
  cursor: pointer;
  margin-top: 0;
  margin-right: 0;
  padding: 1.3vw;
  transition: all .2s ease-in-out;
  position: sticky;
  inset: 0% 0% auto auto;
}

.close-modal:hover {
  opacity: 1;
}

.cross-img {
  width: 1.76vw;
  max-width: 1.76vw;
}

.modal-back {
  z-index: 3;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.modal-animation {
  display: none;
}

.list {
  margin-bottom: 2vw;
  padding-left: 30px;
  font-size: 1.3vw;
  line-height: 150%;
}

@media screen and (max-width: 767px) {
  .modal-animation {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .hero {
    height: 175vw;
  }

  .header {
    padding: 2.09vw 4.18vw;
  }

  .logo-box {
    height: 12.3vw;
  }

  .image {
    width: 8.14vw;
    height: 8.14vw;
  }

  .header-button {
    border-radius: 2vw;
    width: 33.61vw;
    height: 9.19vw;
    margin-right: 0;
  }

  .header-text {
    font-size: 3.3vw;
  }

  .hero-desc-one {
    width: 68vw;
    margin-bottom: 4.18vw;
    margin-left: 4.18vw;
    margin-right: 0;
    font-size: 5.4vw;
  }

  .hero-desc-two {
    margin-top: 0;
    margin-left: 23.3vw;
    font-size: 4.18vw;
  }

  .lines-desc {
    flex-flow: column;
    width: 100%;
    display: block;
  }

  .line-vertical {
    display: none;
    position: absolute;
  }

  .line-horzz {
    opacity: 0;
    margin-top: 0;
    position: static;
  }

  .line-vertical-one {
    margin-left: 23.3vw;
    position: absolute;
  }

  .heading {
    text-align: center;
    width: 100%;
    margin-top: 0;
    margin-bottom: 8vw;
    font-size: 21.9vw;
  }

  .hero-heading {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-end;
    inset: 29vw 4.18vw 0;
  }

  .hero-image {
    width: 38.6vw;
  }

  .portfolio {
    padding-top: 10.44vw;
    padding-bottom: 20.8vw;
  }

  .heading-portfolio {
    margin-bottom: 12.5vw;
    padding-left: 4.18vw;
    padding-right: 4.18vw;
  }

  .h2-port {
    font-size: 15vw;
  }

  .project {
    grid-column-gap: 8.35vw;
    grid-row-gap: 8.35vw;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    margin-bottom: 20.8vw;
    padding-left: 4.18vw;
    padding-right: 4.18vw;
  }

  .img-project {
    width: 100%;
    max-width: 100%;
  }

  .h3-project {
    font-size: 5.85vw;
  }

  .h3-wrap {
    margin-bottom: 8.3vw;
  }

  .h3-number {
    font-size: 5.85vw;
  }

  .desc {
    margin-bottom: 12.5vw;
    font-size: 3.3vw;
  }

  .project-buttons {
    grid-column-gap: 4.18vw;
    grid-row-gap: 4.18vw;
  }

  .project-read-button {
    border-radius: 2vw;
    height: 11.06vw;
  }

  .project-read-text {
    font-size: 4.18vw;
  }

  .project-live-button {
    border-radius: 2vw;
    height: 11.06vw;
  }

  .project-live-text {
    font-size: 4.18vw;
  }

  .line-mob {
    opacity: .1;
    margin-top: 0;
    display: block;
    position: absolute;
    top: 29vw;
  }

  .heading-about {
    margin-bottom: 10.44vw;
    padding-top: 20.88vw;
    font-size: 15vw;
  }

  .about-div {
    grid-column-gap: 8.35vw;
    grid-row-gap: 8.35vw;
    flex-flow: column;
    margin-bottom: 33vw;
    padding-left: 4.18vw;
    padding-right: 4.18vw;
  }

  .img-about {
    width: 91.65vw;
  }

  .about-desc-one {
    margin-bottom: 4.18vw;
    font-size: 4.18vw;
  }

  .about-desc-two {
    margin-bottom: 8.35vw;
    font-size: 4.18vw;
  }

  .what-button {
    border-radius: 2vw;
    width: 100%;
    height: 11.06vw;
  }

  .heading-what {
    margin-bottom: 10.44vw;
    font-size: 15vw;
  }

  .what-div {
    padding-bottom: 20.88vw;
    padding-left: 4.18vw;
    padding-right: 4.18vw;
  }

  .what-card {
    border-radius: 2.09vw;
    width: 100%;
    height: 53vw;
    padding: 3.13vw 3.13vw 6.2vw;
  }

  .cards {
    grid-column-gap: 4.18vw;
    grid-row-gap: 4.18vw;
    flex-flow: column;
    margin-bottom: 16.7vw;
  }

  .what-phrase {
    width: 100%;
    margin-bottom: 20.8vw;
    font-size: 10vw;
  }

  .what-card-img {
    width: 14vw;
  }

  .card-head {
    grid-column-gap: 4.18vw;
    grid-row-gap: 4.18vw;
    margin-bottom: 4.18vw;
  }

  .card-h3 {
    font-size: 6.68vw;
  }

  .card-desc {
    font-size: 4.18vw;
  }

  .line-about-vertical {
    margin-left: 4.18vw;
  }

  .line-about-vertical.two {
    margin-left: 48vw;
  }

  .line-about-hor {
    margin-top: 22vw;
  }

  .heading-skills {
    margin-bottom: 8.35vw;
    padding-top: 18.8vw;
    font-size: 15vw;
  }

  .skills-desc {
    width: 92vw;
    margin-bottom: 10.44vw;
    font-size: 4.18vw;
  }

  .skills-grid {
    grid-column-gap: 2.09vw;
    grid-row-gap: 2.09vw;
    grid-template-rows: auto auto auto auto auto auto auto auto;
    grid-template-columns: 1fr;
    padding-bottom: 23vw;
    padding-left: 4.18vw;
    padding-right: 4.18vw;
  }

  .skill-card {
    grid-column-gap: 4.18vw;
    grid-row-gap: 4.18vw;
    border-radius: 2.09vw;
    padding: 3.13vw 4.18vw 3.13vw 3.13vw;
  }

  .skill-img {
    width: 10.23vw;
    max-width: 10.23vw;
  }

  .skill-h3, .skill-level {
    font-size: 5vw;
  }

  .skill-h3-wrap {
    margin-bottom: 2.09vw;
  }

  .skill-line {
    height: .84vw;
    min-height: .84vw;
    max-height: .84vw;
  }

  .skill-line-java {
    height: .84vw;
  }

  .contacts {
    padding-bottom: 13.6vw;
  }

  .heading-contacts {
    margin-bottom: 10.44vw;
    padding-top: 18.8vw;
    font-size: 15vw;
  }

  .contacts-desc {
    width: 89vw;
    margin-bottom: 10.44vw;
    font-size: 4.18vw;
  }

  .contacts-div {
    grid-column-gap: 3.13vw;
    grid-row-gap: 3.13vw;
    flex-flow: column;
    margin-bottom: 15.6vw;
  }

  .contact-card {
    grid-column-gap: 2.09vw;
    grid-row-gap: 2.09vw;
    border-radius: 2.09vw;
    height: 14.6vw;
    padding: 2.7vw 8.3vw;
  }

  .image-3 {
    width: 9.19vw;
    max-width: 9.19vw;
  }

  .contact-con {
    font-size: 5vw;
  }

  .copy {
    font-size: 4.18vw;
  }

  .about-button {
    border-radius: 2vw;
    width: 100%;
    height: 11.06vw;
  }

  .div-block-6 {
    margin-top: 115vw;
  }

  .div-block-7 {
    margin-top: 0;
    overflow: hidden;
  }

  .modal-box {
    grid-column-gap: 4vw;
    grid-row-gap: 4vw;
    border-radius: 2.1vw;
    flex-flow: column;
    width: 91.64%;
    height: 87svh;
    margin-top: 20vw;
    padding: 12vw 4.18vw 4.18vw;
  }

  .modal-image {
    width: 100%;
  }

  .paragraph {
    margin-bottom: 6vw;
    font-size: 6vw;
  }

  .desc-modal {
    margin-bottom: 7vw;
    font-size: 3.3vw;
  }

  .cont-span {
    font-size: 4.18vw;
  }

  .overview {
    margin-bottom: 7vw;
    font-size: 4.18vw;
  }

  .close-modal {
    margin-right: 1vw;
    padding: 3vw;
    position: absolute;
  }

  .cross-img {
    width: 5vw;
    max-width: 5vw;
  }

  .list {
    font-size: 4.18vw;
  }
}


@font-face {
  font-family: 'Coolvetica Rg';
  src: url('../fonts/coolvetica-rg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}