*{
    margin: 0;
    padding: 0;
}

/* min-height: 100%; make sure footer is at the bottom */
html {
    font-size: 12px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 640px) {
	html {
		font-size: 14px;
	}
}

@media (min-width: 1024px) {
	html {
		font-size: 15px;	
	}
}

@media (min-width: 1536px) {
	html {
		font-size: 16px;
	}
}

/* margin-bottom: 200px make sure footer does not overlap with body */
body {
	margin-top: 0;
	margin-bottom: 12rem !important;
	margin-left:0;
	margin-right:0;
	font-family: 'Source Sans Pro', sans-serif;
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	line-height: 3rem;
	align-content: center;
}

/* For wave footer */
.footer2 {
	position: absolute;
	bottom: 3rem;
	width: 100%;
	align-content: center;
}

/* For text just above wave footer */
.Text1Pos {
	position: absolute;
	bottom: 5rem;
	width: 100%;
}

.gradient {
	background: linear-gradient(180deg, #5577FF 0%, #2244FF 100%);
}

.gradient2 {
	background: linear-gradient(180deg, #99BBFF 0%, #7799FF 100%);
}

.gradient3 {
	background: linear-gradient(180deg, #D1FAE5 0%, #A7F3D0 100%);
}

.gradient4 {
	background: linear-gradient(180deg, #FEF3C7 0%, #FDE68A 100%);
}

/* Used in public/js/NaviToggle.js*/

.bg-blue-200-Important {
	background-color: rgba(200, 230, 255, 1) !important;
}

/* Used in public/js/NaviToggle.js*/
.bg-yellow-200-Important {
	--tw-bg-opacity: 1;
	background-color: rgba(253, 230, 138, var(--tw-bg-opacity)) !important;
}

/* Used in public/js/NaviToggle.js*/
.bg-yellow-100-Important {
	background-color: rgba(255, 240, 145, 1) !important;
}

/* Used in public/js/NaviToggle.js*/
.bg-green-100-Important {
	background-color: rgba(209, 250, 229, 1) !important;
}

/* Used in public/js/NaviToggle.js*/
.bg-green-200-Important {
	--tw-bg-opacity: 1;
	background-color: rgba(167, 243, 208, var(--tw-bg-opacity))  !important;
}

.duration-15000 {
	transition-duration: 15000ms;
}

 /* Defined innercontainer as a supplementary for Tailwind's container */
.innercontainer {
	width: 90%;
  }
  
  @media (min-width: 640px) {
	.innercontainer {
	  max-width: 608px;
	}
  }
  
  @media (min-width: 768px) {
	.innercontainer {
	  max-width: 730px;
	}
  }
  
  @media (min-width: 1024px) {
	.innercontainer {
	  max-width: 975px;
	}
  }
  
  @media (min-width: 1280px) {
	.innercontainer {
	  max-width: 1200px;
	}
  }
  
  @media (min-width: 1536px) {
	.innercontainer {
	  max-width: 1400px;
	}
  }