@font-face
{
  font-family: 'Plump';
  src: url('/assets/files/Plump.ttf');
}

:root 
{
  color-scheme: light dark;
  --color-edges: light-dark(#212121, #212121);
  --color-fill-light: light-dark(#FFFFFF, #f3f1f1);
  --color-fill-dark: light-dark(#424242, #000000);
  --color-select: light-dark(#FFFF00, #FFFF00);
}

body
{
  background-image: url("/assets/images/background_light.png");
  background-repeat: repeat;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px
}

@media (prefers-color-scheme: dark)
{
  body
  {
	background-image: url("/assets/images/background_dark.png");
  }
}

h1,
h2,
h3,
h4
{
  color: var(--color-fill-light);
  font-family: 'Plump';
  letter-spacing: 6px;
  
  text-shadow:
	6px 0 var(--color-edges), 
	-6px 0 var(--color-edges), 
	0 6px var(--color-edges), 
	0 -6px var(--color-edges),
    4px 4px var(--color-edges), 
	-4px -4px var(--color-edges), 
	4px -4px var(--color-edges), 
	-4px 4px var(--color-edges);
}

.shell
{
  min-width: 1680px;
  width: 100%;
}

.grid
{
  text-align: center;
  float: center;
  width: 100%;
}

.textbox
{
  color: #FFFFFF;
  text-align: justify;
  font-family: 'Consolas';
  font-size: 32px;
  width: 40%;
  margin: auto;
  
  background: var(--color-fill-dark);
  
  box-shadow: 
    0 0 0 0.2em var(--color-edges), 
	0 0 0 0.8em var(--color-fill-light), 
	0 0 0 1.0em var(--color-edges);
  border-radius: 0.25em;
  padding: 20px;
}

.textbox a
{
  color: #00FF00;
}

.textbox_nav
{
  color: var(--color-fill-light);
  text-align: justify;
  font-family: 'Consolas';
  font-size: 32px;
  letter-spacing: 3px;
  
  text-shadow:
	4px 0 var(--color-edges), 
	-4px 0 var(--color-edges), 
	0 4px var(--color-edges), 
	0 -4px var(--color-edges),
    3px 3px var(--color-edges), 
	-3px -3px var(--color-edges), 
	3px -3px var(--color-edges), 
	-3px 3px var(--color-edges);
}

.textbox img
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
  text-align: center;
  width: 80%;
  
  /* box-shadow:  */
    /* 0 0 0 0.15em var(--color-edges),  */
	/* 0 0 0 0.4em var(--color-fill-light),  */
	/* 0 0 0 0.55em var(--color-edges); */
  /* border-radius: 0.25em; */
}

.textbox iframe
{
  box-shadow: 
    0 0 0 0.15em var(--color-edges), 
	0 0 0 0.4em var(--color-fill-light), 
	0 0 0 0.55em var(--color-edges);
  border-radius: 0.25em;
}

.textbox h1,
.textbox h2,
.textbox h3,
.textbox h4
{
  text-align: center;
}

.buttons-small
{
  display: flex;
  gap: 20%;
  align-items: center;
  justify-content: center;
}

.buttons-small a {
  width: 25%;
}

.buttons-small img {
  display: block;
  width: 100%;
  height: auto;
}

.text-seperator
{
  height: 10px;
  background-color: var(--color-fill-light);
  width: 50%;
  margin: auto;
  
  box-shadow:
	0 0 0 5px var(--color-edges);
  border-radius: 10px;
}

.title
{
  height: 180px;
  width: 100%;
  margin: 0 auto;
  margin-top: 50px;
  align-items: center;
  text-align: center;
  display: flex;
  display: inline-block;
}

.title a
{
  transition: all 200ms ease-in-out;
  text-decoration: none;
  pointer-events: auto;
  padding: 20px;
  margin: auto;
  display: inline-block;
}

.title a:hover,
.title a:focus 
{
  transform: translateY(-10px);
}

.version
{
  position: sticky;
  align-self: start;
  top: 2rem;
  grid-column: 1 / -1;
  grid-row: 1;
  pointer-events: none;
  display: inline-block;
}

.logo
{
  transition: all 200ms ease-in-out;
  pointer-events: auto;
  display: inline-block;
  position: sticky;
  grid-column: 1 / -1;
  grid-row: 1;
  margin-left: 20px; 
  margin-top: 60px; 
  width: 5%;
}

.nav-section
{
  position: sticky;
  align-self: start;
  top: 2rem;
  grid-column: 1 / -1;
  grid-row: 1;
  pointer-events: none;
}

.nav-section a 
{
  transition: all 200ms ease-in-out;
  text-decoration: none;
  padding: .125rem 0;
  display: block;
  color: var(--color-fill-light);
  width: 20%;
  pointer-events: auto;
}

.nav-section a:hover,
.nav-section a:focus 
{
  color: var(--color-select);
  transform: translateX(10px);
}

ul, ol 
{
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-fill-light);
}

ul
{
  margin-left: 3rem;
}

li 
{
  margin-left: 2rem;
  margin-bottom: 2.4rem;
}

li a
{
  font-family: 'Consolas';
  text-align: center;
  background: var(--color-fill-dark);
  box-shadow: 
    0 0 0 0.1em var(--color-edges), 
	0 0 0 0.4em var(--color-fill-light), 
	0 0 0 0.5em var(--color-edges);
  border-radius: 0.25em;
}

li a:hover,
li a:focus 
{
  box-shadow: 
    0 0 0 0.1em var(--color-edges), 
	0 0 0 0.4em var(--color-select), 
	0 0 0 0.5em var(--color-edges);
}

grid 
{
  display: grid;
  grid-template-columns: 0 100%;
}

.nav-content
{
	grid-column: 2;
	grid-row: 1;
}

html 
{
  scroll-behavior: smooth;
}