.paragraph, .paragraph-layout, .paragraph-box, .paragraph-content, .paragraph-header{
	position: relative;
	float: left;
	width: 100%;
}
.paragraph-layout.hide{ display: none; }
.paragraph-layout.right{ float: right; }
.paragraph-layout.padding10{ padding: 10px; }
.paragraph-layout.split2{ width: calc(100% / 2); }
.paragraph-layout.split3{ width: calc(100% / 3); }
.paragraph-layout.split3-merge2{ width: calc((100% / 3) * 2); }
.paragraph-layout.split4{ width: calc(100% / 4); }
.paragraph-header > :is(h1, h2, h3, h4, h5, h6){
	font-size: 1.25em;
	line-height: 20px;
	padding: 25px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.paragraph-box{ 
	border-radius: 5px;
	background:hsla(210,15%,15%,1);
	border:1px solid hsla(0,0%,0%,0.5);
	box-shadow: 0 2px 8px -4px hsla(0,0%,0%,0.5);
}

.paragraph-content{
	font-size: 1em;
	line-height: 1.7;
	letter-spacing: 0.03em;
	padding: 20px;
}

.paragraph-content h1, .paragraph-content h2, .paragraph-content h3, .paragraph-content h4, .paragraph-content h5, .paragraph-content h6{
	line-height: normal;
	margin-bottom: 0.5em;
	color:hsla(200,100%,95%,1);
}
.paragraph-content h1 {
	position: relative;
	font-size: 2.2em;
	padding-bottom: 0.3em;
	color:hsla(200,100%,60%,1);
	border-bottom:1px solid hsla(0, 0%, 100%, 0.1);
}
.paragraph-content h1::before{
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	height: 1px;
	width: 100%;
	border-top:1px solid hsla(0,0%,0%,0.5);
}
.paragraph-content h2 {
	font-size: 1.6em;
}

.paragraph-content ol, .paragraph-content ul{
	display: block;
	width: 100%;
	padding-left: 20px;
}
.paragraph-content ol li, .paragraph-content ul li{
	padding-left: 20px;
	margin: 0.4em 0;
}

.paragraph-content dl {
	margin: 1em 0;
}
.paragraph-content dt {
	font-weight: bold;
	margin-top: 0.5em;
}
.paragraph-content dd {
	margin-left: 1.5em;
}

.paragraph-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
}
.paragraph-content th, .paragraph-content td {
	padding: 8px 12px;
	text-align: left;
	border:1px solid hsla(0,0%,0%,0.5);
}
.paragraph-content th {
	background: hsla(210,20%,20%,1);
}
.paragraph-content tr {
	background:hsla(210,15%,10%,0.5);
}
.paragraph-content tr:nth-child(even){
	background:hsla(210,15%,10%,0.3);
}

.paragraph-content b, .paragraph-content strong{
	font-weight: bold;
}
.paragraph-content i, .paragraph-content em{
	font-style: italic;
}
.paragraph-content u, .paragraph-content ins{
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.paragraph-content a{
	font-weight: 400;
	color:hsla(200,100%,60%,1);
	border-bottom: 1px dotted currentColor;
}
.paragraph-content a:hover{
	border-bottom: 1px solid currentColor;
}

.paragraph-content blockquote {
	margin: 1.5em;
	padding: 1em;
	font-style: italic;
	color:hsla(200,100%,60%,1);
	background: hsla(210,20%,20%,1);
	border-left: 4px solid hsla(200,100%,60%,1);
}

.paragraph-content code {
	font-family: "Courier New", monospace;
	padding: 2px 4px;
	color:hsla(120,80%,60%,1);
	background:hsla(210,15%,10%,1);
}
.paragraph-content pre {
	font-family: "Courier New", monospace;
	padding: 10px;
	overflow-x: auto;
	color:hsla(120,80%,60%,1);
	background:hsla(210,15%,10%,1);
}

.paragraph-content address {
	font-style: normal;
	margin-top: 1em;
}
.paragraph-content hr {
	border: none;
	margin: 2em 0;
	border-top:1px solid hsla(0,0%,0%,0.5);
	border-bottom:1px solid hsla(0, 0%, 100%, 0.1);
}

.paragraph-box img, .paragraph-content img, .paragraph-content audio, .paragraph-content video {
	display: block;
	max-width: 100%;
	object-fit: contain;
	margin-left: auto;
	margin-right: auto;
}
.paragraph-content img, .paragraph-content audio, .paragraph-content video {
	margin: 1em auto;
}

.paragraph-content form {
	margin: 1em 0;
}
.paragraph-content label {
	font-weight: bold;
}
.paragraph-content input,
.paragraph-content textarea,
.paragraph-content button {
	font-family: inherit;
	font-size: 1em;
	margin-top: 0.5em;
}
.paragraph-content input,
.paragraph-content textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
}
.paragraph-content button {
	padding: 10px 30px;
	cursor: pointer;
	color: #fff;
	background: red;
	border: 1px solid red;
}
.paragraph-content button:hover {
	color: red;
	background: rgba(255, 0, 0, 0.3);
}

@media screen and (max-width:1200px){
	.paragraph-header > :is(h1, h2, h3, h4, h5, h6){
		font-size: 1.125em;
		padding: 15px;
	}
	.paragraph-layout.padding10{
		padding: 5px;
	}
	.paragraph-content{
		padding: 10px;
	}
}