.gradient-text {
	font-size: 48px;
    background: linear-gradient(45deg, gold, white, gold, gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
	filter: drop-shadow(1px 1px 10px white);
	cursor: default;
	/* border: 1px solid white; */
	width: 30%;
	animation: vibration 5s ease-in-out infinite;
	margin-left: 4%;
}

.usFlag {
  width: 80px;
  height: 50px;
  background-image: url('https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg');
  background-size: cover;
  background-repeat: no-repeat;
  animation: flagWave 1.5s infinite ease-in-out;

	/* margin-top: -78px; */
	/* width: 100%; */
	position: absolute;
	scale: 3.5;
	right: 8%;
	top: 10%;
	border: .5px outset rgb(170, 169, 169);
	box-shadow: 0px 0px 20px white;

}

@keyframes flagWave {
	0% { transform: rotateZ(0deg); }
	10% { transform: rotateZ(1deg); }
	20% { transform: rotateZ(2deg); }
	30% { transform: rotateZ(3deg); }
	40% { transform: rotateZ(2deg); }
	50% { transform: rotateZ(1deg); }
	60% { transform: rotateZ(0deg); }
	70% { transform: rotateZ(-1deg); }
	80% { transform: rotateZ(-2deg); }
	90% { transform: rotateZ(-1deg); }
	100% { transform: rotateZ(0deg); }
}


#titleNav {
	display: flex;
	justify-content: left;
	align-items: center;

	width: 100%;
	height: 20%;
	margin-bottom: 3%;
}

.golden {
	color: rgb(0, 0, 0);
	text-decoration: none;
	padding-right: 5px;
}

.civicTest, .readingTest, .writingTest, .yesNoTest {
	margin-bottom: 10px;
	width: 30%;
	/* border-top-left-radius: 50px;
	border-top-right-radius: 0%;
	border-bottom-right-radius: 50px;
	border-bottom-left-radius: 0%; */
	background-color: rgb(209, 197, 138);
	background-image: linear-gradient(45deg, transparent 10%, white 30%, transparent 40%, transparent 75%, transparent 100%);
	/* background: linear-gradient(45deg, rgb(209, 197, 138), rgb(209, 197, 138), rgb(209, 197, 138), white, rgb(209, 197, 138), rgb(209, 197, 138)); */
	box-shadow: 0px 0px 25px rgb(255, 232, 84);
	backdrop-filter: blur(2px);
	border: 3px outset rgb(255, 255, 255);
	padding: 10px;
	margin-left: 50px;
	border: 1px outset white;
	transition: transform 1s;
	border-radius: 50% 100% / 100% 50%;

} 

.civicTest {
	background: linear-gradient(45deg, rgb(209, 197, 138), rgb(209, 197, 138), white, rgb(209, 197, 138), rgb(209, 197, 138));

}

.civicTest:hover {
	background: linear-gradient(45deg, rgb(255, 215, 35), rgb(255, 215, 35), white, rgb(255, 215, 35), rgb(255, 215, 35));
}

.writingTest {
	background: linear-gradient(45deg, rgb(209, 197, 138), rgb(209, 197, 138), rgb(209, 197, 138), white, rgb(209, 197, 138), rgb(209, 197, 138));
}

.writingTest:hover {
	background: linear-gradient(45deg, rgb(255, 215, 35), rgb(255, 215, 35), rgb(255, 215, 35), white, rgb(255, 215, 35), rgb(255, 215, 35));
}

.readingTest {
	background: linear-gradient(45deg, rgb(209, 197, 138), rgb(209, 197, 138), rgb(209, 197, 138), white, rgb(209, 197, 138));
}

.readingTest:hover {
	background: linear-gradient(45deg, rgb(255, 215, 35), rgb(255, 215, 35), rgb(255, 215, 35), white, rgb(255, 215, 35));
}

.yesNoTest {
	background: linear-gradient(45deg, rgb(209, 197, 138), rgb(209, 197, 138), rgb(209, 197, 138), rgb(209, 197, 138), rgb(209, 197, 138), rgb(209, 197, 138), white, rgb(209, 197, 138));
}

.yesNoTest:hover {
	background: linear-gradient(45deg, rgb(255, 215, 35), rgb(255, 215, 35), rgb(255, 215, 35), rgb(255, 215, 35), rgb(255, 215, 35), rgb(255, 215, 35), white, rgb(255, 215, 35));
}

.linkStyle {
	color: black;
	font-size: 20px;
	text-decoration: underline;
	display: block;
	height: 100%;
	width: 100%;
	padding: 6px;
	font-family:cursive;
	
}

