@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

.bg1 {background-color: var(--bg1)}
.bg0 { background-color: var(--bg0)}

.fg1 {color: var(--fg1);}
.fg0 {color: var(--fg0);}
.fg00 {color: var(--fg00);}

.red {color: var(--red)}
.orange {color: var(--orange)}
.yellow {color: var(--yellow)}
.green {color: var(--green)}
.cyan {color: var(--cyan)}
.blue {color: var(--blue)}
.purple {color: var(--purple)}
.pink {color: var(--pink)}

* {
	font-family: "Ubuntu Mono", monospace;
	font-weight: 400;
	font-style: normal;
	color: var(--fg0);
	margin: 0;
	padding: 0;
}

::selection {
	background-color: var(--bg1);
}

html {
	overflow:hidden;
}

.abs-centered {
	position: absolute;
	translate: -50%;
	left: 50%;
}

.flex-centered {
	display: flex;
	justify-content: center;
	align-items: center;
}

body {
	background: no-repeat center fixed;
	background-size: auto 150vh;
	transition: background-position-x 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	height: 100vh;
}

main {
	display: flex;
	flex-wrap: nowrap;
	transition: translate 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.workspace {
	flex: 0 0 auto;
	width: 100vw;
}

.workspace-content {
	margin: 10px 50px;
}

header {
	margin: 10px 50px 0;
	height: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header * {
	font-size: 1rem;
}

.bar-container, .bar-container-item {
	height: inherit;
}

.bar-container-item {
	padding: 0 10px;
}

.nav-item {
	margin: 0 10px;
	transition: transform 250ms cubic-bezier(0.075, 0.82, 0.165, 1);
	width: 30px;
	height: 30px;
}
.nav-item:hover {
	transform: scale(1.2);
}
.nav-item:active {
	transform: scale(0.9);
}

button,select {
	background-color: var(--bg0);
	border: none;
}
button:hover,select:hover {
	background-color: var(--bg1);
}