/*
Theme Name: 100 Bytes
Theme URI: https://github.com/MarcArmengou/100-bytes
Author: Marc Armengou
Author URI: https://www.marcarmengou.com/
Description: 100 Bytes is a theme that aims to look as optimal as possible to deliver your message to your audience using WordPress as a content manager. The idea is simple, make a theme that looks good everywhere, with as little CSS code as possible. In this case the limit is 100 Bytes of CSS information. Actually the compressed CSS code contains 82 bytes of information, but 100 bytes sounds better.
Idea: One day this tweet appeared on my Twitter timeline (https://twitter.com/swyx/status/1449472712720601088) and I thought it was interesting to combine it with WordPress.
Tags: blog, one-column, full-width-template
Version: 1.1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 100-bytes
Copyright: 2024 Marc Armengou
Tested up to: 6.8
Requires PHP: 5.6
*/

/*@import url("https://unpkg.com/mvp.css");*/

/* MVP.css v1.17.2 - https://github.com/andybrewer/mvp */

:root {
  --active-brightness: 0.85;
  --border-radius: 5px;
  --box-shadow: 2px 2px 10px;
  --color-accent: #118bee15;
  --color-bg: #fff;
  --color-bg-secondary: #e9e9e9;
  --color-link: #118bee;
  --color-secondary: #920de9;
  --color-secondary-accent: #920de90b;
  --color-shadow: #f4f4f4;
  --color-table: #118bee;
  --color-text: #000;
  --color-text-secondary: #999;
  --color-scrollbar: #cacae8;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --hover-brightness: 1.2;
  --justify-important: center;
  --justify-normal: left;
  --line-height: 1.5;
  --width-card: 285px;
  --width-card-medium: 460px;
  --width-card-wide: 800px;
  --width-content: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root[color-mode="user"] {
    --color-accent: #0097fc4f;
    --color-bg: #333;
    --color-bg-secondary: #555;
    --color-link: #0097fc;
    --color-secondary: #e20de9;
    --color-secondary-accent: #e20de94f;
    --color-shadow: #bbbbbb20;
    --color-table: #0097fc;
    --color-text: #f7f7f7;
    --color-text-secondary: #aaa;
  }
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Layout */
article aside {
  background: var(--color-secondary-accent);
  border-left: 4px solid var(--color-secondary);
  padding: 0.01rem 0.8rem;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  line-height: var(--line-height);
  margin: 0;
  overflow-x: hidden;
  padding: 0;
}

footer,
header,
main {
  margin: 0 auto;
  max-width: var(--width-content);
  padding: 3rem 1rem;
}

hr {
  background-color: var(--color-bg-secondary);
  border: none;
  height: 1px;
  margin: 4rem 0;
  width: 100%;
}

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--justify-important);
}

section img,
article img {
  max-width: 100%;
}

section pre {
  overflow: auto;
}

section aside {
  border: 1px solid var(--color-bg-secondary);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow) var(--color-shadow);
  margin: 1rem;
  padding: 1.25rem;
  width: var(--width-card);
}

section aside:hover {
  box-shadow: var(--box-shadow) var(--color-bg-secondary);
}

[hidden] {
  display: none;
}

/* Headers */
article header,
div header,
main header {
  padding-top: 0;
}

header {
  text-align: var(--justify-important);
}

header a b,
header a em,
header a i,
header a strong {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

header nav img {
  margin: 1rem 0;
}

section header {
  padding-top: 0;
  width: 100%;
}

/* Nav */
nav {
  align-items: center;
  display: flex;
  font-weight: bold;
  justify-content: space-between;
  margin-bottom: 7rem;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin: 0 0.5rem;
  position: relative;
  text-align: left;
}

/* Nav Dropdown */
nav ul li:hover ul {
  display: block;
}

nav ul li ul {
  background: var(--color-bg);
  border: 1px solid var(--color-bg-secondary);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow) var(--color-shadow);
  display: none;
  height: auto;
  left: -2px;
  padding: 0.5rem 1rem;
  position: absolute;
  top: 1.7rem;
  white-space: nowrap;
  width: auto;
  z-index: 1;
}

nav ul li ul::before {
  /* fill gap above to make mousing over them easier */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5rem;
  height: 0.5rem;
}

nav ul li ul li,
nav ul li ul li a {
  display: block;
}

/* Nav for Mobile */
@media (max-width: 768px) {
  nav {
    flex-wrap: wrap;
  }

  nav ul li {
    width: calc(100% - 1em);
  }

  nav ul li ul {
    border: none;
    box-shadow: none;
    display: block;
    position: static;
  }
}

/* Typography */
code,
samp {
  background-color: var(--color-accent);
  border-radius: var(--border-radius);
  color: var(--color-text);
  display: inline-block;
  margin: 0 0.1rem;
  padding: 0 0.5rem;
}

details {
  margin: 1.3rem 0;
}

details summary {
  font-weight: bold;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height);
  text-wrap: balance;
}

mark {
  padding: 0.1rem;
}

ol li,
ul li {
  padding: 0.2rem 0;
}

p {
  margin: 0.75rem 0;
  padding: 0;
  width: 100%;
}

pre {
  margin: 1rem 0;
  max-width: var(--width-card-wide);
  padding: 1rem 0;
}

pre code,
pre samp {
  display: block;
  max-width: var(--width-card-wide);
  padding: 0.5rem 2rem;
  white-space: pre-wrap;
}

small {
  color: var(--color-text-secondary);
}

