/* Assignment 4 css */
body {
  background-color: lavender;
  cursor: url("temp.png"), auto;
  /* obtained curser thingy here: https://stackoverflow.com/questions/74828476/how-to-change-the-mouse-cursor-into-a-custom-icon-or-image */
}

a:hover {
	cursor: url("temp2.png"), pointer !important;
}

/* Text properties */
.text {
	display: inline;
	color: white;
	padding: 0px;
}
.textRED {
	display: inline;
	color: red;
	padding: 0px;
}
.textREDFILTERED {
	filter: grayscale(15%) blur(1px) invert(05%) saturate(1000%) sepia(20%);
	display: inline;
	color: red;
	padding: 0px;	
}
.textREDweird {
	filter: saturate(800%) blur(0.1px);
	display: inline;
	color: red;
	padding: 0px;	
}
.textGOLD {
	display: inline;
	color: gold;
	padding: 0px;
}
.textCYAN {
	display: inline;
	color: cyan;
	padding: 0px;
}
.textGREEN {
	display: inline;
	color: green;
	padding: 0px;
}
.linkGOLD {
	display: inline;
	color: gold;
	padding: 0px;
}
.textTEST {
	/* AI provided a example but I looked at this site first (and got the gradient from it): https://www.w3schools.com/css/css3_gradients.asp*/
	background: linear-gradient(to bottom right, red, yellow);
	color: transparent;
	background-clip: text;
	display: inline-block;
}
/* Containers */
#menu-container {
	width: 690px;
	height: 77.5px;
	margin: 1% auto;
	padding: 2px;
	background-color: black;
}
#topbar-container {
	width: 91vw;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.2vh;
	padding: 2rem;
	background-color: black;
}
#content-container {
	/* had a little help with changing the code so it sizes correctly */
	width: 87vw;
	height: 53vh;
	padding: 2rem;
	margin-right: auto;
	margin-left: auto;
	/* Information about "REM" here: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ */
	background-color: black;
	border: 1px solid #333;
	box-shadow: 0 4px 20px rgba(0,0,0,0.5);
	/* Information about "overflow-y" here: https://www.w3schools.com/cssref/css3_pr_overflow-y.php */
	overflow-y: auto;
}
/* Buttons */
#MenuBTN1 {
	display: inline-block;
	line-height: 15px;
	text-align: center;
	width: 44px;
	height: 12px;
	padding: 20px;
	margin: 1vh;
	background-color: ghostwhite;
	text-decoration: none;
	transition: transform 0.2s ease-in-out;
}
#MenuBTN1:hover {
	background-color: gray;
  color: white;
}
#MenuBTN1:active {
	background-color: gray !important;
	color: white !important;
	outline:3px solid gold !important;
}
#MenuBTN2 {
	display: inline-block;
	line-height: 15px;
	text-align: center;
	width: 44px;
	height: 12px;
	padding: 20px;
	margin: 1vh;
	background-color: ghostwhite;
	text-decoration: none;
	transition: transform 0.2s ease-in-out;
}
#MenuBTN2:hover {
	background-color: gray;
	color: white;
}
#MenuBTN2:active {
	background-color: gray !important;
	color: white !important;
	outline:3px solid gold !important;
}
#MenuBTN3 {
	display: inline-block;
	line-height: 15px;
	text-align: center;
	width: 44px;
	height: 12px;
	padding: 20px;
	margin: 1vh;
	background-color: ghostwhite;
	text-decoration: none;
	transition: transform 0.2s ease-in-out;
}
#MenuBTN3:hover {
background-color: gray;
color: white;
}
#MenuBTN3:active {
	background-color: gray !important;
	color: white !important;
	outline:3px solid gold !important;
}
#MenuBTN4 {
	display: inline-block;
	line-height: 15px;
	text-align: center;
	width: 44px;
	height: 12px;
	padding: 20px;
	margin: 1vh;
	background-color: ghostwhite;
	text-decoration: none;
	transition: transform 0.2s ease-in-out;
}
#MenuBTN4:hover {
background-color: gray;
color: white;
}
#MenuBTN4:active {
	background-color: gray !important;
	color: white !important;
	outline:3px solid gold !important;
}
#MenuBTN5 {
	display: inline-block;
	/* display, and outline changes for all btn class's has been suggested by AI. I'm currently testing them. */
	width: 28px;
    height: 12px;
	padding: 20px;
	margin: 1.5vh;
	background-color: black;
	text-decoration: none;
	text-decoration-color: white;
	outline: 0.5px solid white;
	color: darkviolet;
	/* hover effect provided by gemini, I needed a way to make buttons feel more interactive */
	transform: scale(1);
	transition: transform 0.2s ease-in-out;
}
#MenuBTN6 {
	display: inline-block;
	text-align: center;
	width: 44px;
	height: 15px;
	padding: 20px;
	margin: 1vh;
	background-color: black;
	text-decoration: none;
	transition: transform 0.2s ease-in-out;
	outline: 0.5px solid white;
	color: peru;
}

/* the menu button hover was given to me by a code snipit from AI, it did help me figure some good ideas out though.*/
#MenuBTN5:hover {
	background-color: black;
	color: white;
	outline: 0.5px dotted white;
	transform: scale(1.1);
}

/* images */
#SALAD-IMAGE {
	float: left;
	width: 300px;
	margin-left: 20px;
	margin-bottom: 10px;
	border-radius: 12px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#evilSkeletonImg {
	/* had a little help with changing the code so it sizes correctly */
	width: 87vw;
	height: 52vh;
	background-color: black;
	filter: grayscale(55%) blur(5px) invert(05%) saturate(1000%) sepia(40%);
	/* Ai suggested so i can make my image more pixelated */
	image-rendering: pixelated(23%);
}


/* update logs styling */

a[href="#update-overlay"] {
	display: inline-block;
	color: white;
	text-decoration: none;
	font-size: 20px;
	padding: 10px;
	margin-left: 10px;
	border: 1px solid #444;
	background: #222;
}
a[href="#update-overlay"]:hover {
	color: black;
	text-decoration: none;
	border: 1px solid gray;
	background: white;
}
.update-overlay {
	display: none;
	position: fixed;
	top: 15%;
	left: 36%;
	padding: 30px;
	width: 360px;
	height: 430px;
	background-color: rgba(30, 30, 30,0.85);
	border: 2.5px solid white;
	z-index: 9999;
}
.update-overlay:target {
	display: block;
}
.section-header {
	display: block;
	color: #888;
	font-size: 1.2rem;
	margin-top: 0px auto;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
}
.topic-text {
	display: inline;
	color: #888;
	text-transform: uppercase;
	font-weight: bold;
	padding: 0;
}
.update-header-main {
	display: inline;
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 2rem;
}
.update-title {
	color: gold;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
}
.update-version {
	color: cyan;
	font-size: 0.9rem;
	font-style: italic;
	text-align: center;
}
.update-list {
	color: white;
	font-size: 1rem;
	margin-left: 20px;
	list-style-type: disc;
}
.update-content-scroll {
	height: 400px;
	overflow-y: auto;
	padding-right: 10px;
}
.exit-updates {
	margin-left: 170px;
	color: red;
	text-decoration: none;
	font-weight: bold;
	font-size: 25px;
}

.exit-updates:hover {
	border: 1px solid white;
}

.ToTheGalleryBtn {
	color: white;
}

.ToTheGalleryBtn:hover {
	color: orange;
}
/* gallery.css is sold seperatly. */