@import url('https://fonts.googleapis.com/css?family=Libre+Franklin&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap');

* {
	box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
}

h4 a {
  padding-bottom: 0.8em;
  text-decoration: none;
  text-emphasis: "X";
  text-emphasis-position: under right;
}

h4 a:hover {
  text-emphasis: "✅";
}

h4 a:hover s {
  text-emphasis: "❌";
}

.xover:hover {
  text-emphasis: "X";
}

body {
  background-color: #eeeeee;
  color: #000000;
  font-family: "Libre Franklin";
  font-size: 1rem;
  text-align: center;
}

code, pre, input, button {
  font-family: "Roboto Mono";
}

input {
  font-size: 1.1em;
  padding: 0.1em 0.7em;
  border-radius: 100em;
}

hr {
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  border-left: 0px;
  border-right: 0px;
  margin: 30px 0px;
}

canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.spin {
  animation: spin 2s linear 0s infinite;
}

.slide {
  animation: slide 2s linear 0s infinite alternate-reverse;
}

.fill {
  display: block;
  margin: 16px;
  position: relative;
  transition: all 1s ease-in-out;
}

.fill::before {
  content: attr(data-item);
  transition: all 1s ease-in-out;
  color: #8254ff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0;
  overflow: hidden;
}
.fill:hover::before {
  width: 100%;
}

.particle {
  position: fixed;
  display: inline-block;
  z-index: -1;
}

.toast {
  position: fixed;
  display: inline-block;
  z-index: -1;
  padding: 1.1em 1.6em;
  background-image: linear-gradient(to left, #f29494, #f2c291, #f2f291, #c2f291, #91f291, #91f2f2, #91c2f2, #9191f2, #c291f2, #f291f2, #f291c2);
  border-radius: 1em;
  font-size: 1.35em;
}

.particlex {
  position: fixed;
  display: inline-block;
  z-index: -1;
  font-family: "Roboto Mono";
  font-size: 1.6em;
  animation: spin 2s linear 0s infinite;
}

.rainbowtext {
  background-image: linear-gradient(to left, #f94144, #f3722c, #f8961e, #f9c74f, #90be6d, #43aa8b, #577590);
  filter: brightness(80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rainbow {
  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes spin {
  from { rotate: 0; } to { rotate: 360deg; }
}
@keyframes slide {
  from { transform: translate(0em, 0); } to { transform: translate(20em, 0); }
}

.centerbox {
  position: absolute;
  left: 50vw;
  top: 50vh;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 50px 50px;
  border: 2px solid black;
  border-radius: 25px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

.centerbox2 {
  padding: 50px 50px;
  /*
  border: 2px solid black;
  border-radius: 25px;
  max-width: 100vw;
  max-height: 90vh;
  overflow: auto;*/
}
@media screen and (min-width: 1600px) {
  .centerbox2 {
    position: absolute;
    left: 50vw;
    top: 50vh;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}

table {
  table-layout: fixed;
  margin: 25px auto;
  border-collapse: collapse;
  font-size: 1em;
  min-width: 400px;
  box-shadow: 0 0 20px "#eeeeee22";
}

table thead tr {
  background-color: #8fc1ff;
  color: #000000;
  text-align: left;
}

table tbody tr:hover {
  background-color: #f2c291;
}

th, td {
  padding: 12px 15px;
  text-align: left;
}

table tbody tr {
  border-bottom: 1.5px solid #000000;
}

/*
table tbody tr:nth-of-type(even) {
  background-color: #eeeeee;
}
*/

table tbody tr:first-of-type {
  border-top: 3px solid #000000;
}

table tbody tr:last-of-type {
  border-bottom: 3px solid #000000;
}

table tbody tr.active-row {
  font-weight: bold;
  color: #009879;
}

th {
  font-weight: normal;
  text-decoration: underline;
}


ol {
	padding: 0;
	margin: 0;
	max-width: 800px;
	position: relative;
}

ol::before {
	content: '';
	width: 0.6rem;
	height: 100%;
	position: absolute;
	top: 0;
	left: 8%;
	background: darkslategray;
  opacity: 80%;
  text-align: left;
	z-index: -1;
}

li {
  text-align: left;
  list-style-position: inside;
	padding: 0.5rem 1.5rem 1rem;
	border-radius: 1rem;
	background: darkslategray;
}

li + li {
	margin-top: 1rem;
}

::marker {
	font-weight: 800;
	color: tomato/*hsl(290, 60%, 70%)*/;
	font-size: 1.2rem;
  position: relative;
  top: 1em;
}

kbd {
  background-color: #eeeeee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgb(0 0 0 / 0.2),
    0 2px 0 0 rgb(255 255 255 / 0.7) inset;
  color: #333333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}