body {
  background-image: url('site_background.png');
  color: white;
  font-family: Verdana;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  position: relative;
}

.container {
    display: flex;
    width: 100%;
    max-width: 100vw;
    margin: 0 20px;
}

.sidebar {
    flex: 0 0 25%;
    width: 200px;
    /*background-color: #f4f4f4;*/
    padding: 20px;
    box-sizing: border-box;
}

.center-content {
    flex: 0 0 50%;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 0 10px;
    min-width: 100px;
    text-align: center;
    word-wrap: break-word;
    color: black;
}

.main {
  /*margin: 20px auto;*/
  padding: 10px 20px 10px;
  max-width: 600px;
  background-color: #f4f4f4;
  text-align: center;
  word-wrap: break-word;  
  color: black;
  border-radius: 7px;
  border: double #8e20a7 10px;
  /*border: double rgba(0, 0, 0, 0) 10px;*/
}

.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  padding: 10px;
}
.grid-item {
  border: none;
  padding: 10px;
  text-align: center;
}

.gallery-grid-item {
  line-height: 260px;
  /*height: 300px;*/
  border-bottom-style: solid;
  border-width: 3px;
  padding: 10px;
  text-align: center;
  overflow: auto;
}

.gallery-grid-item p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

.red_cursor * {
	cursor: url("cursors/red_cursor.png"), auto !important;
}
.green_cursor * {
	cursor: url("cursors/green_cursor.png"), auto !important;
}
.blue_cursor * {
	cursor: url("cursors/blue_cursor.png"), auto !important;
}
.purple_cursor * {
	cursor: url("cursors/purple_cursor.png"), auto !important;
}

iframe {
	width:100%;
	height:auto;
}

.photo_gallery img {
  max-width: 350px;
  padding: 25px 50px;
}

.about_table table{
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
}

.about_table th{
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
}

.about_table td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
}

.icon_table {
  width: 80%;
  margin: auto;
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
}

.icon_table td {
  width: 25%;
  margin: 15px;
  border: 1px solid black;
  border-collapse: collapse;
  padding: 5px;
}

.icon_table img {
  margin-top: 10px;
  margin-bottom: 10px;
  max-width:100%;
}

.center{
  margin-left: auto; 
  margin-right: auto; 
}

.photo_door{
	padding: 5px 50px;
	text-align: center;
	background-color: rgb(14, 14, 18);
}

a{
	cursor: pointer;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

.box-link{
  background-color: #000000;
  text-align: center;
  color: white;
  padding: 14px 16px;
}

.box-link:hover{
  background-color: #f9f9f9;
  color: black;
}

.navbar{
  /*overflow: hidden;*/
  border-radius: 7px; 
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: black;
}

/*.navbar li{*/
/*  float: left;*/
/*}*/

.navbar a{
  /*text-align: center;*/
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  /*font-size: 14px;*/
}

.navbar a:hover{
  background-color: #f9f9f9;
  color: black;
}

.navbar .current{
  background-color: #f9f9f9;
  color: black;
}

.top {
  width: 200px;
  margin: 15px auto 15px;
  text-align: center;
  }

.hackerText {
  padding: 10px;
  background-color: black;
  font-family: monospace, monospace;
  color: green;
  text-align: left;
}

.bottomContent {
  display: block;
  margin: 20px auto 10px;
  text-align: center;
  }

.main_image {
  display: block;
  margin: 30px auto 10px;
  text-align: center;
}

.icon {
  width: 16px;
  height: 16px;
}

.table_gallery{
  border: 0;
  max-width: 800px;
}

.table_gallery tr{
  outline: thin solid;
}

.table_gallery td{
  padding: 10px 50px;
}

.column{
	float: left;
	width: 33.33%;
}

.left{
	float: right;
	margin-right: 100px;
	margin-top: 0;
}

.right{
	float: left;
	margin-left: 150px;
	margin-top: 0;
}

.row:after{
	content:"";
	display: block;
	clear: both;
}

.links_list{
  text-align: left;
  padding: 0px 20px;
}

.links_list_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.links_list_item p {
  margin: 0;
}

.links_list_item img {
  max-height: 50px;
}

/*.links_list p {*/
/*  height: 40px;*/
/*  margin: 10px 0px;*/
/*}*/

/*.links_list img {*/
/*  vertical-align: middle;*/
/*  float:right;*/
/*}*/

/* marquee-like scroller adapted from Ben Nadel "Creating A Marquee Effect With CSS Animations" 
https://www.bennadel.com/blog/4536-creating-a-marquee-effect-with-css-animations.htm
Accessed 14/12/2024
START REFERENCE*/
@keyframes blinkie-scroller{
  from {transform: translateX( 0% );}
  to {transform: translateX( -100% ); }
}

.scrolling-items {
  margin: 20px auto 0px;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 600px;
}

.blinkies-items {
  animation-duration: 10s ;
	animation-iteration-count: infinite;
	animation-name: blinkie-scroller;
	animation-timing-function: linear;
}

.blinkies-items img {
  margin: 0 20px;
}

.scrolling-items:hover .blinkies-items {
  animation-play-state: paused ;
}

.quote-items {
  color: white;
  animation-duration: 30s ;
	animation-iteration-count: infinite;
	animation-name: blinkie-scroller;
	animation-timing-function: linear;
}

.quote-items p {
  margin: 0 20px;
}

.scrolling-items:hover .quote-items {
  animation-play-state: paused ;
}

/*END REFERENCE*/


/* Scrolling text animation styles from HTML.am - "HTML Scrolling Text"
https://www.html.am/html-codes/marquees/html-scrolling-text.cfm
Accessed 18/06/2025
START REFERENCE*/
/*.scroll-left {*/
/* height: 50px;	*/
/* overflow: hidden;*/
/* position: relative;*/
/* color: white;*/
/*}*/
/*.scroll-left p {*/
/* position: absolute;*/
/* width: max-content;*/
/* height: 100%;*/
/* margin: 0;*/
/* line-height: 50px;*/
/* text-align: center;*/
 /* Starting position */
/* transform:translateX(100%);*/
 /* Apply animation to this element */
/* animation: scroll-left 25s linear infinite;*/
/*}*/
/* Move it (define the animation) */
/*@keyframes scroll-left {*/
 /*0%   {*/
 /*transform: translateX(100%); 		*/
 /*}*/
 /*100% {*/
 /*transform: translateX(-100%); */
 /*}*/
 
/* from {transform: translateX( 0% );}*/
/*  to {transform: translateX( -100% ); }*/
/*}*/
/*END REFERENCE*/



#door {
}

#big_star {
  position: relative;
  left: 600px;
  top: 450px;
}

#side_box{
  position: absolute;
  right: 230px;
  bottom: 400px;
  padding: 10px 20px 10px;
  width: 200px;
  background-color: white;
  text-align: center;
  word-wrap: break-word;  
  color: black;
  font-size: 15px;
  border-radius: 7px;
}