@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'Perfect DOS VGA 437';
  src: url('fonts/dosfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
	background-color: #1C003F;
	color: #FFFFFF;
	/*	font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace"; */
	font-family: 'Perfect DOS VGA 437', sans-serif;
	font-size: 1.5em;
	padding: 50px;
	
}

h1 {
	color: magenta;
	margin: 0px;
}

h2 {
	text-align: center;
	line-height: 1;
	color: #909;
	align-content: center;
	margin: 4px 0px 16px 0px;
}

a {
	display: inline-block;
	width: auto;
	margin: auto;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: center;
	text-decoration: none;
	border: 3px solid #404;
	border-radius: 24px;
	padding: 8px 16px 8px 16px;
	background-color: #220044;
	color: magenta;
}

a:hover {
	color: white;
	background-color: #808;
}

.group {
	display: inline-block;
	margin: auto;
	background-color: #102;
	border: 2px solid #820BBB;
	border-radius: 15px;
	padding: 8px;
	margin: 8px;
	
}

.block {
	width: 100%;
	
	background-color: #02081F;
	margin: auto;
	margin-top: 16px;
	margin-bottom: 16px;
	border: 2px solid #820BBB;
	border-radius: 15px;
	padding: 8px;
	text-align: center;	
}

.jellworm-button{
  display: inline-block;
  width: 120px;
  height: 80px;
  background-image: url('jellyworm.png');
  background-size: cover;
  background-position: center;
  position: relative;
  text-decoration: none;
  overflow: hidden;
}

.tom-button{
  display: inline-block;
  width: 80px;
  height: 80px;
  background-image: url('kitty/icons/tom.png');
  background-size: cover;
  background-position: center;
  position: relative;
  text-decoration: none;
  overflow: hidden;
}



.file-button{
  display: inline-block;
  width: 80px;
  height: 80px;
  background-image: url('kitty/icons/kitty_file.png');
  background-size: cover;
  background-position: center;
  position: relative;
  text-decoration: none;
  overflow: visible;
}

.link-text {
  position: absolute;
  bottom: 0;
	left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6); /* semi-transparent black */
  text-align: center;
  padding: 4px 0;
  font-weight: bold;
  font-size: 14px;
}

.file-link-text {
  position: absolute;
	bottom: -25px;
	left: 0px;
  width: auto;
  background: rgba(0, 0, 0, 0.6); /* semi-transparent black */
  text-align: center;
  padding: 5px 15px;
  font-weight: bold;
  font-size: 14px;
	border-radius: 10px;
}


#searchForm {
  font-family: 'Perfect DOS VGA 437', monospace;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  max-width: 400px;
  color: magenta;
}

#searchInput {
  font-family: inherit;
  padding: 8px 16px 8px 16px;
  font-size: inherit;
  border: 2px solid #820BBB;
  border-radius: 24px;
  background-color: black;
  color: #1694FF;
}

#searchInput::placeholder {
  color: #5442CE;
  opacity: 1; /* ensures it's not semi-transparent */
}

#searchButtons {
  display: flex;
  gap: 10px;
}

#searchButtons button {
  font-family: inherit;
	color: inherit;
  padding: 4px 12px;
  font-size: inherit;
  background-color: #220044;
  border: 3px solid #404;
	border-radius: 16px;
  cursor: pointer;
  padding: 8px 16px 8px 16px;
}

#searchButtons button:hover {
	color: white;
	background-color: #808;
}

*:focus {
  outline: none;
  border-color: magenta;
  box-shadow: 0 0 4px magenta;
}