/* background #0b8049  text #fff1a3  darker yellow #ffe666  dark text #02170d  accent #7fb59c  shadow #06463b */
/* @media screen and (max-height: 768px)  to set appearance for laptop */

body { 
	background-image: url("KikiBackground.jpg");
	background-size: cover;
	background-attachment: fixed;
	font-size: 14px;
	font-family: "Courier New";
	text-shadow: 1px 1px 4px #06463b;
	color: #fff1a3;
}

/* whole website lives in here */
.bigmama {
	/*background-color: #0B7F68;*/
	margin: auto;
	display: grid;
  justify-content: center;
  grid-template-columns: auto auto auto;
}

/* title */
h1 {
	background-color: #0b8049;
	margin: auto;
	margin-bottom: 5px; 
	box-sizing: border-box;
	width: 660px;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	border-color: #fff1a3;
	font-weight: bold;
	text-align: right;
	font-size: 17px;
}

h3 {
  text-decoration: underline;
}

h4 {
  background-color: #085e36; 
  border-style: solid; 
  border-color: #085e36; 
  border-radius: 1px; 
  border-width: 1px;
}

/* big div to contain header, footer, sidebar, & center */
.main {
	/*background-color: #FFF4A3;*/
	padding: 15px;
	margin: auto;
	height: 575px;
	width: 660px;
}

/* left box background */
.sidebar {
	background-color: #0b8049;
	float: left;
	border-style: solid;
	border-color: #fff1a3;
	box-sizing: border-box;
	height: 500px;
	width: 150px;
	padding: 2px;
	border-radius: 4px;
	border-width: 1px;
	z-index: 1;
}

/* Style the tab - contains nav buttons */
.tab {
	/*background-color: #FFF4A3;*/
	margin: auto;
}

/* Style the buttons inside the tab */
.tab button {
	background-color: inherit;
	display: block;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 4px;
	transition: 0s;
	font-size: 14px;
	font-family: "Courier New";
	text-shadow: 1px 1px 4px #06463b;
	color: #fff1a3;
	text-decoration-line: underline;
}

/* Change color of sidebar buttons on hover */
.tab button:hover {
	text-decoration-line: underline;
	text-shadow: 1px 2px ;
}

/* Create an active/current tablink class (highlight current page button) */
.tab button.active {
}

/* Style the tab content (central square content) */
.tabcontent {
	/*background-color: #FFF4A3;*/
	margin: auto;
	box-sizing: border-box;
	height: 495px;
	width: 490px;
	overflow: hidden; 
	text-align: center;
	-ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.tabcontent::-webkit-scrollbar {
    display: none;
}

.blogpage {
	margin: auto;
	box-sizing: border-box;
	height: 495px;
	width: 490px;
	overflow-x: hidden; 
	overflow-y: scroll;
	text-align: left;
	-ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  text-indent: 10px;
  padding: 10px;
}

/* central square/where all the meat is */
.center {
	background-color: #0b8049;
	border-style: solid;
	border-color: #fff1a3;    
	border-radius: 4px;
	border-width: 1px;
	margin-left: 160px;
	margin-top: 1px;
	box-sizing: border-box;
	height: 500px;
	width: 500px;
	z-index: 1;
}

/* banner below center */
.footer {
	/*background-color: #ffc6d6;*/
	margin: auto;
	text-shadow: 1px 1px 4px #06463b;
	text-align: center;
	color: #fff1a3;
}

/* style links */
a:link {
	color: #ffe666;
	text-decoration: none;
	text-shadow: 1px 1px 4px #06463b;
}

a:visited {
  color: #ffe666;
  text-decoration: none;
  text-shadow: 1px 1px 4px #06463b;
}

/* mouse over link */
a:hover {
  font-weight: bold;
  text-decoration: underline;
}

a:active {
  font-weight: bold;
  text-decoration: underline;
  text-shadow: 1px 2px ;
}


/* containers left & right of center */
.side {
	/*background-color: #fff1a3;*/
	height: 500px;
	width: 300px;
	margin: auto;
	box-sizing: border-box;
	overflow: visible;
	z-index: 1;
}

/* changelog */
.changelog {
	overflow-y: scroll;
	overflow-x: hidden;
	border-style: solid;
	border-color: #fff1a3;    
	border-radius: 6px;
	border-width: 1px;
	height: 200px;
	width: 460px;
  margin: auto;
	box-sizing: border-box;
	padding: 8px;
	/*scrollbar-color: pink lightblue;*/
	-ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* to-do list */
.todo {
	background-color: #06463b;
	border: 1px solid #fff1a3;   
	border-radius: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 12px;
  width: 200px;
}

.todo ul {
	list-style-type: none;
	margin: 15px;
	margin-left: -15px;
}

.todo li {
	padding: 4px;
}

/* */
hr {
  border: 1px solid #085e36;
  margin-left: 3px;
  margin-right: 3px;
}

.comingsoon {
  background-color: #0b8049;
  margin: auto;
  margin-top: 150px; 
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #fff1a3;
  height: 130px;
  width: 130px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 12px;
}

/* quiz gallery */
.quiz-gallery {
	display: flex;
  flex-wrap: wrap;
  justify-content: center;
	gap: 12px;
}

.quiz-gallery-item {
	border: 1px #fff1a3 solid;
	height: 80px;
	width: 80px;
}

.quiz-gallery-item:hover {
	border: 1px #fff1a3 solid;
}

.quiz-gallery img {
	height: 80px;
	width: 80px;
}

/* quiz gallery tooltip styling */
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  background-color: #06463b;
  color: #ffe666;
  border-radius: 3px;
  text-align: center;
  padding: 6px 0;
  position: absolute;
  top: 99%;
  left: 50%;
  z-index: 5; /* Ensure tooltip is displayed above content */
  margin-left: -50px; /* half of width */
  width: 100px;
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}