dark-mode-toggle {
  --dark-mode-toggle-dark-icon: url("/wp-content/sun.png");
  --dark-mode-toggle-light-icon: url("/wp-content/moon.png");
}

@media screen and (min-width: 1615px) {
  #commento{
    position: absolute; 
    top:50px;
    right: 10px;
    width: calc(100rem - 75rem);
  }
}


@font-face {
  font-family: 'Inter';
  font-display: auto;
  font-style:  normal;
  font-weight: 400;
  src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Regular.woff") format("woff");
}
@font-face {
  font-family: 'Inter';
  font-display: auto;
  font-style:  normal;
  font-weight: 700;
  src: url("https://rsms.me/inter/font-files/Inter-Bold.woff2") format("woff2"),
       url("https://rsms.me/inter/font-files/Inter-Bold.woff") format("woff");
}

body.light {
  background: #ededed;
}
body.dark {
  background: #222;
}

.hack code {
  font-family: 'Roboto Mono', monospace;
}
.hack, .hack blockquote, .hack em, .hack h1, .hack h2, .hack h3, .hack h4, .hack h5, .hack h6, .hack strong {
  font-family: 'Inter', monospace;
  font-weight: 700;
}

.hack {
  font-family: "Inter", serif;
  font-weight: 400;
}

a[rel*="external"]::after {
  content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E");
}
nav a {
  padding: 2px;
  margin-right: 0.4rem;
}
.side-nav a {
  margin-right: 0.4rem;
}
.light nav a.active {
  background-color: inherit;
  color: #000;
}
.light a {
  color: #422eff;
  border-bottom: 1px solid #00ff9c;
}
.light pre {
  border: none;
  background: #222;
  padding: 1rem;
}
.light pre code {
  color: #00bcd4;
}
.dark a {
  color: rgb(82, 174, 255);
  border-bottom: 1px solid rgb(15, 143, 94);
}
.light a:hover {
  color: #000;
  background-color: #00ff9c;
}
.dark a:hover {
  color: #333;
  background-color: rgb(15, 143, 94);
}
.dark pre {
  background-color: #222;
  padding: 1rem;
}
.dark table tbody td:first-child {
  color: #ccc;
}
.muted, .help-block {
  opacity: 0.70;
}
.light
.hack .muted,
.hack .help-block {
  color: #0e0e0e;
}

.hack > header {
  display: grid;
  grid-template-columns: 1fr minmax(min-content, auto);
  column-gap: 20px;
  grid-template-areas: "nav nav";
}

.leader{
  display: flex;
  align-items: center;
  justify-content: center;
}

.myimage{
  margin-right: 10px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.08);
  border-width: 1px;
  border-radius: 9999px;
  border-color: #22292f;
  border-style: solid;
  height: 4rem;
  width: 4rem;
}

small {
  font-weight: 400;
}

a.no-underline {
border: none;
}

.archive h1 {
  display: grid;
  grid-template-columns: 1fr minmax(min-content, auto);
  column-gap: 20px;
  grid-template-areas: "div div";
}

.post-content p{
  max-width: 40rem;
}