.site {
	max-width: 2250px;
}

/* Base Search Bar Styling */
/* Standardize format of the search bar's submit button for mobile devices */
input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	opacity: 1;
}

input[type="text"] {
	height: 25px;
}

::placeholder {
color: #000; /*set font color of search field */
}

input[type="submit"] {
	display: inline-block;
	height: 35px;
	border-radius: 0 4px 4px 0;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-sizing: border-box;
}
/* End of standardized formatting of submit button for mobile devices */

.searchForm {
	display: flex;
	text-align: center;
}

.search {
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
}

.search label {
	display: none;
	visibility:hidden;
}

.search input[type="text"] {
	border-radius: 4px 0 0 4px;
	border-width: 2px;
	padding: 7px 10px 7px 10px;
	background-color: #fff;
	-webkit-flex: 1;
	flex: 1;
	animation-name: glow;
	animation-duration: 10s;
	-moz-animation-name: glow;
	-moz-animation-duration: 10s;
	-webkit-animation-name: glow;
	-webkit-animation-duration: 10s;
	box-shadow: inset 0 0 10px rgb(108,152,197,1);
}

@keyframes glow {
	from {box-shadow: none;}
	to {box-shadow: inset 0 0 10px rgb(108,152,197,1);}
}

@-moz-keyframes glow {
	from {box-shadow: none;}
	to {box-shadow: inset 0 0 10px rgb(108,152,197,1);}
}

@-webkit-keyframes glow {
	from {box-shadow: none;}
	to {box-shadow: inset 0 0 10px rgb(108,152,197,1);}
}

.search input[type="submit"] {
	animation-name: glowButton;
	animation-duration: 6s;
	margin-left: -8px;
	border-radius: 0 4px 4px 0;
	padding: 6px 10px 33px 8px;
	color: #000; 
	background-color: #e6e6e6;
	border-color: #31a127;
	border-width: 2px;
	-webkit-flex: 1;
	flex: 1;
}

