.audio-butt {
    z-index: 1100;
}

.audio-butt div{
    display: block;
    position: fixed;
    left: 1rem;
    top: .5rem;
    width: 2rem;
    height: 2rem;
    background-color: var(--pico-background-color);
    border: 1px solid var(--pico-primary);
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    padding-top: .3rem;
}
/* animate.css er að hluta SCSS 
:root {  
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1; }*/

@keyframes backInDown {
  0% {
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
    /* animation: name duration timing-function delay iteration-count direction fill-mode;*/
    animation: backInDown 1s 1;
}

/*******shake x************/
@keyframes shakeX {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX { 
  display: block;
}

  .animate__shakeX:active {
    animation-name: shakeX;
    animation-duration: 1s;
    animation-iteration-count: 2;
  }

.spinner {
    animation: spin 10s infinite linear;
}
@keyframes spin {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg);}
}

/****************** tilkynning í borða *******************/
.alert-message {
    margin: 0;
    width: 100%;
    position: relative;
    top: 0;
    z-index: 1000;
    overflow: hidden;
}
.alert-message h3 {
    z-index: 1001;
    position: relative;
    width: 20rem;
    margin: 0 auto;
    padding: 1.6rem 0 0 0;
    animation-name: myAlert;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    text-align: center;
    color: var(--pico-color-indico-50);
}

@keyframes myAlert {
    from {bottom: -5rem;}
    to {bottom: 5rem;}
}

@media screen and (min-width:37.5rem){
    .alert-message h3 {
        width: 30rem;
    }
}

@media screen and (min-width:48rem){
    .flokkar {
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 1rem;
    }
    .alert-message h3 {
        animation-duration: 10s;
    }
    @keyframes myAlert {
        from {left: 60rem;}
        to {left: -35rem;}
}
}
@media screen and (min-width: 60rem) {
    .fyrirsögn {
        margin-top: -4rem;
    }
    .submit-form {
        width: 30%;
    }
    .flokkar {
        grid-template-columns: 1fr;
        margin-left:2rem;
    }
    .logo {
       font-size: 4.5rem;
    }
    .alert-message h3 {
        animation-duration: 10s;
    }
    @keyframes myAlert {
        from {left: 80rem;}
        to {left: -44rem;}
    }
}
@media screen and (min-width: 100rem) {
    .alert-message h3 {
        animation-duration: 12s;
    }
    @keyframes myAlert {
        from {left: 120rem;}
        to {left: -60rem;}
    }
}

/****************** Snowfall Effect *******************/
.snowflake {
    position: fixed;
    top: -20px;
    z-index: 9999;
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}
@keyframes fall {
    0% {
        transform: translateY(-20px) rotate(0deg);
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
    }
}