/* Utility Styles */

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: rgb(26, 115, 232); /* Darker Google Blue */
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

.glitch {
    position: relative;
    animation: glitch-animation 0.02s linear infinite alternate; /* Made glitch animation faster */
}

@keyframes glitch-animation {
    0% {
        clip-path: inset(0% 0% 90% 0%); /* Top slice, 10% height */
        transform: translateX(-15px);
        text-shadow: 8px 0 rgba(0, 153, 0, 0.9), -8px 0 rgba(0, 153, 0, 0.9);
    }
    10% {
        clip-path: inset(15% 0% 70% 0%); /* Slice, 15% height */
        transform: translateX(12px);
        text-shadow: -6px 0 rgba(0, 153, 0, 0.9), 6px 0 rgba(0, 153, 0, 0.9);
    }
    20% {
        clip-path: inset(30% 0% 50% 0%); /* Middle slice, 20% height */
        transform: translateX(-10px);
        text-shadow: 5px 0 rgba(0, 153, 0, 0.9), -5px 0 rgba(0, 153, 0, 0.9);
    }
    30% {
        clip-path: inset(50% 0% 30% 0%); /* Middle slice, 20% height */
        transform: translateX(18px);
        text-shadow: -9px 0 rgba(0, 153, 0, 0.9), 9px 0 rgba(0, 153, 0, 0.9);
    }
    40% {
        clip-path: inset(70% 0% 15% 0%); /* Slice, 15% height */
        transform: translateX(-7px);
        text-shadow: 4px 0 rgba(0, 153, 0, 0.9), -4px 0 rgba(0, 153, 0, 0.9);
    }
    50% {
        clip-path: inset(85% 0% 0% 0%); /* Bottom slice, 15% height */
        transform: translateX(14px);
        text-shadow: -7px 0 rgba(0, 153, 0, 0.9), 7px 0 rgba(0, 153, 0, 0.9);
    }
    60% {
        clip-path: inset(5% 0% 80% 0%); /* Top slice, 15% height */
        transform: translateX(-13px);
        text-shadow: 6px 0 rgba(0, 153, 0, 0.9), -6px 0 rgba(0, 153, 0, 0.9);
    }
    70% {
        clip-path: inset(25% 0% 60% 0%); /* Slice, 15% height */
        transform: translateX(9px);
        text-shadow: -4px 0 rgba(0, 153, 0, 0.9), 4px 0 rgba(0, 153, 0, 0.9);
    }
    80% {
        clip-path: inset(45% 0% 40% 0%); /* Middle slice, 15% height */
        transform: translateX(-16px);
        text-shadow: 8px 0 rgba(0, 153, 0, 0.9), -8px 0 rgba(0, 153, 0, 0.9);
    }
    90% {
        clip-path: inset(60% 0% 25% 0%); /* Slice, 15% height */
        transform: translateX(11px);
        text-shadow: -5px 0 rgba(0, 153, 0, 0.9), 5px 0 rgba(0, 153, 0, 0.9);
    }
    100% {
        clip-path: inset(75% 0% 5% 0%); /* Bottom slice, 20% height */
        transform: translateX(-9px);
        text-shadow: 4px 0 rgba(0, 153, 0, 0.9), -4px 0 rgba(0, 153, 0, 0.9);
    }
}