@keyframes glowButton {
	from {background-color: #6c98c5;}
	to {background-color: #e6e6e6;}
}

.search input[type="submit"]:hover {
	color: #fff; 
	background-color: #31a127;
	border-color: #003366; 
	-webkit-flex: 1;
	flex: 1;
}

.search input[type="submit"]:active {
	color: #000; 
	background-color: #6c98c5;
	border-color: #31a127;
	-webkit-flex: 1;
	flex: 1;
}
/* End Base Search Bar Styling */

.animate__swing {
	animation-delay: 3s;
}

/* Base Mobile Search Bar Styling */
@media (max-width: 340px) {
.search input[type="text"],
.search input[type="submit"] {
	border-radius: 4px;
}

.search input[type="text"] {
	width: 80%;
}

.search input[type="submit"] {
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
}
/* End Base Mobile Search Bar Styling */

/* Begin Welcome Animation Centering Settings */
@media (max-width: 340px) {
.centered {
	top: 30%; /* new y coordinate used to position animated element */
	left: 23%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 341px) and (max-width: 400px) {
.centered {
	top: 33%; /* new y coordinate used to position animated element */
	left: 25.5%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 401px) and (max-width: 431.5px) {
.centered {
	top: 33%; /* new y coordinate used to position animated element */
	left: 27.5%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 431.5px) and (max-width: 959px) {
.centeredSection {
	left: 52%;
}
/* Note: 50% x coordinate works for smaller mobile and desktop viewports */
}

@media (min-width: 431.5px) and (max-width: 470px) {
.centered {
	top: 29%; /* new y coordinate used to position animated element */
	left: 21%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 470px) and (max-width: 500px) {
.centered {
	top: 29%; /* new y coordinate used to position animated element */
	left: 23%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 501px) and (max-width: 540px) {
.centered {
	top: 29%; /* new y coordinate used to position animated element */
	left: 25%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 541px) and (max-width: 600px) {
.centered {
	top: 30%; /* new y coordinate used to position animated element */
	left: 27%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 601px) and (max-width: 640px) {
.centered {
	top: 33%; /* new y coordinate used to position animated element */
	left: 28.5%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 641px) and (max-width: 740px) {
.centered {
	top: 35%; /* new y coordinate used to position animated element */
	left: 30%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 741px) and (max-width: 840px) {
.centered {
	top: 36%; /* new y coordinate used to position animated element */
	left: 33%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 841px) and (max-width: 960px) {
.centered {
	top: 36%; /* new y coordinate used to position animated element */
	left: 35%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 960px) and (max-width: 1013px) {
img {
	height: 100%; /* workaround to fix gap at bottom of image for these breakpoints */
}
}

@media (min-width: 961px) and (max-width: 1060px) {
.centered {
	top: 36%; /* new y coordinate used to position animated element */
	left: 31.5%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 1061px) and (max-width: 1160px) {
.centered {
	top: 36%; /* new y coordinate used to position animated element */
	left: 33%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 1161px) and (max-width: 1260px) {
.centered {
	top: 37%; /* new y coordinate used to position animated element */
	left: 35%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 1261px) and (max-width: 1460px) {
.centered {
	top: 40%; /* new y coordinate used to position animated element */
	left: 37%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 1461px) and (max-width: 1560px) {
.centered {
	top: 40%; /* new y coordinate used to position animated element */
	left: 38%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 1561px) and (max-width: 1660px) {
.centered {
	top: 40%; /* new y coordinate used to position animated element */
	left: 40%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 1661px) and (max-width: 1760px) {
.centered {
	top: 40%; /* new y coordinate used to position animated element */
	left: 41%; /* new x coordinate used to position animated element */
}
}

@media (min-width: 1761px) {
.centered {
	top: 40%; /* new y coordinate used to position animated element */
	left: 42%; /* new x coordinate used to position animated element */
}
}
/* End Welcome Animation Centering Settings */

@media (max-width: 431.5px) {
/* .5 was used as a workaround to fix responsiveness conflict between sticky nav not working
	at the 431px breakpoint and rotated menu not working properly at the 432px breakpoint */
.main-nav {
	position: sticky;
	top: 0;
}

/* Begin styles which should be in style-sections sheet */
.cardsSections {
	padding-left: 0px;
}
}

@media (min-width: 432px) and (max-width: 959px) {
.centeredSection {
	left: 50%;
/* appears adding this helps center the non-home page titles, even though it seems redundant
since the centeredSection's left padding style is set to 50% in the style-sections sheet */
}
}
/* End styles which should be in style-sections sheet * / 
	/* Note: the .cardSections styles above are being applied in this sheet, 
	since they weren't taking effect in the style-sections sheet (where I'd like to put them) */

@media (max-width: 959.5px) {
/* .5 was used as a workaround to fix responsiveness conflict between not enough bottom margin
for the search bar at the 959px breakpoint and a gap in the elements if bottom margin is applied */
.search {
	margin-bottom: 50px;
	padding-top: 0px;
}
}

@media (max-width: 960px) {
.animate__fadeInUpBig {
	animation: none !important;
}
}

@media (min-width: 960px) {
.masthead {
	max-width: 250px;
	padding: 0 5px 0 25px; /* Needed padding setting for Firefox. Padding still needed in Chrome,
	but Chrome padding is not nearly as phinicky as it can be applied to other classes (Ex: .search) */
}

.logo {
	margin-top: -40px;
}

.animate__fadeInUpBig {
	animation-delay: 0.5s;
}

.site-title {
	margin-bottom: 20px;
	padding-bottom: 0px;
}

.search {
	padding-top: 0px;
}

.search input[type="text"],
.search input[type="submit"] {
	border-radius: 4px;
}

.search input[type="submit"] {
	margin-top: 20px;
	margin-left: 0px;
}
}

@media (min-width: 1150px) and (max-width: 1250px) {
.search {
	margin-top: 35px;
}
}

@media (min-width: 1251px) and (max-width: 1350px) {
.search {
	margin-top: 75px;
}
}

@media (min-width: 1351px) and (max-width: 1450px) {
.search {
	margin-top: 125px;
}
}

@media (min-width: 1450px) {
.search {
	margin-top: 200px;
}
}

@media (min-width: 2250px) {
.trigger {
	display: none;
}

.trigger:focus {
	outline-color: white;
}

.main-nav {
	width: 98.9%;
	grid-area: main;
	transform: rotate(180deg);
	height: 50px;
	margin-top: -99px;
	margin-left: 258px;
	padding-right: 0px;
	grid-column: 2/5;
	grid-row: 2/4;
}

.main-nav ul {
	width: 100%;
	flex-direction: row;
	transform: rotate(180deg);
}
}