.civicTest:hover, .readingTest:hover, .writingTest:hover, .yesNoTest:hover {
	/* background-image: linear-gradient(#FFFFE0, rgb(255, 194, 40), #FFFFE0); */
	border: 2px outset white;
	box-shadow: 1px 1px 30px white;
	transition: transform .5s;
	transform: translateX(100px);
}


@keyframes moveDown {
    from {
        transform: translateY(100%); /* Start off the screen to the left */
    }
    to {
        transform: translateY(-100%); /* Move across the screen to the right */
    }
}

.verticalRunning {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: -500;
}

.verRun1, .verRun2, .verRun3, .verRun4, .verRun5, .verRun6, .verRun7, .verRun8 {
/*	height: 100px;*/
	height: 1000px;
	font-size: 20px;
	width: 20px;
	font-weight: normal;
	color: gold;
    animation-name: moveDown;
/*    animation-duration: 2s;*/
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 100;
    overflow: hidden; /* Prevent content overflow during animation */
    white-space: nowrap; /* Prevent text wrapping */
    position: relative; /* Ensure positioning context */
}

label, h3, h5 {
	display: flex;
	justify-content: center;
}



.verRun1 {
	height: 100px;
	animation-duration: 2s;
}

.verRun2 {
	left: 25%;
	height: 50px;
	animation-duration: 3s;
	font-size: 12px;
}

.verRun3 {
	left: 50%;
	height: 10%;
	animation-duration: 2s;
}


.verRun4 {
	left: 75%;
	height: 10%;
	animation-duration: 3s;
	font-size: 15px;
}


.verRun5 {
	left: 90%;
	height: 10%;
	animation-duration: 2s;
}

.verRun6 {
	left: 95%;
	height: 10%;
	animation-duration: 3s;
}

.verRun7 {
	top: 30%;
	left: 30%;
	height: 10%;
	animation-duration: 1.5s;
	font-size: 30px;
}

.verRun8 {
	top: 1%;
	left: 85%;
	height: 20%;
	animation-duration: 2s;
}



.logoutTextStyle {
	font-size: 25px;
	color: goldenrod;
	font-weight: bold;
	background-color: transparent;
	border-color: transparent;
/*	z-index: 20;*/


}

.logoutButtonStyle {
	font-size: 25px;
	align-content: center;
	text-align: center;
	border-color: white;
	border-style: solid;
	height: 55px;
	width: 55px;
	border-radius: 50%;
	
	position: absolute;
	top: 5%;
	left: 90%;
/*	border: white outset 1px;*/
	box-shadow: 0px 0px 0px 2px rgba(218,165,32, 0.9); 

	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	border: white inset 2px;

	z-index: 500;
}

.logoutButtonStyle:hover {
	border: white outset 1px;
	box-shadow: 0px 0px 0px 4px rgba(238,232,170, 0.9);
	text-shadow: -1px 0 palegoldenrod, 0 1px palegoldenrod, 1px 0 palegoldenrod, 0 -1px palegoldenrod;

	/*text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	border: white inset 2px;*/
}

body {
	width: 100%;
    height: 100vh; /* Adjust as needed*/ 
    background-image: url("liberty.avif") !important;
    background-size: cover; /* Ensure image covers the element */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat;
}

#siteFooter {
    text-align: center;
    /* padding: 15px; */
    /* background-color: #f0f0f0; */
    color: #333;
    font-size: 15px;
    margin-top: 10%;
}

.visitCount {
	/* font-size: 14px;  */
	color: #555; 
	margin-top: 0px;
}


.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: rgb(255, 255, 255);
  padding: 30px;
  padding-top: 0;
  /* height: 70%;
  max-width: 50%; */
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.disclaimerTitle {
 color: orangered; 
 font-size: 40px; 
 box-shadow: 1px 1px 10px rgb(144, 142, 142); 
 border-radius: 8px;
 background-color: rgb(255, 247, 236);
 font-family:Georgia, 'Times New Roman', Times, serif;
}

.modal-content button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #00467f;
  color: rgb(255, 255, 255);
  border: none;
  border-radius: 16px;
  border: 1px outset silver;
  background-image: linear-gradient(white, rgb(68, 174, 250), white);
  box-shadow: 1px 3px 10px rgb(143, 137, 137);
  cursor: pointer;
}

.modal-content button:hover {
    background-image: linear-gradient(white, rgb(157, 214, 255), white);
    box-shadow: 1px 1px 10px rgb(143, 137, 137);
}

.modal-content button:focus {
    border: 1px inset silver;
    box-shadow: 1px 1px 5px rgb(255, 255, 255);
}

.modal-content a {
  color: #00467f;
  text-decoration: underline;
}






