sup {
  background-color: var(--color-secondary);
  border-radius: var(--border-radius);
  color: var(--color-bg);
  font-size: xx-small;
  font-weight: bold;
  margin: 0.2rem;
  padding: 0.2rem 0.3rem;
  position: relative;
  top: -2px;
}

/* Links */
a {
  color: var(--color-link);
  display: inline-block;
  font-weight: bold;
  text-decoration: underline;
}

a:hover {
  filter: brightness(var(--hover-brightness));
}

a:active {
  filter: brightness(var(--active-brightness));
}

a b,
a em,
a i,
a strong,
button,
input[type="submit"] {
  border-radius: var(--border-radius);
  display: inline-block;
  font-size: medium;
  font-weight: bold;
  line-height: var(--line-height);
  margin: 0.5rem 0;
  padding: 1rem 2rem;
}

button,
input[type="submit"] {
  font-family: var(--font-family);
}

button:hover,
input[type="submit"]:hover {
  cursor: pointer;
  filter: brightness(var(--hover-brightness));
}

button:active,
input[type="submit"]:active {
  filter: brightness(var(--active-brightness));
}

a b,
a strong,
button,
input[type="submit"] {
  background-color: var(--color-link);
  border: 2px solid var(--color-link);
  color: var(--color-bg);
}

a em,
a i {
  border: 2px solid var(--color-link);
  border-radius: var(--border-radius);
  color: var(--color-link);
  display: inline-block;
  padding: 1rem 2rem;
}

article aside a {
  color: var(--color-secondary);
}

/* Images */
figure {
  margin: 0;
  padding: 0;
}

figure img {
  max-width: 100%;
}

figure figcaption {
  color: var(--color-text-secondary);
}

/* Forms */
button:disabled,
input:disabled {
  background: var(--color-bg-secondary);
  border-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

button[disabled]:hover,
input[type="submit"][disabled]:hover {
  filter: none;
}

form {
  border: 1px solid var(--color-bg-secondary);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow) var(--color-shadow);
  display: block;
  max-width: var(--width-card-wide);
  min-width: var(--width-card);
  padding: 1.5rem;
  text-align: var(--justify-normal);
}

form header {
  margin: 1.5rem 0;
  padding: 1.5rem 0;
}

input,
label,
select,
textarea {
  display: block;
  font-size: inherit;
  max-width: var(--width-card-wide);
}

input[type="checkbox"],
input[type="radio"] {
  display: inline-block;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  display: inline-block;
  font-weight: normal;
  position: relative;
  top: 1px;
}

input[type="range"] {
  padding: 0.4rem 0;
}

input,
select,
textarea {
  border: 1px solid var(--color-bg-secondary);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
  padding: 0.4rem 0.8rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  width: calc(100% - 1.6rem);
}

input[readonly],
textarea[readonly] {
  background-color: var(--color-bg-secondary);
}

label {
  font-weight: bold;
  margin-bottom: 0.2rem;
}

/* Popups */
dialog {
  max-width: 90%;
  max-height: 85dvh;
  margin: auto;
  padding-block: 0;
  padding-inline: 20px;
  border: 1px solid var(--color-bg-secondary);
  border-radius: 0.5rem;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
  scrollbar-color: transparent transparent;
  animation: bottom-to-top 0.25s ease-in-out forwards;
}

dialog::-webkit-scrollbar {
  width: 0;
  display: none;
}

dialog::-webkit-scrollbar-track {
  background: transparent;
}

dialog::-webkit-scrollbar-thumb {
  background-color: transparent;
}

@media (min-width: 650px) {
  dialog {
    max-width: 39rem;
  }
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

@keyframes bottom-to-top {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

dialog hr {
  margin-block: 1rem;
}

/* Tables */
table {
  border: 1px solid var(--color-bg-secondary);
  border-radius: var(--border-radius);
  border-spacing: 0;
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  padding: 0;
  white-space: nowrap;
}

table td,
table th,
table tr {
  padding: 0.4rem 0.8rem;
  text-align: var(--justify-important);
}

table thead {
  background-color: var(--color-table);
  border-collapse: collapse;
  border-radius: var(--border-radius);
  color: var(--color-bg);
  margin: 0;
  padding: 0;
}

table thead tr:first-child th:first-child {
  border-top-left-radius: var(--border-radius);
}

table thead tr:first-child th:last-child {
  border-top-right-radius: var(--border-radius);
}

table thead th:first-child,
table tr td:first-child {
  text-align: var(--justify-normal);
}

table tr:nth-child(even) {
  background-color: var(--color-accent);
}

/* Quotes */
blockquote {
  display: block;
  font-size: x-large;
  line-height: var(--line-height);
  margin: 1rem auto;
  max-width: var(--width-card-medium);
  padding: 1.5rem 1rem;
  text-align: var(--justify-important);
}

blockquote footer {
  color: var(--color-text-secondary);
  display: block;
  font-size: small;
  line-height: var(--line-height);
  padding: 1.5rem 0;
}

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar) transparent;
}

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar);
  border-radius: 10px;
}

html {
  max-width: 70ch;
  padding: 3em 1em;
  margin: auto;
  line-height: 1.75;
  font-size: 1.25em;
}

a, a:visited{color: #99a6eb}
a:hover{color: #8289b1}
h1 a {text-decoration: none}
h1 a:hover {text-decoration: underline}

header {padding: 0}

footer p{font-size: 0.6rem}