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

html, body {
  height: 100%;
  width: 100%;
}

/* Bakgrundsbild */
body {
  background-image: url('picture.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin: 0;
}

/* Knapp-positionering */
.button {
  position: absolute;
  top: 75%; /* 2/3 från toppen */
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  height: auto;
  cursor: pointer;
}

.background-carousel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* put behind other content */
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fade 16s infinite;
  animation: fade 16s infinite, kenburns 8s ease-in-out infinite;
  transform-origin: center;
}

.slide1 {
  background-image: url('picture1.jpg');
  animation-delay: 0s;
}

.slide2 {
  background-image: url('picture2.jpg');
  animation-delay: 4s;
}

.slide3 {
  background-image: url('picture3.jpg');
  animation-delay: 8s;
}

.slide4 {
  background-image: url('picture4.jpg');
  animation-delay: 12s;
}

@keyframes fade {
  0% { opacity: 0; }
  6.25% { opacity: 1; }
  25% { opacity: 1; }
  31.25% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}