:root {
	--sans: system-ui, sans-serif;
	--mono: ui-monospace, monospace;
	--size: 1.6rem;
	--line: 1.5;
	--border: 1px solid var(--text);
}
* {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}
::selection {
	background-color: #fe9;
}
*:focus-visible {
	outline: var(--border);
	outline-offset: 2px;
}
body {
	background-color: var(--background);
	color: var(--text);
	font-size: var(--size);
	font-family: var(--sans);
	line-height: var(--line);
	max-width: 1024px;
	min-width: 375px;
	padding-inline: 2rem;
	margin: 4rem auto;
	overflow-x: hidden;
}
a {
	color: var(--text);
}
a:is(:hover, :focus-visible) {
	background-color: #fe9;
}
:is(h1, h2) {
	margin: 0;
}
h1 {
	font-size: 1.25em;
	font-style: italic;
	color: #000080;
	line-height: 1;
	margin-block: 0;
}
h2 {
	font-size: 1em;
}
hr { 
	margin-top: 0;
	color: var(--text);
	border-bottom: var(--border);
}
span {
  font-family: 'Brush Script MT', cursive;
  font-size: 2em;
  position: static;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-image: linear-gradient(gold, gold);
  background-size: 100% 10px;
  background-repeat: no-repeat;
  background-position: 100% 0%;
  transition: background-size .7s, background-position .5s ease-in-out;
}

span:hover {
  background-size: 100% 100%;
  background-position: 0% 100%;
  transition: background-position .7s, background-size .5s ease-in-out;
}
label {
	font-weight: bold;
	display: block;
	padding-block-end: 0.5rem;
}
:is(code, input, button) {
	font-size: var(--size);
}
code {
	background-color: #ccc;
	box-shadow: 0.25em 0 0 #ccc, -0.25em 0 0 #ccc;
}
input {
	background-color: inherit;
	font-family: var(--mono);
	width: 100%;
	height: 3.5rem;
	padding-inline: 1rem;
	border: var(--border);
	border-radius: 0.5rem;
}
textarea {
	background-color: transparent;
	color: var(--text);
	font-family: var(--mono);
	font-size: var(--size);
	line-height: var(--line);
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	resize: none;
}
textarea:focus-visible {
	outline: none;
}
:is(button, .button) {
	background-color: inherit;
	color: inherit;
	font-size: 0.85em;
	font-family: var(--sans);
	font-weight: bold;
	text-decoration: none;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	border: var(--border);
	border-radius: 0.5rem;
	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
}
:is(button, .button):is(:hover, :focus-visible) {
	background-color: var(--text);
	color: var(--background);
}
.row {
	display: flex;
	gap: 1.5rem;
}
header {
	color: var(--text);
	font-family: var(--sans);
	display: flex;
	gap: 2rem 4rem;
	padding-block-end: 2rem;
	border-bottom: var(--border);
}
@media (max-width: 768px) {
	header {
		flex-direction: column;
	}
}
@media (min-width: 769px) {
	header {
		justify-content: space-between;
		align-items: flex-end;
	}
}
header p {
	margin: 0;
}
header a {
	text-decoration: none;
}
.search {
	display: flex;
	flex-shrink: 0;
}
.search input {
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.search button {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.text > *:first-child {
	margin-block-start: 0;
}
.text > *:last-child {
	margin-block-end: 0;
}
.grid {
	display: grid;
	grid-gap: 2rem 3rem;
	padding-block: 2rem;
}
@media (max-width: 768px) {
	.grid {
		grid-template-rows: auto;
	}
}
@media (min-width: 769px) {
	.grid {
		grid-template-columns: 1fr 16rem;
	}
}
.post:not(:last-child) {
	border-bottom: var(--border);
}
.post-text {
	font-family: var(--mono);
}
.post-meta {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}
.permalink {
	text-decoration: none;
	align-self: start;
}
time {
	font-weight: bold;
}
.box {
	padding-block: 2rem;
}
.login div {
	margin-block-end: 2rem;
}
.panel:not(:last-child) {
	border-bottom: var(--border);
}
.panel-meta {
	justify-content: end;
}
.footer {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: 'nav acc';
	grid-column-gap: 4rem;
	padding-block-start: 2rem;
	border-top: var(--border);
}
nav {
	grid-area: nav;
}
.acc {
	grid-area: acc;
}
img {
  width: 90%;
  margin-left: auto;
  margin-right: auto
  height: auto;
}
 .myvideo {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
  border:0;
  }
  .myvideo iframe,.myvideo object,.myvideo embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
 }