:root { 
    --color-bg-appbar: #0006;
    --color-sign-bg1: rgb(88, 88, 136);
    --color-sign-bg1-dark: rgb(23, 23, 65);
    --color-sign-bg2: rgb(255, 147, 147);
    --color-sign-bg2-dark: rgb(194, 0, 0);
}

/* Sign styling */
.account-bg {
    @media screen and (min-width: 40rem) {
        background-image: linear-gradient(135deg, var(--color-sign-bg1) 50%, var(--color-sign-bg2));
        background-size: 150% 150%;
        animation: breathe 18s ease infinite;
    }
}

.dark .account-bg {
    @media screen and (min-width: 40rem) {
        background-image: linear-gradient(135deg, var(--color-sign-bg1-dark) 50%, var(--color-sign-bg2-dark));
        /* background-image: linear-gradient(135deg, var(--color-sign-bg1-dark), 50%, var(--color-sign-bg2-dark)); */
        background-size: 150% 150%;
        animation: breathe 18s ease infinite;
    }
}

@keyframes breathe {
	0% {
		background-position: 0%;
	}
	20% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0%;
	}
}

@keyframes shake {
  0% { transform: translateX(0px); }
  25% { transform: translateX(-25px); }
  75% { transform: translateX(25px); }
  100% { transform: translateX(0px); }
}

.signbox-shake {
  animation: shake 0.15s;
  animation-iteration-count: 2;
}

.signbox-loading {
    filter: brightness(0.75);
}