@font-face {
  font-family: SharpGrotesk;
  src: url("../fonts/Sharp Grotesk DB Cyr Medium 22 Regular.ttf");
}

@font-face {
  font-family: Syne;
  src: url("../fonts/Syne-variable.ttf");
}

@font-face {
  font-family: SyneIt;
  src: url("../fonts/Syne-Italic.ttf");
}

b {
  color: #8188ef !important;
  font-variation-settings: "wght" 600;
  transition: font-variation-settings 0.2s;
  font-family: Syne, Arial, Helvetica;
}

b:hover {
  font-variation-settings: "wght" 700;
}

.arsenal {
  color:#757575 !important;
  transition: color 0.5s;
}

.arsenal:hover {
  color: red !important;
  cursor: not-allowed;
}

strong {
  color: #efeff5 !important;
  font-variation-settings: "wght" 600;
  font-size: 7vw !important;
  transition: font-variation-settings 0.5s;
}

strong:hover {
  font-variation-settings: "wght" 800;
}

.about-me {
  background-color: #efeff5;
  font-variation-settings: "wght" 500;
}

.about-me-body {
  color: #757575 !important;
  font-size: 5vw !important;
  font-family: SharpGrotesk, Arial, Helvetica;
  /* text-align: justify; */
}

.contact-me {
  font-size: 3vw !important;
  font-variation-settings: "wght" 300;
  font-family: Syne, Arial, Helvetica;
  padding-bottom: 10vh;
  text-align: right;
  color: #efeff5 !important;
}

em {
  font-family: SyneIt, Arial, Helvetica;
}

.links {
  background-color: #7c7bb7;
}

.links-body {
  color: #efeff5 !important;
  font-size: 5vw !important;
  font-family: Syne, Arial, Helvetica;
  /* padding-right: 20vw; */
}

.arrow {
  position: absolute;
  /* padding-left: 80vw; */
  bottom: 5vh;
  right: 1vw;
  width: 15vw;
}

.bye {
  background-color: #757575;
  font-variation-settings: "wght" 700;
  padding-top: 35vh;
}

.love {
  font-size: 2vw !important;
  font-family: SyneIt, Arial, Helvetica;
  font-style: italic;
  padding-top: 30vh;
  color: #efeff5 !important;
  text-align: center;
}

.bye-body {
  color: #efeff5 !important;
  font-size: 5vw !important;
  font-family: Syne, Arial, Helvetica;
  text-align: center;
}