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

@font-face {
font-family: PC98;
src: url(https://dl.dropbox.com/s/q6te1rmeglfy4bf/pc-9800.ttf);
}

body {
  min-height: 100vh;
  background-image: radial-gradient(circle, #fff, #fff7fc);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

nav a {
	color: #7d7d7d;
	background: #fff;
	border: 1px solid #b0b0b0;
	border-radius: 3px;
	padding: 3px 10px;
	cursor: pointer;
}

nav {
	padding: 6px 8px;
}

header {
	background: #faf0f6;
	border-radius: 10px 10px 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

header,
nav,
.base {
  font-family: PC98;
	border: 1px solid #b0b0b0;
	box-shadow: inset 10px 0px 6px -10px #cfcfcf, inset -10px 0px 6px -10px #cfcfcf,
		inset 0px 10px 6px -10px #fff, inset 0px -10px 6px -10px #cfcfcf;
}

nav,
header {
	width: 24rem;
	/* 	height: 2.5rem; */
	border-bottom: none;
}

main {
	height: 12rem;
	width: 24rem;
	background: #fff;
	box-shadow: inset 10px 0px 6px -10px #cfcfcf, inset -10px 0px 6px -10px #cfcfcf,
		inset 0px 10px 6px -10px #fff, inset 0px -10px 6px -10px #fff;
	border: 1px solid #b0b0b0;
	border-bottom: none;
}

main div {
	width: 85%;
	height: 100%;
	border-left: 1px solid #b0b0b0;
	border-right: 1px solid #b0b0b0;
	margin: auto;
}

nav,
.base {
	background: #f5f5f5;
}

.one {
	width: 24rem;
	height: 2.5rem;
	border-radius: 0 0 10px 10px;
}

.two {
	width: 4rem;
	height: 2rem;
	border-top: none;
	border-bottom: none;
}

.three {
	width: 18rem;
	height: 1.5rem;
	border-radius: 10px 10px 0 0;
}