@font-face{

    font-family:"Nort";

    src:url("fonts/Nort-Bold.otf") format("opentype");

    font-weight:500;

    font-style:normal;

}

@font-face{

    font-family:"Nort";

    src:url("fonts/Nort-Black.otf") format("opentype");

    font-weight:700;

    font-style:normal;

}

@font-face{

    font-family:"Nort";

    src:url("fonts/Nort-Medium.otf") format("opentype");

    font-weight:300;

    font-style:normal;

}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #000000;
  font-family:"Nort",sans-serif;
}

main {
  width: 100%;
  padding: 0px;
}

main img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 30px;
  background: white;
}

.download-button {
  position: fixed;
  right: 18px;
  bottom: 18px;
  padding: 12px 16px;
  background: rgba(242, 192, 75);
  color: #111;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  font-weight: 400;
  font-size: 16px;
  z-index: 999;
  backdrop-filter: blur(12px);
}

#scrollIndicator{

    position:fixed;

    left:50%;
    bottom:40px;

    transform:translateX(-50%);

    font-size:32px;

    color:#fcfcfc;

    opacity:.7;

    z-index:9999;

    animation:bounce 1.8s infinite;

    transition:
        opacity .5s ease,
        transform .5s ease;

}

#scrollIndicator.hide{

    opacity:0;

    transform:translate(-50%,20px);

    pointer-events:none;

}

@media (max-width: 768px) {
    #scrollIndicator {
        display: none;
    }
}

@keyframes bounce{

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

    50%{
        transform:translate(-50%,12px);
    }

}