portfolio/assets/css/style.css

body {
	background-color: #E7D5B1;
	background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
	font-family: monospace;
	font-size: 16px;
}

.outer-container {
	width: 100%;
}

.container {
	width: 720px;
	margin: auto;
	margin: 0 auto 0 auto;
	position: relative;
}

canvas {
	position: relative;
	z-index: -1;
	max-width: 720px;
}

.dialog {
	display: none;
	position: absolute;
	background-color: #f8f8ff;
	border: inset 8px black;
	bottom: 0px;
	left: 0px;
	margin: 20px;
	min-width: 680px;
	padding: 20px;
	box-sizing: border-box;
}

.enter-indicator {
	position: absolute;
	font-size: 14px;
	bottom: 0px;
	right: 0px;
	margin: 5px;
	animation: blink 3s infinite;
}

@keyframes blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.6;
	}

	100% {
		opacity: 1;
	}
}


.window-container {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 20px;
	border: solid 3px #dbe0e7;
	margin-top: 10px;
	display: none;
}

.window-bar {
	position: relative;
	background: #57C785;
	background: linear-gradient(90deg, rgba(87, 199, 133, 1) 19%, rgba(191, 83, 237, 1) 100%);
	font-family: monospace;
	font-size: 20px;
	border-bottom: solid 3px #dbe0e7;
	box-sizing: border-box;
	width: 100%;
	padding: 3px;
	padding-left: 10px;
}

.close-button {
	border-radius: 0%;
	border-top: white;
	border-left: white;
	margin-right: 3px;
}

#term {
	box-sizing: border-box;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	overflow-wrap: break-word;
	display: none;
	background-color: #272E33;
	color: #A7C080;
	font-family: monospace;
	font-size: 18px;
	padding: 20px;
}

.prompt-container {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.prompt-container label {
  margin-right: 0.3rem;
}

.prompt-container input[type="text"] {
  flex: 1;
}

#term input {
	float: left;
	color: #A7C080;
	font-family: monospace;
	font-size: 18px;
	min-width: 90%;
	background-color: #272E33;
	border: 0;
	outline: 0;
}

#term input:focus {
	width: 100%;
	background-color: #272E33;
	border: 0;
	outline:none!important;
}

.music-inner-container {
	background: #a3acbe;
	position: relative;
	height: inherit;
	box-sizing: border-box;
	font-family: monospace;
	font-size: 20px;
	padding: 10px;
	overflow: auto!important;
}

#album-thumb {
	font-size: 12px;
}

.audio-controls {
	font-size: 20px;
}

.audio-controls:hover {
	cursor: pointer;
}

#album-thumb img {
	border: solid 3px #dbe0e7;
	margin-top: 10px;
	width: 200px;
	height: auto;
}

#games-container {
	background: #a3acbe;
}

#resume-container {
	background: #a3acbe;
}

#portfolio-container {
	background: #a3acbe;
}

.games-inner-container {
	position: relative;
	height: inherit;
	box-sizing: border-box;
	font-family: monospace;
	font-size: 20px;
	padding: 10px;
	overflow: auto!important;
}

.games-inner-container img {
	width: 200px;
	height: auto;
}

.games-inner-container h3 {
	margin: 0px;
	width: 100%;
}

.single-game-container {
	display: flex;
	padding: 10px;
}

.single-game-container:hover {
	border: solid 4px black;
	cursor: pointer;
}

.game-thumbnail-container {
	flex: 25%;
}

.game-description-container {
	flex: 75%;
	margin-left: 10px;
}

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

table {
  font-family: monospace;
	font-size: 12px;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

@keyframes glow {
  0% { box-shadow: 0 0 -28px 13px #ff0000; }
  40% { box-shadow: 0 0 15px 13px #ff0000; }
  60% { box-shadow: 0 0 15px 13px #ff0000; }
  100% { box-shadow: 0 0 -28px 13px #ff0000; }
}

.indicator {
	display: none;
  background-color: yellow;
  border-radius: 50%;
  margin: 0 auto;
  height: 0px;
  width: 0px;
  animation: glow 3s infinite;
	position: absolute;
}

#resume-indicator {
	top: 310px;
	left: 368px;
}

#portfolio-indicator {
	top: 20px;
	left: 140px;
}

#computer-indicator {
	top: 260px;
	left: 260px;
}

#tv-indicator {
	top: 20px;
	left: 700px;
}

#guitar-indicator {
	top: 570px;
	left: 60px;
}

.download-resume {
	font-family: monospace;
	margin: 10px;
	position: absolute;
	bottom: 0px;
	right: 15px;
}

.download-resume button {
	font-size: 15px;
	font-family: monospace;
	border-radius: 0%;
	border-top: white;
	border-left: white;
	margin-right: 3px;
}

.nav-bar {
	margin-top: 5px;
}

.nav-bar button {
	background-color: #ededed;
	font-size: 16.9px;
	font-family: monospace;
	border-width: 3px;
	border-radius: 0%;
	border-top: white;
	border-left: white;
	margin-right: 2px;
}

.nav-bar button:hover {
	background-color: #c3f6c3;
	cursor: pointer;
}

.controls {
	display: none;
	opacity: 65%;
	position: absolute;
	bottom: 0px;
	left: 0px
}

#on-screen-controller-button {
	background-color: #ededed;
	font-size: 16.9px;
	font-family: monospace;
	border-width: 3px;
	border-radius: 0%;
	border-top: white;
	border-left: white;
	margin-right: 2px;
	position: absolute;
	top: -35px;
	right: 0px;
}