neoskitties/premierball.css Secret

## premierball.css
 :root {
  --bittersweet: #F86860;
  --persion-red: #D04038;
  --white: #F0F8F8;
  --eggshell: #E0E0C8;
  --sage: #B8B8A0;
  --battleship: #888078;
  --night: #0B0A09
}
* {
  box-sizing: border-box;
  image-rendering:pixelated;
  transition:0.4s;
  font-family:arial;
  scrollbar-width:thin;
  scrollbar-color:var(--night) var(--white);
}

html {
  background:var(--eggshell);
  color:var(--night);
}

a {
  color:var(--persion-red);
  text-decoration:underline dotted var(--persion-red);
}

a:hover {
  color:var(--battleship);
}

.container {
  background:var(--white);
  width:800px;
  height:600px;
  margin:auto;
  margin-top:40px;
  border:4px solid var(--night);
  border-radius:80px 24px 24px 80px;
  box-shadow:16px 16px 0px var(--battleship);
   overflow-y: auto;
  scrollbar-color:var(--persion-red) var(--eggshell);
}

.sidebar {
  position:fixed;
  background:var(--persion-red);
  color:var(--white);
  width:200px;
  height:593px;
  border-right:4px solid var(--night);
  border-radius:76px 0px 0px 76px;
  text-align:center;
  padding:16px 0px;
  float:left;
}

.sidebar h1 {
  line-height:32px;
  margin-top:0px;
}

.sidebar h2 {
  background:var(--bittersweet);
  color:var(--night);
  width:90%;
  margin:auto;
  margin-top:4px;
  padding:4px;
  border:4px solid var(--night);
  border-radius:8px;
}

.sidebar p {
  padding:8px 16px;
}

.sidebar button {
  background: var(--persion-red);
  color:var(--white);
  text-decoration:none;
  font-size:18px;
  width:196px;
  height:32px;
  padding:4px;
  border:0;
  border-bottom:4px solid var(--night);
}

.sidebar button:hover {
  font-size:19px;
  font-weight:bold;
  cursor:pointer;
  background: var(--bittersweet);
  color: var(--night);
  border-radius:8px 8px 0px 0px ;
}

.updates {
  background:var(--bittersweet);
  color:var(--night);
  margin-top:4px;
  height:100px;
  border-top: 4px solid var(--night);
  border-bottom: 4px solid var(--night);
  text-align:left;
  overflow-y:auto;
  scrollbar-color: var(--persion-red) var(--eggshell);
}

.updates ul {
  padding-left:18px;
  margin-top:4px;
}

.main {
  margin-left:200px;
  padding:16px 16px;
  height:100%;
}

.box {
  background:var(--eggshell);
  color:var(--night);
  border:4px solid var(--night);
  border-radius:24px;
  width:100%;
  padding:8px 16px;
  font-size:18px;
  box-shadow: 8px 8px 0px var(--battleship);
  margin-bottom:32px;
}

.box h2 {
  text-align:center;
  background:var(--battleship);
  color:var(--white);
  border:4px solid var(--night);
  border-radius: 24px;
  padding:4px 0px;
}

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

<body>

  <div class="container">
    <div class="sidebar">
      <h1>Premier Theme</h1>
      <h2>Links</h2>
      <a href="#"><button>Link 1</button></a>
      <a href="#"><button>Link 2</button></a>
      <a href="#"><button>Link 3</button></a>
      <a href="#"><button>Link 4</button></a>
      <h2>Updates</h2>
      <div class="updates">
        <ul>
          <li>Update</li>
          <li>Update</li>
          <li>Update</li>
          <li>Update</li>
          <li>Update</li>
        </ul>
      </div>
      <h2>Other</h2>
      <p>I'm sure you'll figure out what to put here!</p>
    </div>

    <div class="main">

      <div class="box">
        <h2>Here is a box!</h2>
        <p>It can contain a LOT of text! and other stuff too, I suppose.</p>
      </div>

      <div class="box">
        <h2>Wow another box!</h2>
        <p>You can make as many boxes as you like!</p>
      </div>

      <div class="box">
        <h2>If you add enough boxes...</h2>
        <p>A scrollbar will appear!</p>
        <p>Isn't that neat!</p>
        <p>Look at that scrollbar (so cool!)</p>
      </div>

    </div>
  </div>

</body>

