:root {
  --bgc: #281c17;
  --bg2c: #362a23;
  --borderc: #53443c;
  --panelc: #332720;
  --text1c: #fbf9f6;
  --text2c: #aea59a;
  --button-hoverc: #aea59a;
  --button-clickc: #fbf9f6;
  --button-selectc: #53443c;
}

@font-face { font-family: 'WorkSans'; src: url('fonts/WorkSans-Regular.ttf'); }
@font-face { font-family: 'WorkSans'; src: url('fonts/WorkSans-Italic.ttf'); font-style: italic; }

* { font-family: 'WorkSans', sans-serif; box-sizing: border-box; margin: 0; padding: 0;}

body {
	height: 100vh;
	
	display: flex;
	flex-direction: column;
	
	background-color: var(--bgc); 
	color: var(--text1c);
	
	padding: 15px;
}

header {
	font-size: 1.2rem;
	color: var(--text2c);
	margin-top: 10px;
	margin-bottom: 20px;
}

main {
	flex-grow: 1;
	
	width: 100%;
	display: flex;
	flex-direction: row;
	overflow: hidden;
	
	border: 1px solid var(--borderc);
	border-radius: 16px;
}

footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
	color: var(--text2c);
	
	padding-top: 10px;
}
/* -------------- BUTTONS -------------- */
button {
	background: none;
	
	border: 1px solid var(--borderc);
	border-radius: 9px;
	
	color: var(--text2c);
	font-family: 'WorkSans', sans-serif;
	font-size: 1.0rem;
	
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

button:hover {
	background-color: var(--button-hoverc);
	border: 1px solid var(--text1c);
	color: var(--bgc);
}

button:active {
	background-color: var(--button-clickc);
}

scratchpad button {
	margin-top: -5px;
	margin-left: 15px;
}

actionpanel button {
	margin-left: 20px;
	margin-bottom: 20px;
}

.wordgroup button  {
	margin: 0px;
	margin-top: 20px;
	background-color: var(--bgc);
}

.wordgroup button:hover {
	background-color: var(--panelc);
	border: 1px solid var(--text1c);
	color: var(--text1c);
}

.wordgroup button:active {
	background-color: var(--button-selectc);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* -------------- ICON BAR -------------- */
iconbar {
	background-color: var(--panelc); 
	border-right: 1px solid var(--borderc);
	display: flex;
	flex-direction: column;
}

.icon {
	border: 1px solid var(--borderc);
	border-radius: 15px;
	
	padding: 10px;
	margin: 15px
}

.selected_icon {
	background-color: var(--button-selectc);
	pointer-events: none;
}

/* -------------- SCRATCH PAD -------------- */
scratchpad {
	flex-grow: 1;
	
	display: flex;
	flex-direction: column;
	
	color: var(--text2c)
}
scratchpad .toprow {
	display: flex;
	flex-direction: row;
	margin: 20px;
	margin-bottom: 0px;
}

scratchpad .wordcounter {
	flex-grow: 1;
	text-align: right;
	margin-right: 30px;
}

scratchpad textarea {
	flex-grow: 1;
	
	background-color: var(--bg2c);
	resize: none;
	outline: none;
	
	border: 1px solid var(--borderc);
	border-radius: 15px;
	
	padding: 30px;
	margin: 20px;
	
	color: var(--text1c);
	font-family: 'WorkSans', sans-serif;
	font-size: 1.1rem;
	
	scrollbar-color: var(--borderc) transparent;
}
scratchpad textarea::placeholder { color: var(--text2c); }

/* -------------- ACTION PANEL -------------- */
actionpanel {
	width: 25%;
	
	display: flex;
	flex-direction: column;
	
	background-color: var(--panelc); 
	border-left: 1px solid var(--borderc);
	
	color: var(--text2c);
}

actionpanel .title {
	margin:20px;
	margin-bottom:8px;
}

actionpanel input {
	width: calc(100% - 40px);
	
	background-color: var(--bgc);
	
	border: 1px solid var(--borderc);
	border-radius: 3px;
	
	margin: 20px;
	padding: 5px;
	
	color: var(--text1c);
	font-family: 'WorkSans', sans-serif;
	font-size: 1.0rem;
}

actionpanel input::placeholder { color: var(--text2c); }

actionpanel .filters {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--borderc);
}

actionpanel .groupcontainer {
	overflow-y: auto;
	flex: 1;
	min-height: 0;
	scrollbar-color: var(--borderc) transparent;
}

actionpanel .wordgroup {
	display: flex;
	flex-direction: column;
	margin: 20px;
}

.actiondivider {
	border-top: 1px solid var(--borderc);
}

.wide_action_button {
	width:calc(100% - 40px);
	padding: 10px;
	margin-top: 20px;
}

/* -------------- SPRINT PANEL -------------- */
.session_goal_container {
	flex-grow: 1;
	
	display: flex;
	flex-direction: row;
	
	margin: 20px;
}

.session_goal_wrap {
	flex-grow: 1;
	
	display: flex;
	flex-direction: column;
	
	text-align: center;
	align-items: center;
}

.session_goal {
	border: 1px solid var(--borderc);
	border-radius: 15px;
	background-color: var(--bgc);
	height:100px;
	width:90px;
	margin: 10px;
}

.session_input {
	width:calc(100% - 20px);
	margin: 10px;
	margin-top:20px;
	padding: 0px;
	border: none;
	font-size: 2.0rem;
	color: var(--text1c);
	text-align: center;
}

.goal_button {
	width:50px;
	margin:0px
}

.grow_or_die {
	margin: 10px;
	font-size: 2.0rem;
	color: var(--text1c);
	text-align: center;
	padding-top: 20px;
	height:60px;
	width:100px;
}

.sprint_stat {
	padding: 10px;
}

.sprint_stat_big {
	font-size: 2.5rem;
}