:root {
  --black: black;
	--lightgrey: #eaeaea;
}
@media only screen and (max-width: 600px) {
  html, body {
  		height: 100vh;
  		max-height: 100%;
  		overflow: hidden;
		position: fixed
  	}
  	#leftColumn, #rightColumn {
  		display: block;
      margin: 0;
  	}
    #leftColumn { margin-left: -16px !important; }
  	#leftColumn > div {
  		width: 100vw;
  	}
  	#rightColumn {
  		/* vh - (menu header + token canvas + color picker + artist credit + bottom) */
  		/*
  		max-height: calc(100vh - (50px + 200px + 165px + 65px));
  		min-height: calc(100vh - (50px + 200px + 165px + 65px));
  		*/
      max-width: none;
  		position: absolute;
  			top: calc(50px + 200px + 135px + 15px); /* menu header + token canvas + color picker + padding */
  			bottom: 0; /* artist credit */
  			left: 0;
  			right: 0;
  		overflow-y: scroll;
  		overflow-x: hidden;
  		margin: 0;
  		padding: 0 16px 35px 16px; /* extra bottom padding for artist's credit bar */
  	}
    #menuHeader {
		border-radius: 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	.menu {
		position: fixed;
		top: 250px;
		bottom: 35px;
		height: auto;
		border: 1px solid #EAEAEA;
		border-width: 2px 0 0 0;
		box-shadow: none;
	}
	.menu .row {
		padding-left: 31px;
		padding-right: 31px;
	}
	.menu .row.header {
		border: 0;
	}
	#canvasContainer {
		min-height: 200px;
		min-width: 0px;
		width: calc(100% + 15px);
		margin: 34px 0 0 0;
		border-radius: 0;
	}
	#tokenCanvas {
		min-height: 180px;
		min-width: 180px;
	}
	#colorPickerContainer {
		margin: 0;
		background-color: #EAEAEA;
		border-radius: 0;
	}
	#artistCredit {
		/* margin: 0 -16px -16px -16px; */
		position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
		padding: 0 16px 0 45px;
		border-radius: 0;
		background-color: var(--lightgrey);
		color: var(--black);
		line-height: 35px;
    min-height: 35px;
	}
	#artistCredit .close, #artistCredit .tip {
		position: absolute;
      top: 0;
      bottom: 0;
    min-height: 35px;
	}
    #artistCredit.hidden {
      display: none;
    }
  #artistCredit .close {
    left: 0;
    top: -2px;
  }

}
@media only screen and (max-width: 600px) {
	#rightColumn {
		top: calc(50px + 120px + 135px + 15px); /* menu header + token canvas + color picker + padding */
	}
	#canvasContainer {
		min-height: 120px;
	}
	#tokenCanvas {
    min-height: unset !important;
		max-height: 100% !important;
		min-width: unset !important;
	}
	.menu {
		top: 170px;
	}
}