:root {
  --fw-500: 500;
  --fw-600: 600;
  --pixel-size: 2;
  --yolia-sheetWidth: 5217;
  --yolia-sheetWidth: 159;
  --yolia-animation-state: running;


}




/* //FONTS// */

body,
h4,
.h4,
p,
li {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: var(--fw-500) !important;
}

h1,
h2,
h3,
.h3,
.main-section a,
.fw-600 {
  font-weight: var(--fw-600) !important;
}

h1,
.navbar-brand {
  /* 3rem(40px)->>7rem(112px) */
  font-size: calc(2rem + ((1vw - 0.234375rem) * 2.0356));
}

h2,
.navbar-collapse a {
  /* 2rem(32px)->>4rem(64px) */
  font-size: calc(2rem + ((1vw - 0.234375rem) * 1.4645));
}

h3,
.h3 {
  /* 1.125rem(18px)->>2.25rem(36px) homepage text*/
  font-size: calc(1.125rem + ((1vw - 0.234375rem) * 0.8238));
}

h4,
.h4 {
  /* 1rem(16px)->>2rem(32px) homepage text*/
  font-size: calc(1rem + ((1vw - 0.48rem) * 1.3889));
}

p,
li {
  font-size: calc(1rem + ((1vw - 0.234375rem) * 0.7323));
}

/* COLORS */

body {
  background-color: #f4f4f4;
}

.nav-section,
.navbar-toggler {
  background-color: #000000;
}

.a-lnk,
.mention a {
  color: #1b1b1b !important;
  /* ?????na vrw to link??? */
}

.a-lnk:hover {
  color: #1b1b1b !important;
}


.main-section a {
  fill: #000000;
  transition: all ease-in-out .5s;
}

.main-section a:hover svg {
  fill: #282828d5;
  transition: all ease-in-out .5s;
}

.navbar-brand,
.nav-section,
.navbar-collapse a,
.navbar-toggler,
.modal-body {
  color: #f4f4f4 !important;
}




/* //GENERAL// */

.links {
  width: 0rem !important;
  height: 0rem !important;
}

.pos-rel,
.img-container,
.moving-container,
.mention {
  position: relative;
}

.img-container {
  overflow: hidden;
}

.img-container img {
  width: 100%;
}



a:link {
  text-decoration: none;
}

ul {
  margin-inline-start: 0rem;
  padding-inline-start: 0;
  list-style: none;
}

.z-index1 {
  z-index: 1;
}

.z-index10,
.modal {
  z-index: 9000;
}

.link-svg {
  width: calc(1.5rem + ((1vw - 3.75px) * 1.0984));
  height: calc(1.5rem + ((1vw - 3.75px) * 1.0984));
}



/* // <!-- //modal -->// */
.modal-dialog-centered {
  max-height: 60% !important;
  /* //GIA KINITA// */
}



.modal-body {
  padding: 2px;
}

.no-grey {
  filter: grayscale(0%);
}

.mention a {
  border-bottom: 1px solid #1b1b1b !important;
}

.mention p {
  margin-top: .5rem;
}


/* //NAVBAR// */

.navbar-collapse a {
  margin-bottom: 5rem;
}

#current-page {
  width: fit-content;
}

#current-page h2 {
  border-bottom: 2px solid #ffffff;
  transition: border-bottom ease-out 1s;
}

.navbar-collapse a {
  border-bottom: 2px solid #ffffff00;
  transition: all ease-in-out .5s;
}

.navbar-collapse a:hover {
  color: #ffffff;
  border-bottom: 2px solid #ffffff;
  transition: all ease-in-out .5s;
}

.navbar-toggler {
  padding: 0 !important;
  padding-inline: 1px !important;
  padding-block: 1px !important;

}

.toggler-icon svg {
  width: 3rem;
  height: 2rem;
  fill: none;
}

.toggler-icon svg path {
  stroke: #f4f4f4 !important;
  stroke-width: 2;
  stroke-linecap: round;
}

.navbar-toggler svg:hover path {
  stroke: #ffffff !important;
  stroke-width: 2.5;
  transition: all ease-in-out .5s;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0 !important;
}


.navbar-toggler:hover {
  box-shadow: 0 0 0 .3rem !important
}



/* //HOMEPAGE// */

.moving-container h2 {
  opacity: 1;
  color: #1b1b1b !important;
  transform: translateX(0%);
  transition: opacity .1s;
  transition: transform ease-in-out 0.5s;
}

.moving-text {
  opacity: 0;
  transform: translateX(100%);
  transition: width ease-in-out 1s;
  width: 100%;
}



.moving-text a {
  color: #000000;
}

/* EAP */

.carousel-indicators [data-bs-target] {
  background-color: #000000;
}

.carousel-indicators {
  bottom: -0.625rem !important;
}



/* GGJ */

.yolia-animation {
  width: calc(8.813rem*var(--pixel-size));
  height: calc(9.938rem*var(--pixel-size));
  padding: 0;
  overflow: hidden;
}

.yolia-animation img {
  image-rendering: pixelated;
  animation: yolia 2.5s steps(37) infinite;
  animation-play-state: var(--yolia-animation-state);
  width: calc(326.063rem*var(--pixel-size));
  height: calc(9.938rem*var(--pixel-size));
}



@keyframes yolia {
  0% {
    transform: translate3d(0px, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }

}

@keyframes yolia-hover {
  0% {
    transform: translate3d(0px, 0, 0);
  }

  100% {
    transform: translate3d(0%, 0, 0);
  }
}