body {
  background: #eef4ff;
  color: #1a1a1a;
  font-family: "DotGothic16", monospace;
  margin: auto;
  max-width: 800px;
  padding: 20px;
}

h1 {
  margin: 0 0 20px;
  padding-bottom: 8px;
  color: #004ea8;
  text-align: center;
  border-bottom: 2px solid #004ea8;
}

p {
  line-height: 1.5;
}

a {
  color: #008000;
  text-decoration: none;
}

input[type="text"],
#textOutput,
#ascii {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  font: inherit;
  font-size: 1rem;
  color: #1a1a1a;
  background: #fff;
  border: 2px solid #004ea8;
  border-radius: 0;
  box-shadow: 2px 2px 0 #89aee9;
}

#ascii {
  font-family:monospace;
  white-space: pre;
  overflow: auto;
  line-height: 1;
}

#textOutput {
  resize: vertical;
}

.footer {
  text-align: center;
}

input[type="text"]:focus {
  border-color: #1a6fff;
  outline: none;
}

#result {
  margin-top: 10px;
  padding: 6px 10px;
  background: #dfeaff;
  border-left: 4px solid #004ea8;
}

#result::before {
  content: "Waiting for input...";
}

#result.false {
  background: #ffd3d3;
  border-left-color: #ff4343;
}

#result.false::before {
  content: "✘ Invalid URL!";
}

#result.true {
  background: #e5ffdf;
  border-left-color: #61fe3d;
}

#result.true::before {
  content: "✔ Valid YouTube URL!";
}

.thumbnails-gallery {
  display: none;
  gap: 20px;
  margin-top: 20px;
}

.thumbnails-gallery div {
  padding: 10px;
  background: #fff;
  border: 2px solid #6fa8ff;
  box-shadow: 2px 2px 0 #bcd4ff;
}

.thumbnails-gallery p {
  margin: 0 0 6px;
  color: #004ea8;
  font-weight: bold;
}

.thumbnails-gallery img {
  width: 100%;
  border: 2px solid #004ea8;
}

details {
  margin: 8px 0 4px;
  padding: 4px;
  font: 16px "DotGothic16", monospace;
  border: 1px solid #000;
  cursor: pointer;
}

details > summary {
  list-style: none;
}

details > summary::before {
  content: url("/images/faq-icon-q16.png");
  padding-right: 4px;
}

details > p::before {
  content: url("/images/faq-icon-a16.png");
  padding-right: 4px;
  padding-left: 16px;
}

details:hover {
  background: #dfeaff;
  border-color: #004ea8;
}

button {
  padding: 4px 8px;
  font: 16px "DotGothic16", monospace;
  color: #fff;
  background: #004ea8;
  border: 2px solid #003b80;
  box-shadow: 2px 2px 0 #89aee9;
  cursor: pointer;
}

button:hover {
  background: #1a6fff;
}

button:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

button:focus {
  outline: none;
  border-color: #89aee9;
}

#theme-toggle {
  padding: 4px;
  font-size: 20px;
  color: #1a1a1a;
  background: #82c8e5;
  border: 1px solid #000;
  border-radius: 8px;
}

#theme-toggle::before {
  content: url("img/sun2.gif");
}

.history {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.history img {
  width: 100%;
  object-fit: cover;
}

.history a:hover > img {
  outline: 1px solid #008000;
}

.header-row,
.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-row {
  border-bottom: 1px solid #000;
}

.header-row h2 {
  margin: 0;
}

fieldset {
  margin: 0 0 16px;
  padding: 12px 16px;
  color: #1a1a1a;
  background: #fff;
  border: 2px solid #004ea8;
  border-radius: 0;
  box-shadow: 2px 2px 0 #89aee9;
}

fieldset legend {
  padding: 0 8px;
  color: #004ea8;
  font-weight: bold;
}

fieldset div {
  margin: 4px 0;
}

fieldset label {
  cursor: pointer;
}

body.dark {
  background: #0f1117;
  color: #e4e4e4;
}

body.dark h1 {
  color: #82b6ff;
  border-bottom-color: #82b6ff;
}

body.dark a {
  color: #7cff7c;
}

body.dark input[type="text"],
body.dark #textOutput {
  color: #e4e4e4;
  background: #1a1f2b;
  border-color: #508aff;
  box-shadow: 2px 2px 0 #080a0f;
}

body.dark input[type="text"]:focus {
  border-color: #79a8ff;
}

body.dark #result {
  color: #e4e4e4;
  background: #1d2333;
  border-left-color: #82b6ff;
}

body.dark #result.false {
  color: #ffdada;
  background: #401c1c;
  border-left-color: #ff6b6b;
}

body.dark #result.true {
  color: #d8ffd8;
  background: #1e4022;
  border-left-color: #61fe3d;
}

body.dark .thumbnails-gallery div {
  background: #1a1f2b;
  border-color: #508aff;
  box-shadow: 2px 2px 0 #080a0f;
}

body.dark .thumbnails-gallery p {
  color: #82b6ff;
}

body.dark .thumbnails-gallery img {
  border-color: #508aff;
}

body.dark details {
  color: #e4e4e4;
  background: #151922;
  border-color: #e4e4e4;
}

body.dark details:hover {
  background: #090b0f;
  border-color: #7cff7c;
}

body.dark button {
  background: #315fa8;
  border-color: #508aff;
  box-shadow: 2px 2px 0 #080a0f;
}

body.dark button:hover {
  background: #4077d1;
}

body.dark button:focus {
  border-color: #89b5ff;
}

body.dark #theme-toggle {
  color: #fff;
  background: #090b0f;
  border-color: #e4e4e4;
}

body.dark #theme-toggle::before {
  content: url("img/moon4.gif");
}

body.dark .history a:hover > img {
  outline-color: #7cff7c;
}

body.dark .header-row {
  border-bottom-color: #e4e4e4;
}

body.dark fieldset {
  color: #e4e4e4;
  background: #1a1f2b;
  border-color: #508aff;
  box-shadow: 2px 2px 0 #080a0f;
}

body.dark fieldset legend {
  color: #82b6ff;
}