:root {
	--color-background: #fff3f0;
	--color-font: #102030;
	--color-font-accent: #ff8c00;
	--color-border: #344363;
	--color-shadow: #50709f;

	--color-white: white;
	--color-red: hsl(0, 100%, 75%);
	--color-blue: hsl(200, 100%, 75%);
	--color-green: hsl(100, 100%, 75%);
	--color-orange: hsl(30, 100%, 75%);
}

.round {
	border-radius: 50%;
	padding: 3em !important;
}
.round .turn {
	top: 3em !important;
}
.round .turn-left {
	left: 3em !important;
}
.round .turn-right {
	right: 3em !important;
}
.round .close {
	left: 3em;
	bottom: 3em;
}
.round .format {
	left: 7em;
	bottom: 3em;
}

.color-white {
	background-color: var(--color-white) !important;
}
.color-red {
	background-color: var(--color-red) !important;
}
.color-blue {
	background-color: var(--color-blue) !important;
}
.color-green {
	background-color: var(--color-green) !important;
}
.color-orange {
	background-color: var(--color-orange) !important;
}

body, .wrapper {
	margin: 0;
	padding: 0;
}
body * {
	font-family: var(--font-neo-grotesque);
	color: var(--color-font);
}
body {
	background-color: var(--color-background);
}
body, div, textarea {
	box-sizing: border-box;
}

.addnew {
	position: fixed;
	top: 0.2em;
	left: 0.2em;
	width: 4rem;
	height: 4rem;
	background: white;
	border: solid 3px darkslategray;
	border-radius: 50%;
	font-size: xxx-large;
	text-align: center;
	cursor: pointer;
	opacity: 0.2;
	transition: opacity 0.3s;
}
.addnew:hover {
	opacity: 1;
}

form, input, textarea {
	width: 100%;
	border: none;
	color: var(--color-font);
	background-color: transparent;
}

.draggable {
	position: absolute;
	border: solid 1px gray;
	background-color: var(--color-white);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	box-shadow: 1px 1px 2vw gray;
	padding: 1em;
	word-wrap: anywhere;
	min-width: max(12vw, 10em);
	width: min(25vw, 30em);
	max-width: min(50vw, 40em);
	cursor: grab;
	transform-origin: center top;
}

.turn {
	position: absolute;
	display: none;
	top: 0.05em;
	width: 1.2em;
	height: 1.2em;
	text-align: center;
	cursor: pointer;
	background-color: rgb(64, 256, 64);
	border-radius: 50%;
	font-weight: bold;
	padding-top: 0.2em;
}
.draggable:hover .turn {
	display: block;
}
.turn-left {
	left: 0.05em;
}
.turn-right {
	right: 0.05em;
}

.close {
	position: absolute;
	display: none;
	left: 0;
	bottom: 0;
	width: 3em;
	height: 1.2em;
	text-align: center;
	cursor: pointer;
	background-color: red;
	color: white;
	font-weight: bold;
	border: outset 2px lightgray;
}
.draggable:hover .close {
	display: block;
}

.format {
	position: absolute;
	display: none;
	left: 4em;
	bottom: 0;
	width: 9.8em;
	height: 1.2em;
	cursor: pointer;
	border: inset 2px gray;
}
.draggable:hover .format {
	display: block;
}
.format div {
	width: 1.2em;
	min-height: 1.2em;
	float: left;
}
.format div.round {
	margin: 0.15em;
	width: 0.8em;
	min-height: 0.8em;
	padding: 0 !important;
	border: solid 2px black;
}
.format div.square {
	margin: 0.15em;
	width: 0.8em;
	min-height: 0.8em;
	padding: 0 !important;
	border: solid 2px black;
}

.h2 {
	word-wrap: anywhere;
	margin: 0.5rem auto 0.5em;
	font-weight: bold;
	font-size: 123%;
	font-size: calc(100% + 0.4vw);
}
.h3 {
	font-size: 100%;
	font-size: calc(70% + 0.3vw);
	font-weight: bold;
	margin: 0;
	height: 1px;
}