:root {
  --color-indigo-50: #f6f4fb;
  --color-indigo-100: #f0ecf8;
  --color-indigo-200: #dfd6f0;
  --color-indigo-300: #d1c3e9;
  --color-indigo-400: #c2b1e2;
  --color-indigo-500: #b39ddb;
  --color-indigo-600: #8866c7;
  --color-indigo-700: #613ca4;
  --color-indigo-800: #40286c;
  --color-indigo-900: #211538;
  --color-indigo-950: #0f0a1a;
}

body {
	background-color: #EDE7F6;
	color: #311B92;
}

.container {
	width: 40rem;
	margin: 0 auto;
	background-color: var(--color-indigo-500);
	padding: 2rem;
  border-top: solid var(--color-indigo-400) 1px;
  border-left: solid var(--color-indigo-400) 1px;
  border-bottom: solid var(--color-indigo-600) 1px;
  border-right: solid var(--color-indigo-600) 1px;
}

.navigation-bar {
  width: 640px;
  margin: 0 auto;
	padding: 0.01rem;
	background-color: #673AB7;
}

.nav-item {
	display: inline;
}

.nav-item>a {
	padding: 8px;
	color: #D1C4E9;
}

.in-container {
  padding-top: 30px;
}

.pukeko-image {
  border-top: solid var(--color-indigo-400) 2px;
  border-left: solid var(--color-indigo-400) 2px;
  border-bottom: solid var(--color-indigo-600) 2px;
  border-right: solid var(--color-indigo-600) 2px;
}