@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&family=Silkscreen&display=swap');
::selection {
 background-color: rgba(255, 57, 150, 0.36);
}
::-moz-selection {
 background-color: rgba(255, 57, 150, 0.36);
}
a {
 color: #fc60a4;
}
:root {
 background: #000;
 color: #fff;
 font-family: "Atkinson Hyperlegible", sans-serif;
}
h1 {
 font-size: 2.2em;
}
footer {
 margin: 1rem;
}
footer p{
 font-size: small;
 margin:0;
 text-align:center;
}
header {
 background-color: black;
 font-size: 2em;
}
nav {
 color: white;
 cursor: pointer;
 display: flex;
 font-family: "Silkscreen", sans-serif;
 justify-content: center;
 list-style-type: none;
 margin: 0rem;
 padding: 0rem;
 text-align: center;
 font-size: 1em;
}
nav li {
 margin: 0 1rem;
}
#menu-icon {
 color: inherit;
 cursor: pointer;
 display: none;
 font-size: 1.75em;
 text-decoration: none;
}
nav a {
 color: inherit;
 text-decoration: none;
}
nav a:hover {
 background-color: #b70460;
}
#toggle-menu {
 display: none;
}
@media screen and (max-width: 700px) {
 nav {
  display: none;
  text-align: center;
  width: 90%;
 }
 #menu-icon {
  display: block;
  visibility: visible;
 }
 .menu-icon {
  visibility: visible;
  z-index: 1;
 }
 #toggle-menu:checked ~ nav {
  display: block;
 }
}
@media screen and (max-width: 700px) {
 .center {
  height: auto;
  max-width: 80%;
 }
}
.scanlines #updatescol {
 box-shadow: 0 0 0.3rem 0.3rem green;
}
.scanlines #chatbox {
 box-shadow: 0 0 0.3rem 0.3rem green;
}
.scanlines button {
 background: #000;
 border-color: #fff;
 color: #fff;
 position: sticky;
 top: 0;
 z-index: 9999;
}

#updatescol {
 display: block;
 height: 350px;
 overflow-y: scroll;
 border: solid;
}
#chatbox {
 overflow: auto;
 border: solid;
}
.grid {
 border: 1px;
 margin: 1rem;
 padding: 1rem;
}
.center {
 display: block;
 margin: auto;
 max-height: 20rem;
 width: auto;
}

main {
 margin: auto;
 padding: 1.5rem;
}

.updates {
 font-size: 1em;
 padding: 1em;
 /*text-align: center;*/
}

ul {
 text-align: left;
}

nav ul {
 text-align: center;
}

h4 {
 font-weight: bold;
 margin: 0px;
 padding: 0px;
 text-decoration:underline;
}

/*h4::before,
h4::after {
 border: 0.1rem solid white;
 content: "";
 display: inline-block;
 margin: 0 1rem;
 width: 2vw;
}
*/

nav li {
 display: inline-block;
}

.grid {
 display: grid;
 gap: 2vw;
 grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
 .grid {
  grid-template-columns: 1fr;
 }
}

body.scanlines {
 color: #4af626;
 text-shadow: 0.2rem 0.1rem 0.2em green;
 text-shadow: 1px 1px 10px green, 1px 1px 10px green;
}
.scanlines nav a {
 color: #4af626;
}
.scanlines a {
 color: white;
}

.scanlines a:hover {
 color: black;
 background-color: #4af626;
}

.scanlines:after {
 content: "";
 display: block;
 pointer-events: none;
 position: fixed;
}
.scanlines:after {
 background: linear-gradient(
  to bottom,
  transparent 50%,
  rgba(0, 0, 0, 0.3) 51%
 );
 background-repeat: repeat;
 background-size: 100% 4px;
 bottom: 0;
 left: 0;
 right: 0;
 top: 0;
 z-index: 21;
}

button {
 background: #000;
 border-color: #4af626;
 color: #4af626;
 position: sticky;
 top: 0;
 z-index: 9999; 
 font-family: Silkscreen;
}

p {
 font-size:1.2em;
}

body {
 max-width: 800px;
 margin: auto;
}

h1, h2, h3, h4 {
	 font-family: "Silkscreen", sans-serif;
}


/* for projects page */

.column {
  float: left;
  width: 45%;
  padding: 0.75em;
  }

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 90%;
    display: block;
    margin-bottom: 20px;
  }
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  padding: 1rem;
 /*text-align: center;*/
 background-color: #0f0f0f;
}

.card img{
    object-fit: contain;
  max-width: 80%;
  max-height: 50%;
}
.row {margin: 0 -5px;}

/* Clear floats after the columns, thanks to https://www.w3schools.com/howto/howto_css_cards.asp */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.logo {
  float: right;
  font-size: 0.5em;
  font-family: 'VT323',monospace;
}