/* latin */
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  src: url(vt232.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

::-webkit-scrollbar {
  width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #12dcaf;
  border-radius: 10px;
}

*:focus {
    outline: none;
}

a, a:link, a:visited, a:active {
  color: #12dcaf;
  text-decoration: underline;
  transition: 0.5s;
}

a:hover {
  color: #00ea2c;
  text-decoration: none;
}
* {
  box-sizing: border-box;
}

body{
    margin:0px;
    padding:0px;
	font-family: 'VT323';
	text-align:center;
	background-color:#050505;
	color: #12dcaf;
    overflow-x:hidden;
    overflow-y:scroll;
    
  transition: background-color 300ms;
  background-image: url('/images/scanlines.png');
    
}


#prompt_field{
    background-image: url('/images/scanlines.png');
    font-family: 'VT323';
    font-size: 20px;
	background-color: #05220f;
	border-radius: 8px;
	border:1px; 
	color: #12dcaf;
	padding: 5px 10px;

}


p{
		text-align: justify;
}

h1{
    margin-top: 0px;
}
.content-tile {
background-image: url('/images/scanlines.png');
	font-family: 'VT323';
	background-color: #05220f;
	border-radius: 15px;
	border:0px;  
	color: #12dcaf;
	resize: none;
	
	font-size: 20px;
    margin:auto;
    max-width:940px;
    padding:20px;
}

.content {
    background-image: url('/images/scanlines.png');
	font-family: 'VT323';
	background-color: #05220f;
	border-radius: 15px;
	border:0px; 
	color: #12dcaf;
	resize: none;
	
	font-size: 20px;
    margin:auto;
    max-width:900px;
    padding:20px;
	
}


.menu_title, .menu_button{
    display:inline-block;
    padding:10px;
    min-height:20px;
    min-width:75px;
    font-family: 'VT323';
	font-size: 30px;	
	color: #12dcaf;

}

.menu_button{
    background-image: url('/images/scanlines.png');
	cursor: hand;
    font-size: 20px;	
	background-color: #1b3021;
	text-align:center;	
	border-radius: 15px;
	border:0px; 
    transition: 0.4s;
}
.menu_button:hover{
	background-color: #204e2e;
	color: #12dcaf;
	cursor: pointer;
}

a.menu_button, a.menu_button:link, a.menu_button:visited, a.menu_button:active{
	text-decoration:none;
}

/*****/

.list {
    background-image: url('/images/scanlines.png');
	font-family: 'VT323';
	background-color: #05220f;
	border-radius: 15px;
	border:0px; 
	color: #12dcaf;
	resize: none;
	
	font-size: 20px;
	padding:20px;  
}

.img-list a {
  text-decoration: none;
}

.list li {
  display: inline-block;
  border-collapse: collapse;
  width: 100%;
  padding-bottom:10px;
}

.li-img {
  display: block;
  vertical-align: middle;
}
.li-img img {
  display: block;
  width: 100%;
  height: auto;
  
}
.li-text {
  display: block;
  vertical-align: middle;
}


@media all and (min-width: 45em) {
  .list li {
    float: left;
    width: 50%;
  }
}

@media all and (min-width: 75em) {
  .list li {
    width: 33.33333%;
  }
}

/* for flexbox */
@supports(display: flex) {
  .list {
    display: flex;
    flex-wrap: wrap;
  }
  
  .li-img,
  .li-text,
  .list li {
    display: block;
    float: none;
  }

  .li-img {
    align-self: center; /* to match the middle alignment of the original */
  }
  
  .inner {
    /*display: flex;*/
  }
}

/* for grid */
@supports(display: grid) {
  .list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
  
  .list li {
    width: auto; /* this overrides the media queries */
  }
}

.supports{
    margin: auto;
    max-width: 1400px;
	padding: 0 20px 20px 20px;
}
	
.buspin{
	text-align: center;
	font-weight: bold;
	color: #05220F;
	background-color:#12dcaf;
}


img.tile_img {
  height: auto;
  width: 100%;
}