/* devsig=1 */

/* Global Variables */
:root {
	--sky-white: #f1f9fc;
	--space-black: #1b034c;
	--ocean-blue: #57a5bd;
	--whale-gray: #d4e0de;
	--light-whale-gray: #f5f7f6;
	--violent-orange: #eb6b1e;
	--emerald-swamp-green: #477b59;
}


/* Custom Fonts*/

@font-face {
  	font-family: Arvo-Regular;
  	src: url(fonts/Arvo-Regular.ttf);
  	}
@font-face {
  font-family: Arvo-Bold;
  src: url(fonts/Arvo-Bold.ttf);
  font-weight: bolder;
}
@font-face {
  	font-family: Londrina-Sketch-Regular;
  	src: url(fonts/LondrinaSketch-Regular.ttf);
}
@font-face {
  	font-family: Arvo-Regular-Local;
  	src: url(Arvo-Regular.ttf);
}
@font-face {
  font-family: Arvo-Bold-Local;
  src: url(Arvo-Bold.ttf);
  font-weight: bolder;
  }
@font-face {
  	font-family: Londrina-Sketch-Regular-Local;
  	src: url(LondrinaSketch-Regular.ttf);
}

/* Global Element Styles*/
h1 {
	margin-top: 0px;
	margin-bottom: 0px;
}
body {
	color: var(--space-black);
	background-image: linear-gradient(var(--sky-white),var(--ocean-blue));
	background-attachment: fixed;
	margin: 0px auto;
}
body * {
	color: var(--space-black);
	font-family: "Arvo-Regular", "Arvo-Regular-Local", Helvetica, sans-serif;
}
a:hover {
	color: var(--violent-orange);
}
#titletext {
	color: var(--emerald-swamp-green);
	font-family: "Londrina-Sketch-Regular", "Londrina-Sketch-Regular-Local", "Brush Script MT", cursive;
	font-size: 40px;
}
table * {
	padding: 5px;
}
h1,h2,h3 {
	font-family: "Arvo-Bold", "Arvo-Bold-Local", Helvetica, sans-serif;
}
h1,h2,h3,p {
	margin-left: 10px;
	margin-right: 10px;
}
table,th,td {
  border: 1px solid;
  border-collapse: collapse;
  padding: 6px;
}
table {
	background-color: var(--sky-white);

}
nav {
	background-color: var(--light-whale-gray);
	border: 6px, solid, var(--space-black);
	border-radius: 5px;
	margin: 20px;
	border-style: solid;
	padding: 10px 5px;
	box-shadow: 6px 5px 15px 1px #1b034c87;
	height: 50px;
}
nav * {
	margin-left: 10px;
	margin-right: 10px;
	float: left;
}
nav a {
	position: relative;
	top: 15px;
}

/* Regular Styles */

.container {
	background-color: var(--whale-gray);
	border: 4px, solid, var(--space-black);
	border-radius: 5px;
	margin: 20px;
	border-style: solid;
}
.container * {
	margin-left: 10px;
	margin-right: 10px;
}
b {
	font-family: "Arvo-Bold", "Arvo-Bold-Local", Helvetica, sans-serif;
}
b * {
	font-family: "Arvo-Bold", "Arvo-Bold-Local", Helvetica, sans-serif;
}
.flex {
	display: flex;
	align-items: center;
}
.bottom {
}
.sticky {
position: sticky;
top: 10px;
z-index: 9999999999;
}
#skiptomain {
	position: relative;
	top: 7px;
	left: 7px;
}
#eaten {
	background-color: var(--emerald-swamp-green);
}
#cookiebutton {
	background-color: var(--whale-gray);
	color: var(--space-black);
	border-color: var(--space-black);
	border-radius: 10px;
	padding: 5px;
	box-shadow: 2px 3px var(--space-black);
}
#cookiebutton:hover {
	background-color: var(--light-whale-gray);
}
#cookiebuttondiv {
	margin: 10px;
	border-radius: 10px;
	width: fit-content;
	box-shadow: 3px 4px 10px #1b034cbb;
}
#bulb {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
}