:root {
	--color-bg: #222;
	--color-bgh1: rgba(20.0, 20.0, 255.0, 0.5);
	--color-text: #ccc;
  --color-h23: #eee;
	--color-link: #77e;
	--color-link-hover: #f88;
	--color-separator: #999;
  --shadow-base: 0 0 8px 4px rgba(0, 0, 0, 0.8);
  --shadow-light: 0 0 200px rgba(250, 250, 250, 0.15);
}



* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
  font-size: 19px;
	font-weight: 400;
}

@font-face {
	font-family: Oxanium;
	src: url('fonts/Oxanium-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

body {
	font-family: Oxanium, monospace;
	color: var(--color-text);
	background-color: var(--color-bg);
	line-height: 1.6;
	margin: 0 auto;
	padding: 8px;
	max-width: 1400px;

  background: url('img/tilew.png') repeat;
  background-blend-mode: multiply;
  background-color: #2e2e2e;
}

header, footer {
  box-shadow: var(--shadow-base), var(--shadow-light);
}
header, footer, section, article {
  background: url('img/tilew.png') repeat;
  background-color: #252525;
  background-blend-mode: multiply;
}
section {
  box-shadow: var(--shadow-base);
	padding: 0.4rem 0.4rem;
  margin: 1.5rem 0;
}



a {
	text-decoration: none;
	color: var(--color-link);
	transition: color 0.2s ease;
}
a:hover {
	color: var(--color-link-hover);
}




header {
	padding: 0.5rem 0.4rem;
	display: flex;
  justify-content: space-between;
	align-items: center;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

footer {
	padding: 0.5rem 0.4rem;
	text-align: center;
	font-size: 0.9rem;
	opacity: 0.7;
  margin-top: 1.5rem;
}


nav {
  width: 100%;
  display: flex;
  align-items: center;
}

nav a {
	color: var(--color-text);
	padding: 0.5rem 0.5rem;
  margin: 0 20px;
}
.fill {
  flex-grow: 1;
}


#menu-toggle {
  display: none;
}
.menu-icon {
  display: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
	padding: 0.5rem 1rem;
  align-self: flex-start;
}




.articles {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
article {
  box-shadow: var(--shadow-base);
}




h1 {
  font-size: 1.6em;
  /*box-shadow: var(--shadow-light), inset 0 0 0px 2px rgba(0, 0, 0, 0.3);*/
  box-shadow: inset 0 0 0px 2px rgba(0, 0, 0, 0.3);
	background-color: var(--color-bgh1);
}
h2 {
  /*box-shadow: var(--shadow-light);*/
}
h2, h3 {
  font-size: 1.4em;
	color: var(--color-h23);
}
h1, h2, h3 {
	padding: 0 3.2rem;
}
h2, h3 {
  margin: 1rem auto;
}

p {
  margin: 1rem 3.5rem;
}

ul {
  margin: 1rem 5rem;
}







@media (max-width: 700px) {
  nav {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  nav a {
    overflow: hidden;
    max-height: 0px;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height 0.15s ease,
                padding-top 0.15s ease,
                padding-bottom 0.15s ease;
  }
  #menu-toggle:checked + nav a {
    max-height: 2rem;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
  }
  .menu-icon {
    display: block;
  }
  
  p {
    margin-left: 0.8rem;
    margin-right: 0.8rem;
  }
  h1, h2, h3 {
    padding-left: 0.8rem;
  }

}



img {
  display: block;
  max-width: 95%;
  height: auto;
  margin: 2rem auto;
  box-shadow: var(--shadow-base), var(--shadow-light);
}