#titlePanel {
	display: none;
}

@media (max-device-aspect-ratio: 1/1), (orientation: portrait) {
	#editorContent {
		white-space: normal;
		padding: 0px;
		width: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.panel {
		display: block;
		width: 92vw;
		max-width: 92vw;
		margin: 2vw;
		border-radius: 2vw;
		padding: 2vw;
	}

	.panel .bar {
		padding: 1vw;
		padding-left: 2vw;
		padding-right: 2vw;
		padding-bottom: 2px;
		margin: -2vw;
		margin-bottom: 2vw;
		border-radius: 2vw 2vw 0px 0px;
	}

	.panelShadow {
		border-radius: 2vw;
	}

	.controlBox {
		border-radius: 1vw;
	}

	.controlSpan {
		border-radius: 1vw;
	}

	#paintExplorerViewport {
		border-radius: 1vw;
	}

	.left {
		border-radius: 1vw 0px 0px 1vw;
	}

	.right {
		border-radius: 0px 1vw 1vw 0px;
	}

	.inventoryViewport {
		border-radius: 1vw;
	}

	#bylineFlexItem {
		display: none;
	}

	#topbarSpaceFlexItem {
		display: none;
	}

	#titleFlexItem {
		display: none;
	}

	#toolsCheckLabel {
		float: right;
		margin-top: 2vw; /* hacky */
	}

	#titlePanel {
		display: block;
	}

	#game {
		width: 100%;
	}

	#paint {
		width: 100%;
	}

	#colorPickerWheel, #colorPickerSelect {
		width: 70%;
		margin-left: 15%;
	}

	#colorPickerSelect {
		margin-top: -70%;
	}

	#colorPickerSliderBg {
		width: 80%;
		margin-left: 10%;
	}

	#colorPickerHexText {
		width: 80%;
		margin-left: 10%;
	}

	#aboutPanel {
		width: 100%;
	}

	#titleTextPanel {
		width: calc(100% - 8vw);
	}

	input[type=text] {
		font-size: 80%;
		line-height: 100%;
	}

	input[type=text].nameTextbox {
		font-size: 50%;
	}

	#game_data {
		width: 100%;
		height: 50vh;
	}

	#animation img {
		width: 20vw;
		height: 20vw;
	}
	
	.panelBarClose {
		line-height: 200%; /*hacky*/
	}

	#colorPickerSliderThumb {
		height: 4.5vh;
		width: 1.5vh;
	}

	#noMarkerMessage {
		width: 96%;
	}

	#markerCanvas1 {
		width: 30vw;
		height: 30vw;
	}

	#markerCanvas2 {
		width: 30vw;
		height: 30vw;
	}

	#markerName1 {
		line-height: 90%;
	}

	#markerName2 {
		line-height: 90%;
	}

	#markerLinkControl button {
		margin-top: 15vw;
	}

	#gifPreview {
		width: 80vw;
		max-width: 100%;
	}

	#gifPlaceholder {
		width: 80vw;
		max-width: 100%;
		height: 80vw;
		max-height: 100%;
	}

	#paintExplorerViewport {
		width: 92%;
		height: 60vw;
		margin-left: 0%;
	}

	#paintExplorerContent img {
		width: 20vw;
		height: 20vw;
	}

	#paintExplorerContent figcaption {
		max-width: 20vw;
	}

	#paintExplorerAdd {
		width: 20vw;
		height: 20vw;
		margin: 0px;
	}

	#paintExplorerAdd button {
		width: 90%;
		height: 90%;
		margin: 5%;
	}

	#settingsInner {
		max-width: 100%;
	}

	#dialogEditorNoContent {
		width: 95%;
		height: 60vh;
	}

	.inventoryViewport {
		width: 90%;
	}

	#dialogTop {
		height: 10vw;
	}

	#dialogCodeText {
		width: 90%;
		height: 60vh;
	}

	.advDialogOptionDiv {
		border-radius: 1vw;
	}

	.advDialogConditionDiv {
		border-radius: 1vw;
	}

	#advDialogViewport {
		border-radius: 1vw;
	}

	#advDialogViewport {
		width: 95%;
		min-width: 95%;
		height: 60vh;
	}

	.advDialogTextBlock {
		width: 100%;
		height: 15vw;
	}

	.advDialogOptionDiv {
		width: 100%;
	}

	.advDialogTextOption {
		width: 90%;
		height: 15vw;
	}

	.advDialogOptionDiv button {
		height: 100%;
		float: right;
	}

	.advDialogConditionDiv {
		width: 100%;
	}

	.advDialogConditionDiv button {
		height: 100%;
		float: right;
	}
}

/* high dpi */
@media 
(max-device-aspect-ratio: 1/1) and (-webkit-device-pixel-ratio: 3), (orientation: portrait) and (-webkit-device-pixel-ratio: 3),
(max-device-aspect-ratio: 1/1) and (min-resolution: 288dpi), (orientation: portrait) and (min-resolution: 288dpi) {
	body {
		font-size: 96px;
	}

	#bitsyLogo {
		width: 148px;
		height: 148px;
	}
}

@media 
(max-device-aspect-ratio: 1/1) and (-webkit-device-pixel-ratio: 2), (orientation: portrait) and (-webkit-device-pixel-ratio: 2),
(max-device-aspect-ratio: 1/1) and (min-resolution: 192dpi) and (max-resolution: 287dpi), (orientation: portrait) and (min-resolution: 192dpi) and (max-resolution: 287dpi) {
	body {
		font-size: 48px;
	}

	#bitsyLogo {
		width: 72px;
		height: 72px;
	}
}

@media 
(max-device-aspect-ratio: 1/1) and (-webkit-device-pixel-ratio: 1), (orientation: portrait) and (-webkit-device-pixel-ratio: 1),
(max-device-aspect-ratio: 1/1) and (min-resolution: 96dpi) and (max-resolution: 191dpi), (orientation: portrait) and (min-resolution: 96dpi) and (max-resolution: 191dpi) {
	body {
		font-size: 24px;
	}

	#bitsyLogo {
		width: 36px;
		height: 36px;
	}
}