/*
scale blue = #021E40;
scale orange = #FF6422;
*/

.clickTagLink {
  position: absolute;
}

html,
body {
  overflow: hidden;
  margin: 0px;
}
body {
  width: 320px;
  height: 250px;
  background: #fff;
  color: #fff;
  font-size: 16px;
  font-family: 'Arial', sans-serif;
}

p {
  margin: 0px !important;
}

.banner {
  width: 320px;
  height: 250px;
  background-image: url(assets/bg.jpeg);
  background-size: cover;
  background-position: bottom;
  /* background-position-x: -50px;
  background-position-y: -35px; */
}

.banner:after {
  content: '';
  width: 50%;
  height: 150%;
  /* background-image: linear-gradient(#084875, #021e40); */
  background-image: linear-gradient(#021e40, #084875);
  background-position: bottom;
  background-size: 100%;
  position: absolute;
  background-position: cover;
  left: 100px;
  bottom: -200px;
  transform: rotate(94deg);
}
#snow-container {
  position: absolute;
  background: transparent;
  width: 100%;
  bottom: 0;
  z-index: 20;
  height: 60px;
  overflow: hidden; /* Ensure the snow stays within the container */
}

.banner:hover .text-1,
.banner:hover .logo {
  display: none;
}

.banner:hover #snow-container {
  width: 100%;
  overflow: visible;
}

.snow {
  width: 3px;
  height: 3px;
  position: absolute;
  background-color: white;
  background-size: 100% 100%;
  border-radius: 50%;
  z-index: 9999;
}

.logo {
  position: absolute;
  left: 15px;
  bottom: 20px;
  max-width: 30px;
  z-index: 2;
}

.text-1 {
  position: absolute;
  max-width: 240px;
  bottom: 10px;
  left: 65px;
  z-index: 2;
}

.hover {
  position: absolute;
  background: #021e40;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  opacity: 0;
  transition: 0.3s opacity ease;
  /* background-image: url(assets/julekort-utentekst2.png); */
  background-image: linear-gradient(#021e40, #084875);
  background-size: 100%;
}

.hover img {
  width: 80%;
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  bottom: 20px;
  margin: auto;
  opacity: 0;
  transition: 1.5s opacity ease;
}

.banner:hover .hover {
  opacity: 1;
}

.banner:hover .hover img {
  opacity: 1;
}

.snow {
  width: 3px;
  height: 3px;
  position: absolute;
  background-color: white;
  background-size: 100% 100%;
  border-radius: 50%;
  z-index: 9999;
}

@keyframes imgevento {
  0%,
  100% {
    transform: skew(0deg, 0deg) scale(1, 1);
    filter: saturate(100%) invert(0%);
  }

  25% {
    filter: saturate(180%) invert(10%);
  }

  50% {
    transform: skew(4deg, 2deg) scale(1.1, 1.1);
    filter: saturate(100%) invert(0%);
  }

  75% {
    filter: saturate(150%) invert(20%);
  }
}