.cubic{
    transition: 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glow:hover {
   
    text-shadow: 0 0 5px rgba(255,255,255,0.8); /* Glowing effect */
}


.glow-fixed {
   
    text-shadow: 0 0 5px rgba(255,255,255,0.8); /* Glowing effect */
}

header {
    border-bottom: 1px solid #eee;
    height: 4rem;
}
.burger-wrapper {
  cursor: pointer;
}
#meny {
    width: 50rem;
    height: 100vh;
    position: fixed;
    right: 0;
    transition-timing-function: cubic-bezier(10,2,3,1);
    transform: translateX(50rem);
    top: 0;
    z-index: 0;
    transition: 0.5s;
}
#menyAvPaa {
    display: none;
}

#menyAvPaa:checked ~ #meny {
    transform: translateX(0rem);
}

#burger {
    position: absolute;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    right: 1rem;
    top: 1rem;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

#burger > div {
    height: 2px;
    background-color: #ffffff;
    transition: 0.5s;
    z-index: 999;
}

#menyAvPaa:checked ~ #burger > div {
  background-color: #000000;
}

#menyAvPaa:checked ~ #burger > div:nth-child(1) {
    transform: translateY(15px) rotate(45deg);
}
#menyAvPaa:checked ~ #burger > div:nth-child(2) {
    opacity: 0;
}
#menyAvPaa:checked ~ #burger > div:nth-child(3) {
    transform: translateY(-15px) rotate(-45deg);
}



  


.image-responsive {

    animation: falling 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes falling {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

.falling-down {
    opacity: 0;
    animation: falling2 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
    animation-delay: 0.5s;
}

@keyframes falling2 {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
   
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}



.falling-down2{
    opacity: 0;
    animation: falling3 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
    animation-delay: 1s;

}

@keyframes falling3 {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
   
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.falling-down3{
    opacity: 0;
    animation: falling4 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
    animation-delay: 1s;

}

@keyframes falling4 {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
   
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.paralax{
    background: url("../images/back1.png");


    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}




@keyframes fallDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

#animatedText {
    display: inline-block;
    animation: fallDown 1s ease-out;
}



.paralax2{
    background: url("../images/back2.png");


    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}






.falling-down5{
    opacity: 0;
    animation: falling5 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
    animation-delay: 1s;

}

@keyframes falling5 {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
   
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}




.falling-down6{
    opacity: 0;
    animation: falling6 1s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
    animation-delay: 1s;

}

@keyframes falling6 {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
   
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}






.card {
    
    position: relative;
    width: 300px;
    height: 100%;
    border-radius: 14px;
    z-index: 1111;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 20px #8d6c00, 0px 0px #ffd900;
  }
  
  .bg {
    position: relative;
    top: 5px;
    left: 5px;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(24px);
    border-radius: 10px;
    overflow: hidden;
    outline: 2px solid rgb(255, 217, 0);
  }
  
  .blob {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ffd000;
    opacity: 1;
    filter: blur(12px);
    animation: blob-bounce 0.5s infinite ease;
  }
  
  @keyframes blob-bounce {
    0% {
      transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
  
    25% {
      transform: translate(-100%, -100%) translate3d(100%, 0, 0);
    }
  
    50% {
      transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
    }
  
    75% {
      transform: translate(-100%, -100%) translate3d(0, 100%, 0);
    }
  
    100% {
      transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
  }
  


  .top-of{
    z-index: 2222;
    position: fixed;
  }



  @-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .rotating {
    -webkit-animation: rotating 6s linear infinite;
    -moz-animation: rotating 6s linear infinite;
    -ms-animation: rotating 6s linear infinite;
    -o-animation: rotating 6s linear infinite;
    animation: rotating 6s linear infinite;
  }