body {
	background-color: black;
	color: #ffffff;
	font-family: 'IBM', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	border: 3px solid /*red*/#ffffff;
	border-radius: 20px;
	padding: 25px;
	display: block;
	height: 98vh/*835px*/;
	margin: 5px;
	box-sizing: border-box;
}

.body::after {
	content: "";
	clear: both;
	display: table;
}

div.index {
	display: block;
	border: 3px solid #ffffff;
	border-radius: 20px;
	float: left;	
	overflow-y: scroll;
	width: 100%;
	vertical-align: top;
	height: 345px; /*need to set up proportionate sizing*/
	-ms-overflow-style: none;  /* Hides scrollbar for Internet Explorer 10+ */
    scrollbar-width: none;  /* Hides scrollbar for Firefox */
}

div.index::-webkit-scrollbar { 
    display: none;  /* Hides scrollbar for Safari and Chrome */
}

div.indeximages::-webkit-scrollbar { 
    display: none;  /* Hides scrollbar for Safari and Chrome */
}

div.about {
	font-size: 25px;
	display: block;
	float: left;
	width: 78%;
	height: 90.7%;
	border: 3px solid /*red*/#ffffff;
	border-radius: 10px;
	margin: 5px;
	overflow-y: scroll;
	padding: 20px;
	box-sizing: border-box;
	-ms-overflow-style: none;	/* Hides scrollbar for Internet Explorer 10+ */
}

div.about img{
	float: right;
}

@supports (scrollbar-width: none) {
  @-moz-document url-prefix() {
    .about {
      scrollbar-width: none;  /* Hides scrollbar for Firefox */
    }
  }
} 

div.about::-webkit-scrollbar { 
    width: 12px;
	background: transparent;
}

div.about::-webkit-scrollbar-thumb {
	width: 8px;
    background: white /*#ffa31a*/;  /*Safari and Chrome*/
	border-radius: 10px;
	border: 4px solid transparent;
	background-clip: content-box;
}

div.logo {
	transform: scale(80%	); /* Causing issues with logo not being in the right spot */
	display: block;
	float: right;
}

h1 {
	text-align: center;
	font-size: 30px;
	width: 150px;
	border: 3px solid #ffffff;
	border-radius: 10px;
	padding: 10px;
	display: block;
	margin: 10px 0px;
}

div.links {
	font-size: 25px;
	display: block;
	float: right;
	border: 3px solid #ffffff;
	border-radius: 10px;
	width: 20%;
	text-align: center;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 89%;
	margin: 5px;
	-ms-overflow-style: none;  /* Hides scrollbar for Internet Explorer 10+ */
}

@supports (scrollbar-width: none) {
  @-moz-document url-prefix() {
    .links {
      scrollbar-width: none;  /* Hides scrollbar for Firefox */
    }
  }
}

div.links::-webkit-scrollbar { 
    width: 12px;
	background: transparent;
}

div.links::-webkit-scrollbar-thumb {
	width: 8px;
    background: white /*#ffa31a*/;  /*Safari and Chrome*/
	border-radius: 10px;
	border: 4px solid transparent;
	background-clip: content-box;
}

div.box {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 3px solid #ffffff;
	border-radius: 10px;
	margin: 5px;
	width: 95%;
	height: 20%;
}

div.box:hover {
	border-color: #e68a00;
}

div.box img{
	width: 20px;
	height: 20px;
}









div.marqueebox {
	display: block;
	border: 3px solid #ffffff;
	border-radius: 20px;
	float: left;	
	overflow-y: hidden;
	width: 100%;
	height: 370px; /*need to set up proportionate sizing*/
	vertical-align: top;
	margin-top: 20px;
	-ms-overflow-style: none;  /* Hides scrollbar for Internet Explorer 10+ */
    scrollbar-width: none;  /* Hides scrollbar for Firefox */
}

div.marqueebox img{
	border: 3px solid #ffffff;
	border-radius: 20px;
	margin: 10px 17px 10px;
}

.marquee {
  --gap: 1rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee_content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 100s linear infinite;
  margin: 12px 0px;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

div.marquee_item {
	height: 325px;
	width: 325px;
	display: flex;
	align-items: center;
	justify-content: center;
}









a:link {
  color: #ffa31a;
  background-color: transparent;
  text-decoration: underline;
  font-family: 'IBM', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

a:visited {
  color: #d1830f;
  background-color: transparent;
  text-decoration: underline;
  font-family: 'IBM', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

a:hover {
  color: #d18411;
  background-color: transparent;
  text-decoration: underline;
  font-family: 'IBM', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

a:active {
  color: #995c00;
  background-color: transparent;
  text-decoration: underline;
  font-family: 'IBM', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}










.rainbow {
  width: 100%;
  height: 12px;
  margin: 5px 0;
  background:
	/* thank u chatGPT for the numbers */
    linear-gradient(to bottom,
      #e40303 0%,    /* Red */
      #e40303 16.66%,
      #ff8c00 16.66%, /* Orange */
      #ff8c00 33.33%,
      #ffed00 33.33%, /* Yellow */
      #ffed00 50%,
      #008026 50%,   /* Green */
      #008026 66.66%,
      #004dff 66.66%, /* Blue */
      #004dff 83.33%,
      #750787 83.33%, /* Violet */
      #750787 100%
    ) 100% 0% / 100% 100% no-repeat;
  position: relative;
}