@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400;500;600;700&family=Roboto:wght@100;300;400;500;700;900&display=swap');

:root {
  --background1: #202137;
  --background2: #27273f;
  --background3: #1e1e34;
  --text1: #fefefe;
  --text2: #aaa;
  --details1: #38bbfe;
  --details2: #54f8b3;
  --details3: #ec407a;
  --success: #9ccc65;
  --try: #ffca28;
  --failure: #ef5350;
  --error: #bb4ece;
}

::selection {
	background-color: var(--details3);
	color: var(--text1);
}

::-webkit-resizer {
	display: none;
  }

* {
	color: var(--text1);
}

*:focus {
	outline: 1px solid var(--details1);
}

a:focus, button:focus {
	outline: none;
}

.fa-solid {
	font-size: 1.2em;
    margin-right: 0.2em;
	color: var(--details1);
}

body {
	background-color: var(--background1);
	margin: 0;
	color: var(--text1);
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

header {
	padding: 2em 3em;
	background-color: var(--background2);
	box-shadow: 0 0 1em 2px var(--background3);
}

header nav {
	float: right;
    padding: 2em 0;
	text-align: right;
	width: 40%;
}

header nav ul {
	padding: 0;
	margin: 0;
}

header nav ul li {
	display: inline-block;
	list-style: none;
}

header nav ul li a {
	padding: 3em;
    text-decoration: none;
    border-bottom: 2px solid var(--lines);
	transition: 0.3s;
}

header nav ul li a:hover {
	text-shadow: 0 0 0.4em var(--text1);
}

#cla_a {
	color: var(--details2);
	font-weight: 400;
}

#cla_a:hover {
	text-shadow: 0 0 0.4em var(--details2);
}


#tclam_a {
	color: var(--details1);
	font-weight: 400;
}

#tclam_a:hover {
	text-shadow: 0 0 0.4em var(--details1);
}

#tclai_a {
	color: var(--details3);
	font-weight: 400;
}

#tclai_a:hover {
	text-shadow: 0 0 0.4em var(--details3);
}

pre, code {
	font-family: 'Roboto Mono', sans-serif;
	font-size: 0.85em;
}

pre em, code em {
	color: var(--details1);
	font-weight: 400;
	font-style: inherit;
}

h1 {
	font-size: 2em;
	font-weight: 400;
	width: 50%;
}

#content {
	margin: 3rem;
}

h2 {
	font-size: 1.2em;
	font-weight: 400;
	color: var(--details1);
}

#input_form {
	margin: 3rem 0;
}

#input_form h3 {
	margin: 0;
}

h3 {
	font-size: 1.2em;
	font-weight: 300;
	margin: 1.4rem 0;
}

select {
	font-family: 'Roboto';
	font-size: 1em;
	font-weight: 300;
    background: none;
    vertical-align: middle;
	border: 1px solid var(--text1);
}

#input_prog {
	font-family: 'Roboto Mono', monospace;
	font-size: 0.85em;
	font-weight: 300;
	width: calc(100% - 2em);
	height: 6em;
	border: none;
	overflow: auto;
	padding: 1em;
    line-height: 1.8em;
    resize: vertical;
    display: block;
    margin: 1.4rem 0;
	border-radius: 1em 1em 0 1em;
	box-shadow: 0 0 1em 2px var(--background3);
	background: var(--background2) url(assets/grabber.png) no-repeat bottom right / 0.85em;
}

button {
	background: var(--details1);
	background: linear-gradient(90deg, var(--details1) 0%, var(--details1) 100%);
    border: none;
    border-radius: 0.6em;
    padding: 0.4em;
    width: 6em;
	transition: 0.3s;
}

button:hover {
	box-shadow: 0 0 1em 0 var(--details1);
	background: linear-gradient(90deg, var(--details2) 0%, var(--details1) 66%);
}

button:disabled {
	background: var(--text2);
	transition: 0s;
}

button:disabled:hover {
	box-shadow: 0 0 1em 0 var(--background2);
}

.d_table {
	display: table;
	width: 100%;
	margin-bottom: 4rem;
}

.d_row {
	display: table-row;
}

.d_cell {
	display: table-cell;
}

#output_area {
	font-family: 'Roboto Mono', monospace;
	font-size: 0.85em;
	overflow: auto;
	height: 60vh;
	width: calc(66vw - 6em);
	border-radius: 1em 1em 0 1em;
	box-shadow: 0 0 1em 2px var(--background3);
	margin-right: 2em;
	padding: 1em;
	resize: vertical;
	background: var(--background2) url(assets/grabber.png) no-repeat bottom right / 0.85em;
}

.placeholder_text {
	color: var(--text2);
}

.rnum {
	color: var(--text2);
    margin-right: 0.2em;
    font-size: 0.8em;
	text-align: right;
    display: inline-block;
    min-width: 1em;
	user-select: none;
}

