peppermint/index.scss

:root {
	--page-1: #ffffff;
	--page-2: #e0a090;
	--accent-1: #f0c7bd;
	--accent-2: #fcbaab;
	--neutral-1: #eee;
	--neutral-2: #888;
	--space-xxs: 0.05rem;
	--space-xs: 0.125rem;
	--space-s: 0.25rem;
	--space-m: 0.5rem;
	--space-l: 1.0rem;
	--space-xl: 1.5rem;
	--size-xxs: 4rem;
	--size-xs: 8rem;
	--size-s: 16rem;
	--size-m: 24rem;
	--size-l: 32rem;
}

.img {
  max-width:100%;
  max-height:100%;
}

.main {
	background: var(--page-1);
	margin: var(--space-m);
	display: inline-flex;
	flex-direction: column;
  width: 25%;
  margin: auto;
  margin-bottom: 10px;
  overflow-y:auto;
  border-bottom: solid 3px var(--page-2);
  border-right: solid 3px var(--page-2);
}

.user-card {
	background: var(--page-1);
	margin: var(--space-m);
	display: inline-flex;
	flex-direction: column;
  width: 25%;
  margin: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  overflow-y:auto;
  border-bottom: solid 3px var(--page-2);
  border-right: solid 3px var(--page-2);
}

.main-page {
	margin: var(--space-m);
  margin-left: 25px;
	max-height: 100%;
}

.main-xs .main-page {
	width: var(--size-xs);
}

.main-s .main-page {
	width: var(--size-s);
}

.main-m .main-page {
	width: var(--size-m);
}

.main-l .main-page {
	width: var(--size-l);
}

.main-bar {
	display: flex;
	padding: var(--space-s);
	background: var(--accent-1);
	border-radius: var(--space-s) var(--space-s) 0 0;
	align-items: center;
}

.main-title {
	flex-grow: 1;
	margin-left: var(--space-m);
	user-select: none;
}

html {
	font-family: monospace;
	font-size: 100%;
	background: var(--accent-2);
	color: var(--page-2);
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.f {
  display: grid;
}

.page {
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}

.q84 {
  margin-left: 35%;
  margin-bottom: 10px;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #ffffff;
}

::-webkit-scrollbar-thumb {
  background: #f2afa0;
}

::-webkit-scrollbar-thumb:hover {
  background: #c9968b;
}
a, a:visited, a:hover, a:active, a:link { 
  color: inherit;
}