$ArticleMaxWidth: 800px;


@keyframes UnwrapHeader {
	from {
		margin-left: 50%;
		margin-right: 50%;
	}
	to {
		margin-left: 40px;
		margin-right: 40px;
	}
}



#section-main{
	position: absolute;
	left: 20px;
	right: 0px;
	@include transition-property(left);
	@include transition-duration(0.2s);
	@include transition-delay(0.1s);


	header{
		margin: 30px 30px 60px 30px;

		color: $ClrWhite;

		font-family: $FontText;
		font-style: italic;
		font-size: 1.3em;
		text-align: center;
		text-shadow: 0 0 10px $ClrTrueBlack;

		border-style: solid;
		border-width: 0 5px 0 5px;
		border-color: $ClrWhite;
		border-radius: 20px;

		overflow: hidden;
		animation: UnwrapHeader 1s;
		white-space: nowrap;
	}

	article{
		margin-left: auto;
		margin-right: auto;
		padding: 20px;
		padding-top: 0;
		margin-bottom: 10vh;

		color: $ClrBlack;

		box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		border-style: solid;
		border-width: 3px;
		border-color: #FFFFFF;
		border-radius: 20px;
		background-color: $ClrWhite;

		max-width: $ArticleMaxWidth;

		font-size: 0.6em;
		line-height: 1.3em;

		@include transition-property(border-radius);
		@include transition-duration(0.5s);



		h1:first-child{
			margin: 0;
			margin-left: -23px;
			width: 100%;
			padding: 20px 23px;

			margin-top: -23px;
			border-radius: 18px 18px 0 0;


			background-color: #215D9C;
			background-image: url("../img/ui/stripes.png");


			color: $ClrWhite;
			font-family: $FontTitle;
			font-weight: bold;
			font-style: italic;
			font-size: 1.7em;
			text-align: left;
			// text-shadow: 0 0 5px $ClrBlack;

			letter-spacing: -0.03em;


			@include transition-property(border-radius);
			@include transition-duration(0.5s);


			img{
				border: none;
				float: right;
				display: inline;
				margin: auto;
				height: 1em;
			}
		}

		h2{
			margin: 0 -23px;
			padding: 10px 23px;
			border-top: 1px solid #d5d5d5;
			border-bottom: 1px solid #d5d5d5;

			background-image: url("../img/ui/stripes.png");

			color: $ClrText;
			font-family: $FontTitle;
			// padding-left: 10px;
			font-size: x-large;

			a, a:visited{
				color: $ClrText;
			}
		}


		h3
		{
			color: $ClrText;
			font-family: $FontTitle;
			padding-left: 10px;
			font-size: large;
		}

		hr
		{
			margin-left: -23px;
			width: calc(100% + 40px + 6px);

			border-style: solid;
			border-width: 5px;
			border-color: rgba(0,0,0,0.1);
			border-radius: 1px;
		}

		blockquote{
			position:relative;

			padding: 1px 20px;
			margin: 10px;

			background-color: #eee;
			border-radius: 0.2em;
			font-style: italic;
		}
		blockquote:after {
			display:block;
			position:absolute;

			content:"";

			width: 0;
			top: 20px;
			left: -20px;

			border-style: solid;
			border-width: 15px 20px 15px 0;
			border-color: transparent #eee;
		}

		img, video, iframe{
			&:not(.raw){
				max-height: 150px;
				width: auto;
				vertical-align: middle;

				margin: 5px;

				border: 3px solid black;
				border-radius: 2px;
				transition-property: border-color;
				transition-duration: 0.3s;
			}
		}
		video{
			width: 80%;
			height: auto;
		}

		a{
			color: #215D9C;
			img:hover, video:hover, iframe:hover{
				border-color: #808080;
			}
		}
		a:hover{
			color: #2B7ACC;
		}

		strong{
			color: #2F3A45;
		}

		img.nostyle{
			height: auto;
			border: 0;
			border-radius: 0;
		}

		img.fill{
			width: 100%;
			height: auto;
		}

		.cinema{
			margin: 0;
			margin-left: -23px;
			width: 100%;
			padding: 10px 23px;

			border-top: 1px solid #000;
			border-bottom: 1px solid #000;

			color: $ClrWhite;

			background-image: url("../img/ui/bgdark.png");
			@include box-shadow(0px 0px 10px #000 inset);


			img, video, iframe{
				border-width: 1px;
				border-radius: 0;

				margin: -1px 4px 0px -5px;
				border-left: 5px solid #000;
				border-right: 5px solid #000;
			}
			a{
				img:hover, video:hover, iframe:hover{
					border-color: #333;
				}
			}

		}
		.cinema:first-child{
			margin-top: -23px;
			padding-top: 20px;
			border-radius: 20px 20px 0 0;
		}
		.cinema:last-child{
			margin-bottom: -23px;
			padding-bottom: 20px;
			border-radius: 0 0 20px 20px;
		}

		.markdown>div.content{
			>pre{
				margin: 0;
				margin-left: -23px;
				width: 100%;
				padding: 10px 23px;

				border-top: 1px solid #000;
				border-bottom: 1px solid #000;

				color: $ClrWhite;

				background-image: url("../img/ui/bggray.png");
				@include box-shadow(0px 0px 10px #000 inset);

				code, pre{
					margin-bottom: 0px;
				}
			}
		}

		figure{
			margin-bottom: 15px;

			figcaption{
				font-size: small;
				font-style: italic;
				text-decoration: none;
			}
		}
		ul{
			margin-top: 5px
		}
		li{
			margin-bottom: 5px;
		}
		a.gototop{
			display: block;
			width: 100%;
			height: 28px;
			background-image: url(../img/ui/gototop.svg);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
		}

		.center{
			text-align: center;
		}


		.canvas-container {
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			justify-content: space-around;

			> * {
				align-self: center;
			}
		}

		img.avatar {
			border: none;
			border-radius: 100%;
			max-height: 200px;
		}
	}





}

body[data-width="small"]{
	#section-main{
		article{
			max-width: 100%;
			border-radius: 0;
			h1{
				border-radius: 0;
			}
		}
	}
}

.spacer
{
	height: 60vh;
}