* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background-color: #0d0d0d;
  height: calc(100svh + 1000lvh + 400lvh);
  color: white;
  font-family: 'Roboto Mono';
}

body::-webkit-scrollbar {
  display: none;
}

h1 {
  font-size: 3rem;
  line-height: 3rem;
}

h2 {
  font-size: min(2rem, 8vw);
}

p {
  color: white;
  font-size: min(1rem, 3.5vw);
}


.work p {
  color: white;
  font-size: min(1rem, 3.2vw);
}

#preloader {
  position: fixed;
  background-size: 30%;
  width: 100%;
  height: 100lvh;
  z-index: 1000;
}

.engLoader {
  background: black url(slike/loaderEng.gif) no-repeat center center;
}

.sloLoader {
  background: black url(slike/loaderSlo.gif) no-repeat center center;
}

@keyframes zSl2an {
  0% {visibility: hidden;}
  41% {visibility: hidden;}
  43% {visibility: visible;}
  44% {visibility: hidden;}
  46% {visibility: hidden;}
  47% {visibility: visible;}
  50% {visibility: hidden;}
  84% {visibility: hidden;}
  85% {visibility: visible;}
}

@keyframes zSl3an {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes navAn {
  from {transform: translate3d(100vw, 0, 0);}
  to {transform: translate3d(90vw, 0, 0);}
}

@keyframes vrtenje {
  from {transform: translate(-50%) rotate(0deg);}
  to {transform: translate(-50%) rotate(360deg);}
}

@keyframes zoom {
  from {transform: scale(1.0);}
  to {transform: scale(1.1);}
}

.anim2 {
  visibility: visible;
  animation-name: zSl2an;
  animation-duration: 4s;
}

.anim3 {
  opacity: 0;
  animation-name: zSl3an;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

.prviDel {
  position: fixed;
  width: 100%;
  height: 100svh;
  display: block;
}

.navbarPlusAbout {
  position: fixed;
  right: 0;
  width: 100vw;
  height: 100lvh;
  background-color: rgba(13, 13, 13, 0.8);
  transform: translate3d(100vw, 0, 0);
  animation-name: navAn;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 7s;
  display: flex;
  z-index: 100;
}

.navbar {
  left: 0;
  height: 100%;
  width: 10vw;
  position: relative;
}

.nav-link {
  color: white;
  writing-mode: vertical-lr;
  text-orientation: sideways;
  margin-top: min(10vw, calc(100svh / 23));/* dolzina ene crke oz space-a*/
  font-size: min(10vw, calc(100svh / 23 * 1.66));
  line-height: 10vw;
  text-decoration: none;
  text-transform: lowercase;
  cursor: pointer;
  z-index: 100;
}

.jezik {
  position: absolute;
  top: calc(98dvh - min(8vw, 40px));
  left: 50%;
  transform: translate(-50%);
  color: white;
  background-color: transparent;
  border: none;
  text-decoration: none;
  width: min(8vw, 40px);
  height: min(8vw, 40px);
  cursor: pointer;
}


.about {
  right: 0;
  width: 90vw;
  height: 100%;;
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
}

.aboutAbout {
  height: 90svh;
  width: 45vw;
  margin: 5svh 2.5vw 5svh 5vw;
}

.aboutContact {
  height: 90svh;
  width: 30vw;
  margin: 5svh 5vw 5svh 2.5vw;
}

.text {
  position: relative;
  font-size: min(calc(100svh / var(--stBesed)), calc(1vw * 90 / var(--dolBeseda) * 1.66));/* 90 procentov dolzine deljeno s sedem(nejdali beseda) krat 1.66(fontov ratio) */
  line-height: calc(100svh / var(--stBesed));/* stevilo besed */
  width: 90vw;
  text-transform: uppercase;
  mix-blend-mode: difference;
  animation-delay: 7s;
  animation-duration: 2s;
  z-index: 10;
}

.zacetnaSlika {
  height: 60svh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(7deg);
}

.senca {
  position: absolute;
  width: 20svh;
  height: 10svh;
  top: 78lvh;
  left: 50%;
  transform: perspective(0.5rem) translate(-40%, 0%) rotateX(4deg) scale(1, 0.5);
  filter: blur(4rem);
  background-color: lightblue;
}


#zSl1 {
  visibility: visible;
  z-index: 1;
}

#zSl2 {
  z-index: 2;
}

#zSl3 {
  animation-delay: 4s;
  animation-duration: 3s;
  z-index: 3;
}

.fon2del {
  position: fixed;
  top: 100lvh;
  display: block;
  background-color: #222222;
  z-index: 10;
}

.work {
  position: absolute;
  display: grid;
  width: 100vw;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(8, 25lvh);
}

.work > div {
  padding: 1rem;
  padding-right: 10vw;
}

.slikeContainer {
  position: relative;
  width: 200vw;
  height: 50lvh;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.slikeContainer > div {
  position: absolute;
  width: 190vw;
  height: 50lvh;
  background-color: #222222;
}

.slikeContainer > img {
  position: relative;
  width: 62vw;
  height: 45lvh;
  margin: auto;
  object-fit: cover;
  object-position: 100% 50%;
}

.dve {
  width: 90vw;
}

#sliki1 {
  left: -200vw;
}

#sliki2 {
  right: -200vw;
}

#sliki3 {
  left: -400vw;
}

#sliki4 {
  right: -400vw;
}

#sliki5 {
  left: -600vw;
}

.krogContainer {
  height: 100svh;
  display: none;
}

.krog {
  position: relative;
  width: 80vw;
  height: 80vw;
  top: 10svh;
  left: 50%;
  transform: translate(-50%);
  z-index: -1;
}

.krog > h1 {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%);
}

.krog > p {
  position: absolute;
  top: calc(25% + 10svh);
  left: 50%;
  transform: translate(-50%);
  text-align: center;
}

.kos {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  width: 16.246vw;
  height: 100%;
  animation: vrtenje 60s linear infinite;
}

.kos > img {
  position: absolute;
  width: 100%;
  box-shadow: 2px 2px 5px #3A3A3A;
}

.krogImg2 {
  bottom: 0;
  transform: scale(-1, -1);
}

.galContainer {
  position: relative;
  top: calc(950lvh + 100svh);
  overflow-y: hidden;
  z-index: 20;
  padding-top: 10lvh;
  background-color: #0d0d0d;
}

.galContainer > h1 {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  width: 90vw;
  height: 10lvh;
  max-width: 130svh;
}

.galerija {
  position: relative;
  left: 50%;
  transform: translate(-50%);
  width: 90vw;
  max-width: 130lvh;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 25lvh;
}

.galerija > img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
}

.galerija img:hover{
  animation: zoom 0.7s forwards;
}

.galContainer .popup {
  position: fixed;
  top: 0; left: 0;
  background: rgba(0, 0, 0, 0.8);
  height: 100%; width: 100%;
  z-index: 1100;
  display: none;
}

.galContainer .popup span {
  position: absolute;
  top: 0; right: calc(10vw + 10px);
  font-size: 60px;
  font-weight: bolder;
  color: white;
  cursor: pointer;
  z-index: 300;
}

.popup img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  object-fit: cover;

}

@media screen and (min-width: 600px) {

  body {
    height: 100%;
  }

  .prviDel {
    position: static;
  }

  .fon2del {
    display: none;
  }

  .krogContainer {
    display: block;
  }

  .galContainer {
    top: 0;
  }

  .siroka {
    grid-column: span 2 / auto;
  }

  .visoka {
    grid-row: span 2 / auto;
  }

  .popup img {
    width: min(960px, 50vw);
  }
}