style.css

*{
	box-sizing:border-box;
}
[hidden]{
	display:none !important;
}
code{
	white-space:pre-wrap;
}
a{
	color:inherit;
}

.monochrome-emoji{
	text-shadow: 0 0 0 red;
	color: transparent;  
}

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

body{
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size: 1rem;
	display:grid;
	background-color: var(--bg-color);
	color: var(--fg-color);
	grid-template-rows:min-content min-content auto min-content;
	grid-template-areas:
	"header"
	"tape"
	"editor"
	"iobox";
}

.modal{
	overflow:auto;
	max-height:100vh;
	z-index:10;
	min-width:5%;
	min-height:5%;
	border:.1rem solid var(--modal-border-color);
	color:var(--modal-fg-color);
	background-color:var(--modal-bg-color);
}

.center-of-viewport
{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}

.header{
	grid-area: header;
	display:flex;
	justify-content:space-between;
}
.toolbox{
	display:inline-flex;
}

.hamburger-container{
	display:flex;
	position:relative;
}
.hamburger-button
{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-self:center;

	position:relative;
	width:1.5rem;
	height:1rem;
	height:50%;
	margin-right:.5rem;
}
.hamburger-button:hover,
button:hover
{
	cursor:pointer;
}
.hamburger-button:hover .hamburger-line
{
	background-color:var(--hamburger-hover-color);
}
.hamburger-line
{
	background-color:var(--hamburger-color);
	border-radius:20%;
	width:100%;
	height:20%;
	left:0;
}
#hamburger-menu{
	display:block;
	position:absolute;
	opacity:97%;
	z-index:10000;
	top:101%;
	right:1rem;
	color:var(--modal-fg-color);
}
.modal .monochrome-emoji{
	text-shadow: 0 0 0 var(--modal-fg-color);
}
#hamburger-menu ul
{
	margin:auto;
	padding:0;
}
#hamburger-menu li
{
	display:block;
}
#hamburger-menu li a,
#hamburger-menu li button
{
	display:block;
	white-space:nowrap;
	cursor:pointer;
	text-decoration:none;
	color:inherit;
	border:none;
	padding:.1rem 1rem;
	width:100%;
	text-align:left;
	background-color:transparent;
}
#hamburger-menu li:hover
{
	color:var(--modal-hover-fg-color);
	background-color:var(--modal-hover-bg-color);
}
#hamburger-menu li:hover .monochrome-emoji{
	text-shadow: 0 0 0 var(--modal-hover-fg-color);
}

#error-message{
	margin:0rem .5rem;
}
#examples-modal {
	min-width:20%;
}

#examples-modal nav,
#examples-modal nav ul,
#examples-modal nav li,
#examples-modal nav button
{
	text-align:center;
	width:100%;
}

.multi-modal
{
	display:grid;
	width:98%;
	height:98%;
	grid-template-rows:minmax(auto, min-content) auto;
	grid-template-columns:min-content auto;
}
.modal-topbar
{
	display:flex;
	justify-content: space-between;
	align-items:start;
	margin:0;
	margin-bottom:.2rem;
}
.modal-title
{
	margin:0 auto;
	font-weight:900;
	font-variant:small-caps;
	font-size:1.15em;
}
.close-modal
{
	font-size:1.15em;
	background-color:transparent;
	color:inherit;
	border:none;
	padding:0;
	margin-right:.2rem;
	cursor:pointer;
}
.modal-nav
{
	border-right:inherit;
	width:100%;
	height:100%;
	grid-row:span 2;
	max-height:100%;
	overflow:auto;
}
.modal nav button
{
	display:block;
	outline:none;
	background-color:inherit;
	width:100%;
	border:none;
	color:inherit;
	text-align:left;
	padding-right:.4rem;
	padding-left:.4rem;
}
.modal nav ul
{
	padding:0;
}
.modal nav li
{
	display:block;
}
.modal nav li:hover
{
	background-color:var(--modal-hover-bg-color);
	color:var(--modal-hover-fg-color);
	cursor:pointer;
}
.modal-main-view
{
	margin-top:.5rem;
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	overflow:auto;
	padding-bottom:.5rem;
	max-height:100%;
}
.modal-main-view .option-group
{
	margin-bottom:1rem;
}

.modal-main-view form
{
	display:block;
	text-align:center;
}

.highlight{
	  border-bottom:.2rem solid currentColor;
	  position:relative;
	  bottom:1px;
}


#edit-panel-container
{
	overflow-y:hidden;
}

#edit-panel-container > .CodeMirror
{
	height:100%;
}
/* Always display scroll bar */
#edit-panel-container .CodeMirror-vscrollbar
{
	display:block;
	bottom:0px;
}
#edit-panel-container .breakpoints
{
	padding-right:.5rem;
}
#edit-panel-container .breakpoint
{
	padding-left:.125rem;
}


#iobox{
	background-color:var(--iobox-bg-color);
	color:var(--iobox-fg-color);
	font-family:monospace;
	grid-area:iobox;
	white-space:pre-wrap;
	word-wrap:break-word;
	height:1.1rem;
	overflow-y:scroll;
}
#iobox-cursor
{
	margin-left:.1rem;
	background-color:currentColor;
	animation: 1s blink step-end infinite;
}

#tape-container{
	grid-area: tape;
	position:relative;
	overflow:hidden;
	height:2rem;
	width:100%;
	margin: .2rem 0rem;
	overflow-x:scroll;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* IE 10+ */
}
/* Disable scrollbar in Blink/Webkit */
#tape-container::-webkit-scrollbar {
	height: 0px;
    background: transparent; 
}
#tape{
	position:absolute;
	display:flex;
}
.cell{
	display: flex;
	position:relative;
	margin-left:.1rem;
	width:3rem;
	height:2rem;
	text-align:center;
	border:2px solid;
	border-color:var(--cell-border-color);
	color:var(--cell-fg-color);
	background-color:var(--cell-bg-color);
	justify-content:center;
	align-items:center;
}
.cell-index{
	position:absolute;
	font-size:.5rem;
	opacity:90%;
	left:.1rem;
	top:.1rem;
}
.cell.active{
	background-color:var(--cell-active-bg-color);
	color:var(--cell-active-fg-color);
}

.debug-button{
	background-color:var(--button-bg-color);
	color:var(--button-fg-color);
	border-color:var(--button-border-color);
	margin:.05rem;
	border-radius:15%;
	border:2px solid;
	font-size: 1.7rem;
	cursor:pointer;
}

.debug-button:hover:not([disabled])
{
	background-color:var(--button-hover-bg-color);
	color:var(--button-hover-fg-color);
	border-color:var(--button-hover-border-color);
}

.debug-button[disabled], #tape.disabled
{
	opacity:30%;
	background-color:transparent;
	cursor:initial;
}

@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: currentColor;
  }
}

/* Mid-size */
@media(min-width:25rem){
	.multi-modal
	{
		width:85%;
		height:85%;
	}
	.modal nav a
	{
		padding-right:1rem;
		padding-left:1rem;
	}
}

/* Desktop */
@media(min-width:40rem){
	.multi-modal
	{
		width:55%;
		height:55%;
	}
}