
* {box-sizing: border-box;}
html { scroll-behavior: smooth;}
body, html {background:black; }
.serif {    font-family: "Domine", Georgia, serif;  font-optical-sizing: auto;  font-weight: 500;  font-style: normal; }
body { height:100%; overflow-y:auto; font-family: "Inter", Arial, sans-serif;  font-optical-sizing: auto;  font-weight: 500;  font-style: normal;  font-variation-settings: "slnt" 0; }
h1 {font-size:38px; font-weight:200; }
h2 {font-size:28px; font-weight:300; }
p {font-size:18px; line-height:1.4em;}
.weefont {font-size:16px; }
code {font-size:16px; font-weight:500; line-height:1.2em; }
img { max-width: 100%;  height: auto; }
a {text-decoration:none; display:inline-block;}
span {display:inline-block;}
.button {background:#ccc; color:#444; padding:8px; margin:4px; text-align: center; text-decoration: none; font-weight:500; min-width:80px; }
.button:hover {background:#eee; color:black; }
td {margin:0; padding:0; }

input {padding:4px; font-family: "Inter", Arial, sans-serif;  font-optical-sizing: auto;  font-weight: 500;  font-style: normal;  font-variation-settings: "slnt" 0; font-size:inherit; }

/* GRID */
.griditem {display:inline-block; vertical-align:top; width:28vw; min-width:150px; max-width:400px; margin:12px; min-height:70px; text-align:center; }
.griditem:link {text-decoration: none; color:inherit; }

/* MENU */
.navbutton {z-index:10; width:40px; height:40px; font-size:40px; cursor:pointer; }

.sidenav {  position: fixed; top:0; left:0; right:0; height:0;  z-index: 5;  background-color: black;  background-color: rgba(0,0,0,0.4);  overflow:hidden; transition: 0.3s; }
.sidenav a { padding: 12px 15px;  text-decoration: none;  font-size: 20px;  color: #999;  display: inline-block; white-space: nowrap; }
.sidenav h2 {  padding: 8px 0 0 0; text-decoration: none;  font-size: 24px;  color: #fff; border-top:1px solid #6a6; }
.sidenav a:hover {  background:#333; }
.sidenav .closebtn {  position: absolute;  top: 0;  right: 25px;  font-size: 36px;  margin-left: 50px;}

/* Google Material Icons */
.material-symbols-outlined {  font-variation-settings:  'FILL' 1,  'wght' 200,  'GRAD' 200,  'opsz' 24; vertical-align:middle; font-size:inherit; color:inherit; }
