html {
  --background-color: rgb(4, 6, 12);
  --text-color: rgb(255, 238, 238);
  --btn-bg: rgba(136, 136, 255, 0.133);
  --btn-bg-hover: rgba(136, 136, 255, 0.267);
}

@-webkit-keyframes text-came {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes text-came {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

* {
  box-sizing: border-box;
  scrollbar-color: var(--btn-bg-hover) rgba(0, 0, 0, 0);
  scrollbar-width: thin;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease 0s;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar-track {
  background: rgba(56, 56, 61, 0);
}

::-webkit-scrollbar-thumb {
  background: rgb(84, 84, 84);
  border-radius: .25rem;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(115, 115, 115);
}

*::selection {
  color: rgb(255, 238, 238);
  background-color: rgb(65, 118, 144);
}

:focus {
  outline: none;
}

ul, li {
  list-style: hebrew;
  list-style-position: inside;
}

ul {
  padding-left: 2em;
  padding-bottom: 1em;
}

li {
  line-height: 1.8;
  text-indent: initial;
}

@keyframes link-hover {
  0% {
    background-size: 100% 0.2em;
    background-position: 0px 110%;
  }
  50% {
    background-size: 0% 0.2em;
    background-position: 0px 110%;
  }
  50.01% {
    background-size: 0% 0.2em;
    background-position: right 0px top 110%;
  }
  100% {
    background-size: 100% 0.2em;
    background-position: right 0px top 110%;
  }
}

a {
  --hover-color: olivedrab;
  color: var(--hover-color);
  touch-action: manipulation;
  background-image: linear-gradient(var(--hover-color) 0px, var(--hover-color) 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0px 110%;
  text-decoration: none;
}

a:hover {
  --hover-color: sienna;
  animation: 0.4s cubic-bezier(0.58, 0.3, 0.005, 1) 0s 1 normal none running link-hover;
}

h1, h2, h3, h4, h5 {
  font-family: serif, sans-serif;
  margin: 2em 0 0.35em;
}

button {
  border: none;
}

body {
  font-family: sans, sans-serif;
  font-size: 20px;
  background: var(--background-color);
  color: var(--text-color);
  padding: 2vh 4vw;
  text-indent: 1em;
  -webkit-animation: text-came 800ms cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: text-came 800ms cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

body > header,
body > footer,
body > p,
body > div,
body > h1,
body > h2,
body > h3,
body > h4,
body > ul,
body > ol {
  max-width: 64rem;
  margin-inline: auto;
}

p {
  line-height: 1.6;
}

code, pre {
  background-color: rgba(136, 136, 255, 0.133);
  padding: 1px .5rem;
  border-radius: .25rem;
}

pre {
  overflow-x: auto;
  margin: 1rem;
  padding: .5rem 1rem;
  text-indent: 0;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

footer {
  margin-top: 4rem;
  font-size: 1rem;
}

address {
  font-style: normal;
}

input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.last-update {
  color: bisque;
}