@import url("https://fontsapi.zeoseven.com/117/main/result.css");
@font-face {
    font-family: 'concept_font_cn';
    src: url('/static/fonts/HanyiSentyPastel_subset_compressed.woff2') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 黑板模板：https://codepen.io/ControlledChaos/pen/OPvrye */

body {
	height: 100%;
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/50598/concrete-wall-background.jpg)
		center center fixed;
	background-size: cover;
}

.blackboard {
	position: relative;
    width: 90%;
    height: 400px;
	margin: 7% auto;
	border: tan solid 12px;
	border-top: #bda27e solid 12px;
	border-left: #b19876 solid 12px;
	border-bottom: #c9ad86 solid 12px;
	box-shadow: 0px 0px 6px 5px rgba(58, 18, 13, 0), 0px 0px 0px 2px #c2a782,
		0px 0px 0px 4px #a58e6f, 3px 4px 8px 5px rgba(0, 0, 0, 0.5);
	background-image: radial-gradient(
			circle at left 30%,
			rgba(34, 34, 34, 0.3),
			rgba(34, 34, 34, 0.3) 80px,
			rgba(34, 34, 34, 0.5) 100px,
			rgba(51, 51, 51, 0.5) 160px,
			rgba(51, 51, 51, 0.5)
		),
		linear-gradient(
			215deg,
			transparent,
			transparent 100px,
			#222 260px,
			#222 320px,
			transparent
		),
		radial-gradient(circle at right, #111, rgba(51, 51, 51, 1));
	background-color: #333;
}

.blackboard:before {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
    padding-top: 10px;
	background-image: linear-gradient(
			175deg,
			transparent,
			transparent 40px,
			rgba(120, 120, 120, 0.1) 100px,
			rgba(120, 120, 120, 0.1) 110px,
			transparent 220px,
			transparent
		),
		linear-gradient(200deg, transparent 80%, rgba(50, 50, 50, 0.3)),
		radial-gradient(
			ellipse at right bottom,
			transparent,
			transparent 200px,
			rgba(80, 80, 80, 0.1) 260px,
			rgba(80, 80, 80, 0.1) 320px,
			transparent 400px,
			transparent
		);
	border: #2c2c2c solid 2px;
	content: var(--bb-content, "概念小黑板");
	font-family: var(--bb-font-family, "concept_font_cn");
	font-size: 2.2em;
	color: rgb(255, 255, 255);
	text-align: center;
}

#concept_cloud {
    height: 90%;
    width: 100%;
    margin-top: 50px;
}

.form {
	padding: 70px 20px 20px;
}

::-moz-selection {
	background: rgba(238, 238, 238, 0.2);
	color: rgba(238, 238, 238, 0.2);
	text-shadow: none;
}

::selection {
	background: rgba(238, 238, 238, 0.4);
	color: rgba(238, 238, 238, 0.3);
	text-shadow: none;
}

/* #region便利贴start */
/* 便利贴样式 */
.stickynote {
    position: absolute;
    width: 120px;
    height: 120px;
    box-sizing: border-box;
    padding: 10px;
    transform: rotateX(5deg);
    box-shadow: -1px 10px 5px -4px rgba(0, 0, 0, 0.02), 
                inset 0 24px 30px -12px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* 便利贴文本框 */
.stickynote-text {
    font-size: 10px;
}

.stickynote-link {
    font-size: 10px;
}

/* 橡皮擦 */
#eraser {
    position: absolute;
    width: 65px;
    height: 49px;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
}
#eraser:hover {
    opacity: 1;
}