html {
    display: grid;
    height: 100%;
    grid-template-rows: 100%;
}
body {
	display: inherit;
	grid-template-rows: 0px 100% auto;
}
body>header, body>main {
	padding: 0;
}
body header {
	text-align: center;
	padding-inline: 80px 350px;
	z-index: 1;
}
body header > * {
	margin: 5px 0;
}
main {
	display: grid;
	grid-template-columns: minmax(0,1fr) 350px;
}
main > section {
	margin-bottom: 0;
	z-index: 2;
}
main > section:first-child {
    margin: 100px 3rem 0 calc(80px + 3rem);
}
main > section:first-child p {
    text-wrap: balance;
    text-align: center;
}
main section:last-child {
    display: grid;
    grid-auto-rows: auto minmax(0,1fr);
    height: 0;
    min-height: 100%;
}
main section:last-child button {
	margin: 0;
	font-size: 1em;
    padding: 10px;
    width: 100%;
}
main section:last-child a {
	text-align: center;
    display: block;
    font-size: 15px;
    padding: 0.5em 0;
}
small {
	display: inline-block;
}
#demo {
  height: 40vh;
  min-height: 250px;
  background: linear-gradient(45deg in hsl, #25a8d5, #6ef1f7);
  clip-path: shape(from 0 0,vline to 100%,curve to 4.17% calc(100% - 15.5px) with 2.78% calc(100% - 15px),curve to 6.94% calc(100% - 9px) with 5.56% calc(100% - 16px),curve to 9.72% calc(100% - 20px) with 8.33% calc(100% - 2px),curve to 12.5% calc(100% - 44px) with 11.11% calc(100% - 38px),curve to 15.28% calc(100% - 27.5px) with 13.89% calc(100% - 50px),curve to 18.06% calc(100% - 20.5px) with 16.67% calc(100% - 5px),curve to 20.83% calc(100% - 23.5px) with 19.44% calc(100% - 36px),curve to 23.61% calc(100% - 10.5px) with 22.22% calc(100% - 11px),curve to 26.39% calc(100% - 5.5px) with 25% calc(100% - 10px),curve to 29.17% calc(100% - 9.5px) with 27.78% calc(100% - 1px),curve to 31.94% calc(100% - 11.5px) with 30.56% calc(100% - 18px),curve to 34.72% calc(100% - 20px) with 33.33% calc(100% - 5px),curve to 37.5% calc(100% - 23px) with 36.11% calc(100% - 35px),curve to 40.28% calc(100% - 28px) with 38.89% calc(100% - 11px),curve to 43.06% calc(100% - 24.5px) with 41.67% calc(100% - 45px),curve to 45.83% calc(100% - 25.5px) with 44.44% calc(100% - 4px),curve to 48.61% calc(100% - 44.5px) with 47.22% calc(100% - 47px),curve to 51.39% calc(100% - 31px) with 50% calc(100% - 42px),curve to 54.17% calc(100% - 26.5px) with 52.78% calc(100% - 20px),curve to 56.94% calc(100% - 23.5px) with 55.56% calc(100% - 33px),curve to 59.72% calc(100% - 13.5px) with 58.33% calc(100% - 14px),curve to 62.5% calc(100% - 26.5px) with 61.11% calc(100% - 13px),curve to 65.28% calc(100% - 41px) with 63.89% calc(100% - 40px),curve to 68.06% calc(100% - 28.5px) with 66.67% calc(100% - 42px),curve to 70.83% calc(100% - 7.5px) with 69.44% calc(100% - 15px),curve to 73.61% calc(100% - 12.5px) with 72.22% calc(100% - 0px),curve to 76.39% calc(100% - 27.5px) with 75% calc(100% - 25px),curve to 79.17% calc(100% - 28px) with 77.78% calc(100% - 30px),curve to 81.94% calc(100% - 27px) with 80.56% calc(100% - 26px),curve to 84.72% calc(100% - 34px) with 83.33% calc(100% - 28px),curve to 87.5% calc(100% - 28px) with 86.11% calc(100% - 40px),curve to 90.28% calc(100% - 31px) with 88.89% calc(100% - 16px),curve to 93.06% calc(100% - 37px) with 91.67% calc(100% - 46px),curve to 95.83% calc(100% - 23.5px) with 94.44% calc(100% - 28px),curve to 100% 100% with 97.22% calc(100% - 19px),vline to 0, hline to 0);;
}
main article {
	margin: 0;
    padding-block: 10px;
    text-align: center;
    border-radius: 0;
}
main article form {
	text-align: left;
	margin-bottom: 0;
}
fieldset:last-child {
	margin-bottom: 0;
}
form legend {
	text-decoration: underline;
	font-size: 1.2em;
}
form label {
	cursor: pointer;
}
form legend span {
	display: inline-block;
	margin-left: 10px;
}
form fieldset {
	margin:  0;
}
main .code {
	overflow: auto;
	padding-bottom: 80px;
}
main .code code {
	font-size: 0.75em;
	cursor: text;
	color: var(--color);
}
pre[class*=language-] {
	margin: 0;
}
.code-e {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.grid > *{
  margin: 0!important;
}
@media (max-width: 900px) {
	html {
		height: auto;
		min-height: 100%;
	}
	body {
		grid-template-rows: auto auto 1fr;
	}
	body header {
		padding: 0;
		order: -2;
	}
	main {
		grid-template-columns: 1fr;
	}
	main .code {
		padding-bottom: 15px;
	}
	.grid {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
	main > section:first-child {
		resize: none;
	    border: none;
	    padding: 25px;
	    margin: 0;
	}
	main section:last-child {
		height: auto;
	}
	main > section:first-child:before,
	main > section:first-child:after {
		content: none;
	}
}
@supports not (clip-path: shape(from 0 0,curve to 0 0 with 0 0)) {
	body::before {
		content:"⚠️ Sorry but there is no waves for you using this browser ⚠️";
		position: fixed;
		inset: 0;
		display: grid;
		place-content: center;
		text-align: center;
		background:#fffc;
	    z-index: 999;
   		color: #000;
    	font-size: 30px;
    	font-weight: bold;
	}
}