</html>
	:root {
	--bittersweet: #F86860;
	--persion-red: #D04038;
	--white: #F0F8F8;
	--eggshell: #E0E0C8;
	--sage: #B8B8A0;
	--battleship: #888078;
	--night: #0B0A09
	}
	* {
	box-sizing: border-box;
	image-rendering:pixelated;
	transition:0.4s;
	font-family:arial;
	scrollbar-width:thin;
	scrollbar-color:var(--night) var(--white);
	}

	html {
	background:var(--eggshell);
	color:var(--night);
	}

	a {
	color:var(--persion-red);
	text-decoration:underline dotted var(--persion-red);
	}

	a:hover {
	color:var(--battleship);
	}

	.container {
	background:var(--white);
	width:800px;
	height:600px;
	margin:auto;
	margin-top:40px;
	border:4px solid var(--night);
	border-radius:80px 24px 24px 80px;
	box-shadow:16px 16px 0px var(--battleship);
	overflow-y: auto;
	scrollbar-color:var(--persion-red) var(--eggshell);
	}

	.sidebar {
	position:fixed;
	background:var(--persion-red);
	color:var(--white);
	width:200px;
	height:593px;
	border-right:4px solid var(--night);
	border-radius:76px 0px 0px 76px;
	text-align:center;
	padding:16px 0px;
	float:left;
	}

	.sidebar h1 {
	line-height:32px;
	margin-top:0px;
	}

	.sidebar h2 {
	background:var(--bittersweet);
	color:var(--night);
	width:90%;
	margin:auto;
	margin-top:4px;
	padding:4px;
	border:4px solid var(--night);
	border-radius:8px;
	}

	.sidebar p {
	padding:8px 16px;
	}

	.sidebar button {
	background: var(--persion-red);
	color:var(--white);
	text-decoration:none;
	font-size:18px;
	width:196px;
	height:32px;
	padding:4px;
	border:0;
	border-bottom:4px solid var(--night);
	}

	.sidebar button:hover {
	font-size:19px;
	font-weight:bold;
	cursor:pointer;
	background: var(--bittersweet);
	color: var(--night);
	border-radius:8px 8px 0px 0px ;
	}

	.updates {
	background:var(--bittersweet);
	color:var(--night);
	margin-top:4px;
	height:100px;
	border-top: 4px solid var(--night);
	border-bottom: 4px solid var(--night);
	text-align:left;
	overflow-y:auto;
	scrollbar-color: var(--persion-red) var(--eggshell);
	}

	.updates ul {
	padding-left:18px;
	margin-top:4px;
	}

	.main {
	margin-left:200px;
	padding:16px 16px;
	height:100%;
	}

	.box {
	background:var(--eggshell);
	color:var(--night);
	border:4px solid var(--night);
	border-radius:24px;
	width:100%;
	padding:8px 16px;
	font-size:18px;
	box-shadow: 8px 8px 0px var(--battleship);
	margin-bottom:32px;
	}

	.box h2 {
	text-align:center;
	background:var(--battleship);
	color:var(--white);
	border:4px solid var(--night);
	border-radius: 24px;
	padding:4px 0px;
	}
	<!DOCTYPE html>
	<html lang="en">
	<meta charset="UTF-8">
	<title>Premier Ball</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="">
	<style>
	</style>

	<body>

	<div class="container">
	<div class="sidebar">
	<h1>Premier Theme</h1>
	<h2>Links</h2>
	<a href="#"><button>Link 1</button></a>
	<a href="#"><button>Link 2</button></a>
	<a href="#"><button>Link 3</button></a>
	<a href="#"><button>Link 4</button></a>
	<h2>Updates</h2>
	<div class="updates">
	<ul>
	<li>Update</li>
	<li>Update</li>
	<li>Update</li>
	<li>Update</li>
	<li>Update</li>
	</ul>
	</div>
	<h2>Other</h2>
	<p>I'm sure you'll figure out what to put here!</p>
	</div>

	<div class="main">

	<div class="box">
	<h2>Here is a box!</h2>
	<p>It can contain a LOT of text! and other stuff too, I suppose.</p>
	</div>

	<div class="box">
	<h2>Wow another box!</h2>
	<p>You can make as many boxes as you like!</p>
	</div>

	<div class="box">
	<h2>If you add enough boxes...</h2>
	<p>A scrollbar will appear!</p>
	<p>Isn't that neat!</p>
	<p>Look at that scrollbar (so cool!)</p>
	</div>

	</div>
	</div>

	</body>

	</html>