#output_area p, #af_area p {
	margin:0;
	line-height: 1.8em;
}

#output_area p {
	text-indent: -2em;
    margin-left: 2em;
}

#output_area .suc_span {
	color: var(--success);
}

#output_area .try_span {
	color: var(--try);
}

#output_area .flr_span {
	color: var(--failure);
}

#output_area .err_span {
	color: var(--error);
}

#output_area .step_line {
	color: var(--text2);
    font-size: 0.8em;
}

#af_area {
	font-family: 'Roboto Mono', monospace;
	font-size: 0.85em;
	overflow: auto;
	height: calc(30vh - 3rem);
	width: calc(33vw - 6em);
	margin-bottom: 1.2em;
	border-radius: 1em 1em 0 1em;
	box-shadow: 0 0 1em 2px var(--background3);
	padding: 1em;
	resize: vertical;
	background: var(--background2) url(assets/grabber.png) no-repeat bottom right / 0.85em;
}

#af_timeline {
	font-family: 'Roboto Mono', monospace;
	font-size: 0.85em;
	overflow: auto;
	height: calc(30vh - 3rem);
	width: calc(33vw - 6em);
	text-align: center;
	border-radius: 1em 1em 0 1em;
	box-shadow: 0 0 1em 2px var(--background3);
	padding: 1em;
	resize: vertical;
	background: var(--background2) url(assets/grabber.png) no-repeat bottom right / 0.85em;
}

.axis path, .axis line {
  fill: none;
  stroke: var(--text1);
  shape-rendering: crispEdges;
}

.axis text {
  font-size: 1em;
}

.timeline-label {
  font-size: 1em;
}

rect {
	stroke: var(--background1);
	stroke-width: 2px;
	stroke-opacity: 0;
	transition: 0.3s;
}

rect:hover {
	stroke-opacity: 1;
}

.loading1 {
	visibility: hidden;
	animation: loadAni1 2s infinite;
}

@keyframes loadAni1 {
	0% {
		visibility: hidden;
	}
	25% {
		visibility: hidden;
	}
	50% {
		visibility: visible;
	}
	75% {
		visibility: visible;
	}
	100% {
		visibility: visible;
	}
}

.loading2 {
	visibility: hidden;
	animation: loadAni2 2s infinite;
}

@keyframes loadAni2 {
	0% {
		visibility: hidden;
	}
	25% {
		visibility: hidden;
	}
	50% {
		visibility: hidden;
	}
	75% {
		visibility: visible;
	}
	100% {
		visibility: visible;
	}
}

.loading3 {
	visibility: hidden;
	animation: loadAni3 2s infinite;
}

@keyframes loadAni3 {
	0% {
		visibility: hidden;
	}
	25% {
		visibility: hidden;
	}
	50% {
		visibility: hidden;
	}
	75% {
		visibility: hidden;
	}
	100% {
		visibility: visible;
	}
}

#grammar {
	margin: 0 1em;
}

#ref_h3 {
	margin-top: 4rem;
}

#pubs li {
	line-height: 1.8em;
}

#pubs li::marker {
	content: "[" counter(list-item) "] ";
}

#pubs li span {
	font-weight: 400;
    color: var(--details1);
}

footer {
	padding: 3em 3em;
	background-color: var(--background2);
	box-shadow: 0 0 1em 2px var(--background3);
	text-align: center;
	font-size: 0.85em;
	margin-top: 4rem;
}

footer address {
	font-style: normal;
}

footer a {
	text-decoration: none;
	transition: 0.3s;
}

footer a:hover {
	color: var(--details1);
}


@media screen and (max-width: 750px) {
	
	header {
		padding: 6em 0;
	}

	header nav {
		text-align: center;
		float: none;
		width: 100%;
		position: absolute;
		top: 6em;
	}

	header nav ul li a {
		padding: 2em;
		font-weight: 400;
	}

	h1 {
		width: 100%;
		text-align: center;
		position: absolute;
		top: 1em;
		font-weight: 500;
	}

	h2, h3 {
		text-align: center;
		font-weight: 400;
	}

	.br_span {
		display: block;
	}

	.hidden_span {
		display: none;
	}

	#content {
		margin: 2rem 1rem;
	}

	#buttons {
		text-align: center;
	}

	button {
		padding: 0.8em;
		width: 35%;
		font-size: 0.9em;
	}

	.d_table {
		margin: 0;
	}

	.d_cell {
		display: block;
	}

	.hidden_cell {
		height: 0;
		visibility: hidden;
	}

	#input_prog, #output_area, #af_area, #af_timeline {
		width: calc(100% - 2em);
		border-radius: 1em;
		background-image: none;
		margin-bottom: 3rem;
	}

	pre {
		white-space: pre-line;
	}

	#pubs li {
		line-height: 1.4em;
		margin: 1em 0;
	}

	footer address {
		line-height: 2em;
	}

}