neoskitties/revive.css Secret

## revive.css
:root {
  --rich-black: #00000b;
  --white-smoke: #f5f5f5;
  --straw: #d9de7f;
  --citron: #bdc15b;
  --apple-green: #a0a436;
}

* {
  box-sizing: border-box;
  image-rendering: pixelated;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  font-family: arial;
  transition: 0.4s;
  margin: 0;
  padding: 0;
}

html {
  background: var(--rich-black);
  color: var(--white-smoke);
  font-weight: bold;
  scrollbar-color: var(--straw) var(--apple-green);
}

h1 {
  text-align: center;
  font-size:40px;
  line-height:32px;
}

button {
  background: var(--straw);
  border: 8px outset var(--apple-green);
  width: 100px;
  display: inline;
  margin: 4px;
}

a {
  text-decoration: none;
}

a button {
  text-decoration: none;
  font-weight: bold;
}

a button:hover {
  filter: brightness(75%);
}

p {
  margin-bottom: 16px;
}

hr {
  border: 4px solid var(--apple-green);
  margin: 8px;
}

.container {
  background: var(--citron);
  color: var(--rich-black);
  max-width: 640px;
  min-height: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 160px 1fr 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "sidebar content content";
  padding: 12px;
}

.header {
  background: var(--straw);
  color: var(--rich-black);
  border: 12px outset var(--apple-green);
  max-width: 640px;
  padding: 16px;
  margin: 16px auto;
  grid-area: header;
}

.sidebar {
  position: relative;
  background: var(--straw);
  color: var(--rich-black);
  border: 12px outset var(--apple-green);
  width: 200px;
  padding: 16px;
  margin-right: 20px;
  margin-bottom: 20px;
  grid-area: sidebar;
}

.updates {
  background: var(--citron);
  height: 200px;
  width: 100%;
  padding: 8px;
  border: 4px solid var(--apple-green);
  overflow-y: auto;
  scrollbar-color: var(--apple-green) var(--citron);
}

.content {
  grid-area: content;
}

.content a {
  color: var(--rich-black);
  text-decoration: underline dotted;
}

@media screen and (max-width: 650px) {
  .container {
    background: var(--citron);
    color: var(--rich-black);
    max-width: 640px;
    min-height: 300px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 0px 0px;
    grid-template-areas:
      "header header header"
      "content content content"
      "sidebar sidebar sidebar";
    padding: 12px;
  }

  .sidebar {
    width: 100%;
  }
}

## revive.html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>

<body>

  <div class="container">

    <div class="header">
      <h1><b>Revive</b></h1>
      <center>
        <a href="#"><button>Link</button></a>
        <a href="#"><button>Link</button></a>
        <a href="#"><button>Link</button></a>
        <a href="#"><button>Link</button></a>
        <a href="#"><button>Link</button></a>
      </center>
    </div>

    <div class="sidebar">
      <center>
        <h3>This is a sidebar</h3>
        <a href="#"><button>Link</button></a>
        <a href="#"><button>Link</button></a>
        <hr>
        <p>Text can go here</p>
        <div class="updates">
          <p>Updates can go here</p>
          <hr>
          <p> Update</p>
          <hr>
          <p> Update</p>
          <hr>
          <p> Update</p>
          <hr>
          <p> Update</p>
        </div>
      </center>
    </div>

    <div class="content">
      <p>All boxes should expand to fit whatever content you add.</p>
    </div>
  </div>

</html>
	:root {
	--rich-black: #00000b;
	--white-smoke: #f5f5f5;
	--straw: #d9de7f;
	--citron: #bdc15b;
	--apple-green: #a0a436;
	}

	* {
	box-sizing: border-box;
	image-rendering: pixelated;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	font-family: arial;
	transition: 0.4s;
	margin: 0;
	padding: 0;
	}

	html {
	background: var(--rich-black);
	color: var(--white-smoke);
	font-weight: bold;
	scrollbar-color: var(--straw) var(--apple-green);
	}

	h1 {
	text-align: center;
	font-size:40px;
	line-height:32px;
	}

	button {
	background: var(--straw);
	border: 8px outset var(--apple-green);
	width: 100px;
	display: inline;
	margin: 4px;
	}

	a {
	text-decoration: none;
	}

	a button {
	text-decoration: none;
	font-weight: bold;
	}

	a button:hover {
	filter: brightness(75%);
	}

	p {
	margin-bottom: 16px;
	}

	hr {
	border: 4px solid var(--apple-green);
	margin: 8px;
	}

	.container {
	background: var(--citron);
	color: var(--rich-black);
	max-width: 640px;
	min-height: 100%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 160px 1fr 1fr;
	gap: 0px 0px;
	grid-template-areas:
	"header header header"
	"sidebar content content"
	"sidebar content content";
	padding: 12px;
	}

	.header {
	background: var(--straw);
	color: var(--rich-black);
	border: 12px outset var(--apple-green);
	max-width: 640px;
	padding: 16px;
	margin: 16px auto;
	grid-area: header;
	}

	.sidebar {
	position: relative;
	background: var(--straw);
	color: var(--rich-black);
	border: 12px outset var(--apple-green);
	width: 200px;
	padding: 16px;
	margin-right: 20px;
	margin-bottom: 20px;
	grid-area: sidebar;
	}

	.updates {
	background: var(--citron);
	height: 200px;
	width: 100%;
	padding: 8px;
	border: 4px solid var(--apple-green);
	overflow-y: auto;
	scrollbar-color: var(--apple-green) var(--citron);
	}

	.content {
	grid-area: content;
	}

	.content a {
	color: var(--rich-black);
	text-decoration: underline dotted;
	}

	@media screen and (max-width: 650px) {
	.container {
	background: var(--citron);
	color: var(--rich-black);
	max-width: 640px;
	min-height: 300px;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto 1fr auto;
	gap: 0px 0px;
	grid-template-areas:
	"header header header"
	"content content content"
	"sidebar sidebar sidebar";
	padding: 12px;
	}

	.sidebar {
	width: 100%;
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<meta charset="UTF-8">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="">
	<style>
	</style>

	<body>

	<div class="container">

	<div class="header">
	<h1><b>Revive</b></h1>
	<center>
	<a href="#"><button>Link</button></a>
	<a href="#"><button>Link</button></a>
	<a href="#"><button>Link</button></a>
	<a href="#"><button>Link</button></a>
	<a href="#"><button>Link</button></a>
	</center>
	</div>

	<div class="sidebar">
	<center>
	<h3>This is a sidebar</h3>
	<a href="#"><button>Link</button></a>
	<a href="#"><button>Link</button></a>
	<hr>
	<p>Text can go here</p>
	<div class="updates">
	<p>Updates can go here</p>
	<hr>
	<p> Update</p>
	<hr>
	<p> Update</p>
	<hr>
	<p> Update</p>
	<hr>
	<p> Update</p>
	</div>
	</center>
	</div>

	<div class="content">
	<p>All boxes should expand to fit whatever content you add.</p>
	</div>
	</div>

	</html>