/* Ipad Pro */
@media (max-width: 1030px) {
  	body {
		/* margin: 0; */
		width: 100%;
		height: 70vh; /* Adjust as needed*/ 
		background-image: url("liberty.avif") !important;
		background-size: cover; /* Ensure image covers the element */
		background-size: 210%; /* zoomed out a bit */
		background-position: 60% center; /* Center the image */
		background-repeat: no-repeat;
		/* overflow-y: hidden; */
		overflow: hidden;
	}

	.usFlag {
		scale: 2;
		right: 7%;
		top: 5%;
		border: 1px outset rgb(170, 169, 169);
	}

	.gradient-text {
		width: 70%;
		font-size: 40px;
		margin-top: 0%;
		-webkit-background-clip: text;
		-webkit-text-fill-color: #ffe77f;
		background-clip: text;
		text-fill-color: transparent;
		filter: drop-shadow(1px 1px 10px rgb(255, 255, 255));
		cursor: default;
		text-shadow:
		1px 1px 0 #181616c8,
		1px 1.5px 0 #1a1919,
		1px 2px 0 rgb(32, 32, 32);

		animation: vibration 5s ease-in-out infinite;
		margin-left: 5%;
	}

	.linkStyle {
		color: rgb(10, 26, 151);
		color: black;
		font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		text-decoration: underline;
	}

	#siteFooter {
		margin-left: -10px;
		text-align: center;

		color: #333;
		font-size: 14px;
		margin-top: 35%;
		padding-top: 40px;
		padding-bottom: 10px;
		background: linear-gradient(60deg, #c8b698, #c8b698, #c8b698, #c8b698, white, #c8b698, #c8b698);

		background-image: linear-gradient(white, #e6bb6f, #edd6ad, white);
	}
}
































/* Ipad Air */
@media (max-width: 850px) {
  	body {
		/* margin: 0; */
		width: 100%;
		height: 70vh; /* Adjust as needed*/ 
		background-image: url("liberty.avif") !important;
		background-size: cover; /* Ensure image covers the element */
		background-size: 225%; /* zoomed out a bit */
		background-position: 60% center; /* Center the image */
		background-repeat: no-repeat;
		/* overflow-y: hidden; */
		overflow: hidden;
	}

	.usFlag {
		scale: 2;
		right: 7%;
		top: 5%;
		border: 1px outset rgb(170, 169, 169);
	}

	.gradient-text {
		width: 70%;
		font-size: 40px;
		margin-top: 5%;
		-webkit-background-clip: text;
		-webkit-text-fill-color: #ffe77f;
		background-clip: text;
		text-fill-color: transparent;
		filter: drop-shadow(1px 1px 10px rgb(255, 255, 255));
		cursor: default;
		text-shadow:
		1px 1px 0 #181616c8,
		1px 1.5px 0 #1a1919,
		1px 2px 0 rgb(32, 32, 32);

		animation: vibration 5s ease-in-out infinite;
		margin-left: 5%;
	}

	.linkStyle {
		color: rgb(10, 26, 151);
		color: black;
		font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		text-decoration: underline;
	}

	#siteFooter {
		margin-left: -10px;
		text-align: center;

		color: #333;
		font-size: 14px;
		margin-top: 32%;
		padding-top: 40px;
		padding-bottom: 10px;
		background: linear-gradient(60deg, #c8b698, #c8b698, #c8b698, #c8b698, white, #c8b698, #c8b698);

		background-image: linear-gradient(white, #e6bb6f, #edd6ad, white);
	}
}





























/* Ipad Mini */
@media (max-width: 800px) {
  	body {
		/* margin: 0; */
		width: 100%;
		height: 70vh; /* Adjust as needed*/ 
		background-image: url("liberty.avif") !important;
		background-size: cover; /* Ensure image covers the element */
		background-size: 220%; /* zoomed out a bit */
		background-position: 60% center; /* Center the image */
		background-repeat: no-repeat;
		/* overflow-y: hidden; */
		overflow: hidden;
	}

	.usFlag {
		scale: 2;
		right: 7%;
		top: 5%;
		border: 1px outset rgb(170, 169, 169);
	}

	.gradient-text {
		width: 70%;
		font-size: 40px;
		margin-top: 5%;
		-webkit-background-clip: text;
		-webkit-text-fill-color: #ffe77f;
		background-clip: text;
		text-fill-color: transparent;
		filter: drop-shadow(1px 1px 10px rgb(255, 255, 255));
		cursor: default;
		text-shadow:
		1px 1px 0 #181616c8,
		1px 1.5px 0 #1a1919,
		1px 2px 0 rgb(32, 32, 32);

		animation: vibration 5s ease-in-out infinite;
		margin-left: 5%;
	}

	.linkStyle {
		color: rgb(10, 26, 151);
		color: black;
		font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		text-decoration: underline;
	}

	#siteFooter {
		margin-left: -10px;
		text-align: center;

		color: #333;
		font-size: 14px;
		margin-top: 25%;
		padding-top: 40px;
		padding-bottom: 10px;
		background: linear-gradient(60deg, #c8b698, #c8b698, #c8b698, #c8b698, white, #c8b698, #c8b698);

		background-image: linear-gradient(white, #e6bb6f, #edd6ad, white);
	}
}






















/* iPhone Pro Max */
@media (max-width: 450px) {
  	body {
	width: 100%;
    height: 70vh; /* Adjust as needed*/ 
    background-image: url("liberty.avif") !important;
    background-size: cover; /* Ensure image covers the element */
	background-size: 305%; /* zoomed out a bit */
    background-position: 65% center; /* Center the image */
    background-repeat: no-repeat;
}

#titleNav {
	/* width: 100%; */
}

.gradient-text {
	width: 70%;
	font-size: 25px;
	margin-top: -6%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffe77f;
    background-clip: text;
    text-fill-color: transparent;
	filter: drop-shadow(1px 1px 10px rgb(255, 255, 255));
	cursor: default;
	text-shadow:
    1px 1px 0 #181616c8,
    1px 1.5px 0 #1a1919,
    1px 2px 0 rgb(32, 32, 32);

	animation: vibration 5s ease-in-out infinite;
	margin-left: 5%;
}

.usFlag {
	scale: 1;
	right: 1.5%;
	top: 1.7%;
	border: 1px outset rgb(170, 169, 169);
}

.verRun1 {
	height: 10%;
	top: 15%;
	animation-duration: 2s;
}

.verRun7 {
	top: 10%;
	left: 30%;
	height: 10%;
	animation-duration: 1.5s;
	font-size: 30px;
}

.verRun8 {
	top: 1%;
	left: 55%;
	height: 10%;
	animation-duration: 2s;
}

.civicTest, .readingTest, .writingTest, .yesNoTest {
	box-shadow: 0px 0px 15px white;
	backdrop-filter: blur(2px);
	border: 3px outset rgb(255, 255, 255);
	width: 50%;
	margin-left: 15px;
	border-radius: 40% 100% / 100% 40%;
}

.civicTest:hover, .readingTest:hover, .writingTest:hover, .yesNoTest:hover {
	/* background-image: linear-gradient(#FFFFE0, goldenrod, #FFFFE0); */
	border: 2px inset white;
	box-shadow: 1px 1px 30px white;
	transition: transform .5s;
	transform: translateX(100px);
}

.linkStyle {
	color: rgb(10, 26, 151);
	color: black;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-decoration: underline;
}

.golden {
	color: rgb(0, 0, 0);
	text-decoration: none;
	padding-right: 5px;
}

#siteFooter {
	margin-left: -10px;
    text-align: center;
	/* height: 10%; */
    /* padding: 30px; */
    /* background-color: #c8b698; */
    color: #333;
    font-size: 14px;
    margin-top: 15%;
	padding-top: 40px;
	padding-bottom: 10px;
	background: linear-gradient(60deg, #c8b698, #c8b698, #c8b698, #c8b698, white, #c8b698, #c8b698);
	/* background-image: linear-gradient(white, #ceb07d, #bf9570); */
	background-image: linear-gradient(white, #e6bb6f, #edd6ad, white);
}

.visitCount {
	margin-top: -10px;
}

}




























/* iPhone 13 */
@media (max-width: 390px) {
.gradient-text {
	width: 70%;
	font-size: 25px;
	margin-top: -3%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffe77f;
    background-clip: text;
    text-fill-color: transparent;
	filter: drop-shadow(1px 1px 10px rgb(255, 255, 255));
	cursor: default;
	text-shadow:
    1px 1px 0 #181616c8,
    1px 1.5px 0 #1a1919,
    1px 2px 0 rgb(32, 32, 32);

	animation: vibration 5s ease-in-out infinite;
	margin-left: 5%;
}

	.linkStyle {
		font-size: 18px;
		color: black;
		font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		text-decoration: underline;
	}

	#siteFooter {
	margin-left: -10px;
    text-align: center;
    color: #333;
    font-size: 14px;
    margin-top: 10%;
	padding-top: 40px;
	padding-bottom: 10px;
	background: linear-gradient(60deg, #c8b698, #c8b698, #c8b698, #c8b698, white, #c8b698, #c8b698);
	background-image: linear-gradient(white, #e6bb6f, #edd6ad, white);
}
}