html, body {
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: background-color 0.5s;
}

header, footer {
    background-color: #2879ff;
    color: white;
    text-align: center;
    padding: 1em 0;
}

header {
    height: 5vh;
    font-size: 2.5em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;  /* Added padding to give some space */
}


main {
    flex: 1;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}


footer {
    height: 2vm;
}

.hamburger-menu {
    font-size: 2em;
    cursor: pointer;
}

.overlay-menu {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 6%;
    width: 95%;
    text-align: center;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.overlay-content button {
    padding: 15px;
    text-align: center;
    text-decoration: none;
    font-size: 32px;
    cursor: pointer;
}

.overlay-close-button {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 4em;
    cursor: pointer;
    color: white;
}


.dark-theme {
    background-color: black;
    color: white;
}

.dark-theme header, .dark-theme footer {
    background-color: gray;
}

.daForm {
	margin: 0 auto 5px;
	padding: 5px 15px 0;
}

.formBoxes {
    width: 95%;
    height: 34px;
    margin-bottom: 15px;
    padding: 21px 12px 19px;
    background-color: #e0e0e0;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    color: #333333;
    font-size: 25px;
    font-weight: 700;
/*    text-transform: uppercase;  */
}

.formLabels {
    display: inline-block;
    width: 80%;
    margin-bottom: 5px;
    padding: 0 12px;
    color: #333333;
    font-size: 17px;
}

.formButtons {
    cursor: pointer;
    height: 48px;
    width: 40%;
    margin: 10px 25px 15px;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    font-family: Helvetica,Arial,sans-serif;
    background-color: #4254F4;
    color: #ffffff;
    line-height: 1.5;
    text-transform: uppercase;
    box-shadow: 0 5px 0 0 rgba(128, 128, 128, .4)
    transition: color .5s,background-position .5s,box-shadow .5s;
}


.formDropDowns {
    width: 80%;
    height: 50px;
    margin-bottom: 15px;
    padding: 5px;
    background-color: #e0e0e0;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    color: #797878;
    font-size: 35px;
    font-weight: 700;
    text-transform: uppercase;
}


.gogoButton {
	box-shadow: 3px 4px 0px 0px #1564ad;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:10px;
	border:1px solid #337bc4;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-family:Arial;
	font-size:25px;
	font-weight:bold;
	padding:12px 44px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
    width: 100%;
}
.gogoButton:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
.gogoButton:active {
	position:relative;
	top:1px;
}


.gogoGreenButton {
	box-shadow: 3px 4px 0px 0px #1564ad;
	background:linear-gradient(to bottom, #33cc33 5%, #009900 100%);
	background-color:#33cc33;
	border-radius:10px;
	border:1px solid #337bc4;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-family:Arial;
	font-size:25px;
	font-weight:bold;
	padding:12px 44px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
    width: 100%;
}
.gogoGreenButton:hover {
	background:linear-gradient(to bottom, #009900 5%, #33cc33 100%);
	background-color:#009900;
}
.gogoGreenButton:active {
	position:relative;
	top:1px;
}


.gogoRedButton {
	box-shadow: 3px 4px 0px 0px #1564ad;
	background:linear-gradient(to bottom, #ff3300 5%, #cc0000 100%);
	background-color:#ff3300;
	border-radius:10px;
	border:1px solid #337bc4;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-family:Arial;
	font-size:25px;
	font-weight:bold;
	padding:12px 44px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
    width: 100%;
}
.gogoRedButton:hover {
	background:linear-gradient(to bottom, #cc0000 5%, #ff3300 100%);
	background-color:#cc0000;
}
.gogoRedButton:active {
	position:relative;
	top:1px;
}


.DominoCalculatorButton {
	box-shadow: 3px 4px 0px 0px #1564ad;
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	background-color:#79bbff;
	border-radius:10px;
	border:1px solid #337bc4;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-family:Arial;
	font-size:25px;
	font-weight:bold;
	padding:12px 44px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
    width: 100%;
}
.DominoCalculatorButton:hover {
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	background-color:#378de5;
}
.DominoCalculatorButton:active {
	position:relative;
	top:1px;
}





/* 3d button */
	  .pushable {
		position: relative;
		border: none;
		background: transparent;
		padding: 0;
		cursor: pointer;
		outline-offset: 4px;
		transition: filter 250ms;
		max-width: 500px;
	  }
	  .shadow {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 12px;
		background: hsl(0deg 0% 0% / 0.25);
		will-change: transform;
		transform: translateY(2px);
		transition:
		  transform
		  600ms
		  cubic-bezier(.3, .7, .4, 1);
	  }
	  .edge {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 12px;
		background: linear-gradient(
		  to left,
		  hsl(340deg 100% 16%) 0%,
		  hsl(340deg 100% 32%) 8%,
		  hsl(340deg 100% 32%) 92%,
		  hsl(340deg 100% 16%) 100%
		);
	  }
	  .front {
		display: block;
		position: relative;
		padding: 12px 42px;
		border-radius: 12px;
		font-size: 35px;
		color: white;
		background: hsl(345deg 100% 47%);
		will-change: transform;
		transform: translateY(-4px);
		text-transform: uppercase;
		transition:
		  transform
		  600ms
		  cubic-bezier(.3, .7, .4, 1);
	  }
	  .pushable:hover {
		filter: brightness(110%);
	  }
	  .pushable:hover .front {
		transform: translateY(-6px);
		transition:
		  transform
		  250ms
		  cubic-bezier(.3, .7, .4, 1.5);
	  }
	  .pushable:active .front {
		transform: translateY(-2px);
		transition: transform 34ms;
	  }
	  .pushable:hover .shadow {
		transform: translateY(4px);
		transition:
		  transform
		  250ms
		  cubic-bezier(.3, .7, .4, 1.5);
	  }
	  .pushable:active .shadow {
		transform: translateY(1px);
		transition: transform 34ms;
	  }
	  .pushable:focus:not(:focus-visible) {
		outline: none;
	  }
/* 3d button */





.box-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%; /* Adjust based on your design requirements */
    gap: 10px; /* Space between boxes */
}

.box {
    flex: 15%; /* Each box takes up 25% of the container width, minus the gap */
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-radius: 5px;
	font-size: 20px;
}

.box-active {
	background-color: yellowgreen;
	color:white;
}






			.gold {
				background-color: #0b1826;
				text-transform: uppercase;
				font-size:50px;
				font-weight: bold;
				   background-image: linear-gradient(
					to right,
					#462523 0,
						#cb9b51 22%, 
					#f6e27a 45%,
					#f6f2c0 50%,
					#f6e27a 55%,
					#cb9b51 78%,
					#462523 100%
					);
				   color:transparent;
				   -webkit-background-clip:text;
			}