html {
background-color: #ffffff; /* Page background */
  margin: 0 0 0 0;
  height: 100vh;
  box-sizing: border-box;
}
body {
  margin: 0 0 0 0;
  background-color: #414042; /* Page background */
  box-sizing: border-box;
  height: 100%;
}

.page {
  margin: auto; /* centers everything horizontally */
}

/* Spacing between header image and the menu */
#header {
	margin-top: 64px;
	margin-bottom: 32px;
	margin-right: 0px;
	margin-left: 0px;
	background-color: #ffffff;
}

#outer {
background-color: #ffffff;
}

#menu { 
	text-align: center;
	font-family: 'Segoe UI', sans-serif;
	font-size: 24px;
	color: #1D737E; /* Dark Cyan */
    width: 700px;
	
	display: flex; /* Adjusts menu spacing */
    justify-content: space-between; /* Adjusts menu spacing */
	
	/* Spacing between menu and the top of the page */
	margin-top: 0px;
}

.font {
	font-family: Calibri;
	color: #414042;
}

.textalignleft {
	text-align: left;
}

nav {
	position: sticky;
    top: 0;          /* stick to the top of the viewport */
    z-index: 1000;   /* make sure it stays above other elements */
	backdrop-filter: blur(10px);
}

#menu > div {
  flex: 1;              /* each menu item gets equal space */
  display: flex;        /* let the button inside expand */
  justify-content: center; /* center button text if width grows */
  margin-left: 0px;
  margin-right: 0px;
  text-align: center;

}

.menubutton {
  width: 140px;
  padding-block: 16px 16px;
  border: none;
  color: #1D737E;
  font-size: 24px;
  margin: 0px;
  cursor: pointer;
  border-radius: 4px 4px 0px 0px;
  background: rgba(255, 255, 255, 0);
}

.center {
	text-align: center;
}

/* the following is the color for the menu when a button is press for each individual page so the user can see which page they are on */

.menubutton.active {
  color: #ffffff;
}

.menubutton.active.free,
.menubutton.active.learn,
.menubutton.active.donate,
.menubutton.active.contact {
  background-color: #79CDCD; /* Neon Cyan */
}

.menubutton.active.assets {
  background-color: #ED1C24; /* Bright Red */
}

button:hover {
	background-color: #414042; /*dark gray*/
	color: ffffff;
}

.russo-one-regular {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

a:visited,
a:active,
a:link {
	text-decoration: none;
	color: #1D737E;
	background: rgba(255, 255, 255, 0);
}

#hero {
  color: white;
  padding-top: 256px;
  width: 700px;
}

#herobg {
  width: 100%;
  height: 800px;
  background: url("../images/sighero.jpg") no-repeat center center;
  background-size: cover;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

p {
	margin-top: 0px;
	margin-bottom: 0px;
}

#hero > p {
	color: white;
}

.hugetext {
	font-size: 128px;
}

.largetext {
	font-size: 36px;
}

.mediumtext {
	font-size: 32px;
}

.smalltext {
	font-size: 16px
}

#herobutton {
	font-size: 24px;
	color: 58595B;
    padding-block: 8px 8px;
    border: none;
    margin: 0px;
    cursor: pointer;
    background-color: #ffffff;
	border-radius: 4px;
	padding-left: 16px;
	padding-right: 16px;
}

.download {
	font-size: 21px;
	color: #ffffff;
    padding-block: 8px 8px;
    border: none;
    margin: 0px;
    cursor: pointer;
    background-color: #414042; /*dark gray*/
	border-radius: 4px;
	padding-left: 16px;
	padding-right: 16px;
}

.bigheader {
    padding-block: 8px 8px;
    border: none;
    margin: 0px;
	border-radius: 4px;
	padding-left: 16px;
	padding-right: 16px;
}

.small {
  padding-top: 8px;
}

.medium {
	padding-top: 16px;
}

.large {
	padding-top: 32px;
}

.xlarge {
	padding-top: 64px;
}

.right {
	display: flex;
	justify-content: right;
	text-align: right;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.buttonspace {
	margin-right: 32px;
	margin-left: 32px;
}

#menu.sticky .menubutton{
  color: ffffff;     /* white*/
}

.flexcenter {
	 display: flex;
	 align-items: center;
	 justify-content: right;
}

#footer {
	background-color: #414042; /* dark gray */
}

.copyright {
	font-size: 12px;
	color: ffffff;
	font-family: Segoe UI;
}

.about, .itemabout{
	background-color: #E6E7E8; /* light gray */
	border-radius: 4px;	
	width: 700px;
	padding: 16px 32px 16px 32px;	
}

#itemabout {
	background-color# E6E7E8; /* lighter gray */
}

p {
	font-family: Calibri;
}

#freeheader {
	width: 700px;
	border-radius: 4px;
	padding: 16px 32px 16px 32px;
	background-image: linear-gradient(to right, #414042 , #79CDCD);
	display: flex;
}

#downloadbox {
	width: 700px;
	border-radius: 4px;
	padding: 16px 32px 16px 32px;
	background-color: #D1D3D4; /* medium gray */
	display: flex;
}

.textleft, .textright {
	flex: 1;
}

.textleft {
	flex-grow: 1;
	width: 100px;
	text-align: left;
}

.textright {
	flex-grow: 6;
	width: 600px;
	text-align: right;
}

.pthick {
   font-weight: bold;
}

#sg226, .flip {
	background: none;
	border: 0px;
}

video {
    max-width: 700px;
}

input[type="range"] {
    width: 100%;
    max-width: 700px;
}

.flex {
	display: flex;
}

.about {
	width: 700px;
    display: flex;
    justify-content: space-between;
}

.darkbg {
	border-radius: 4px;	
	width: 700px;
	padding: 16px 32px 16px 32px;
	background-color: #D1D3D4; /* medium gray */
}
.buttonspacer {
	margin-left: 16px;
}

.white {
	color: #ffffff;
}

.darkgray {
	color: #414042;
}

.headerright {
	margin-right: 32px;
}