html {
    height: 100%;
    overflow: auto;
  }

	body {
    height: 100%;
		background: #eee;
		font-family: arial;
		font-size: 22px;
		padding-bottom: 10em;
	}

	@media (max-width: 1000px) {
		body {
			max-width: 25em;
			margin: auto;

		}

		#box-list {
			width: 100%;
		}

	}
	.content {
		width: calc(100% - 17em);
		display: block;
		position: relative;
	}
	a {
		text-decoration: none;
		cursor: pointer;
	}
	.boxlink.long {
		text-decoration: underline;
	}
	a.url {
		text-decoration: underline;
	}
	a.exists {
		color: green;
		text-decoration: underline;
	}
	a:hover {
		color: blue;
	}
	a:visited {
		color: #333;
	}
	.box {
		background: #ddd;
		padding: 0.5em 1em;
		margin: 1em auto;
 		width: 25em;
 		max-width: calc(100% - 2em);

	}

	h2	{
		margin: 1em 0;
		font-size: 1.5em;
	}
	input {
		font-family: arial;
		font-size: 1.5em;
		background: transparent;
		font-weight: bold;
		border: none;
		padding: 0;
		margin-top: 1em;
		max-width: 100%;


		background: #d4d4d4;
	}
	textarea {
	  width: 100%;
	  margin: 1.5em 0 1em;
	  background: transparent;
		font-family: arial;
		font-size: 22px;
		border: none;
		padding: 0;

		background: #d4d4d4;
		color: rgba(0,0,0,0.2);
		caret-color: black;
	}
	textarea:focus-visible {
  	outline: none;
	}

	#sidebar {
	  float: right;
		background-color: #ddd;
		margin-top: 3.7em;
		position: fixed;
		right: 2em;
		z-index: 9999;
		width: 15em;
	}

	#sidebar .inner {
		clear: both;
	}


	@media (max-width: 1000px) {
		#sidebar {
			right: 0;
			top: 0;
			margin-top: 0;
			border: solid 5px black;
		}
		.toggle {
			width: 1em;
			height: 1em;
			float: right;
			margin-right: 1em;
			margin-top: 0.5em;
		}
		#sidebar .toggle + .inner {
 			display: none;
		}
		#sidebar .toggle:checked + .inner {
 			display: block;
		}
	}

	#sidebar ul {
	  padding: 1em;
	  list-style: none;
	  margin-top: 0;
	  
	  max-height: 60vh;
		overflow-y: auto;
		margin-bottom: 0;
	}

	button {
		font-size: 22px;
	}

	.save-button {
		color: black;
		display: none;
	}
	.save-button.changed {
		color: red !important;
	}
	.delete-button {
		float: right;
	}

	.are-you-sure {
		color: red;
		font-weight: bold;
	}





	.resizeable-box {
		position: relative;
	}
	/* for the automatic textarea */
	.txta {
	  width: 100%;
	  max-width: 500px;
	  min-height: 100px;
	  font-family: Arial, sans-serif;
	  font-size: 22px;
	  overflow: hidden;
	}

	.hiddendiv {
	  /*display: none;*/
	  white-space: pre-wrap;
	  word-wrap: break-word;

	  visibility: visible;
		/*background-color: rgba(0, 0, 200, 0.1);*/
		position: absolute;
		top: 0px;
		margin: 1.5em 0px 1em;
		pointer-events: none;
		color: black;
	}

	.hiddendiv .boxlink {
		pointer-events: all;
	}