html{
  scroll-behavior: smooth;
}
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    position: relative;
}



.efekts {
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none; 
}

.efekts img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.background {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('bg1.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.background2 {
    position:absolute;
    top: 100;
    left: 0;
    width: 100%;
    height: 120%;
    background-image: url('waves-colorful-points-digital-data-splash-point-array-futuristic-smooth-glitch-ui-element_1217-6072.avif');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

#camera-graphic > div, #title{
  z-index:10;
}

#camera-graphic div {
    position: fixed;
    width: 5em;
  }

  #camera-graphic div svg {
    width: 100%;
    height: auto;
  }

  #camera-graphic div svg path {
    stroke-width: 100px;
  }

  #top-right {
    top: 3em;
    right: 3em;
    transform: rotate(90deg);
  }

  #top-left {
    top: 3em;
    left: 3em;
    transform: rotate(0deg);
  }

  #bottom-left {
    bottom: 3em;
    left: 3em;
    transform: rotate(-90deg);
  }

  #bottom-right {
    bottom: 3em;
    right: 3em;
    transform: rotate(-180deg);
  }

  section{
    height:100vh;
    display: flex;
    padding:2em;
    flex-direction: column;
    justify-content: center;
    align-items: end;
  }

#title{
  position:fixed;
  top: 4.5em;
  left:5em;
}

#title svg{
  width: 250px;
  height: auto;
}

#izvelne{
  font-size:3rem;
  color:white;
  align-items: center;
}

body{
  background-color: black;
}

#fav{
  position: absolute;
  right: 5em;
  width: 200px;
  height: auto;
}

@keyframes fade{
  from{
    opacity:1
  }
  to{
    opacity:0
  }
}

#shutter{
  height:100vh;
  width:100%;
  background:black;
  position:fixed;
  top:0;
  opacity:1;
  left:0;
  z-index: 5;
  pointer-events: none;
  animation-name: fade;
  animation-delay: 3s;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}



@media screen and (max-width: 600px){
  #izvelne{
    font-size:2rem;
  }
}

  a:link, a:visited {
  color: white;
  text-decoration: none;
}

  a:hover, a:active {
  color: yellow;
}

#end{
  text-align: center;
  color: white;
}

.kode-mono-nice {
  font-family: "Kode Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.shadow-text {
  font-size: 100px;
  color: #000000;
  text-shadow: 4px 4px 1px rgba(0, 0, 0, 0);  
}