body {
background: linear-gradient(180deg,rgba(230, 230, 230, 1) 0%, rgba(207, 207, 207, 1) 100%);
color: #383838;
}

.page {
border: 2px inset rgba(225, 224, 224, 0.8);
padding: 5em;
}

.article-break {
  padding: 1em 0 1em 0;
  width: 2.5em !important;
  height: 0.5em !important;
  background: #FF5F0B !important;
  border: 1px black solid !important;
  border-radius: 50%;
  margin: auto;
  display: inline-block;
  box-shadow: 0 1px 0 #ccc,
              0 2px 0 #c9c9c9,
              0 3px 0 #bbb,
              0 4px 0 #b9b9b9,
              0 5px 0 #aaa,
              0 6px 1px rgba(0,0,0,.1),
              0 0 5px rgba(0,0,0,.1),
              0 1px 3px rgba(0,0,0,.3),
              0 3px 5px rgba(0,0,0,.2),
              0 5px 10px rgba(0,0,0,.25),
              0 10px 10px rgba(0,0,0,.2),
              0 20px 20px rgba(0,0,0,.15);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 1px 0 #ccc,
                0 2px 0 #c9c9c9,
                0 3px 0 #bbb,
                0 4px 0 #b9b9b9,
                0 5px 0 #aaa,
                0 6px 1px rgba(0,0,0,.1),
                0 0 5px rgba(0,0,0,.1),
                0 1px 3px rgba(0,0,0,.3),
                0 3px 5px rgba(0,0,0,.2),
                0 5px 10px rgba(0,0,0,.25),
                0 10px 10px rgba(0,0,0,.2),
                0 20px 20px rgba(0,0,0,.15),
                0 0 8px 2px rgba(255, 95, 11, 0.4);
  }
  50% {
    box-shadow: 0 1px 0 #ccc,
                0 2px 0 #c9c9c9,
                0 3px 0 #bbb,
                0 4px 0 #b9b9b9,
                0 5px 0 #aaa,
                0 6px 1px rgba(0,0,0,.1),
                0 0 5px rgba(0,0,0,.1),
                0 1px 3px rgba(0,0,0,.3),
                0 3px 5px rgba(0,0,0,.2),
                0 5px 10px rgba(0,0,0,.25),
                0 10px 10px rgba(0,0,0,.2),
                0 20px 20px rgba(0,0,0,.15),
                0 0 20px 8px rgba(255, 95, 11, 0.75),
                0 0 40px 12px rgba(255, 95, 11, 0.35);
  }
}

.article-break:hover, .article-break:active {
background: #35a4d8 !important;
}

.site-title {
  font-family: "Silkscreen", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #FF5F0B;
  font-size: 2em;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
  animation: text-pulse-glow 2s ease-in-out infinite;
}

@keyframes text-pulse-glow {
  0%, 100% {
    text-shadow: 0 1px 0 #ccc,
                 0 2px 0 #c9c9c9,
                 0 3px 0 #bbb,
                 0 4px 0 #b9b9b9,
                 0 5px 0 #aaa,
                 0 6px 1px rgba(0,0,0,.1),
                 0 0 5px rgba(0,0,0,.1),
                 0 1px 3px rgba(0,0,0,.3),
                 0 3px 5px rgba(0,0,0,.2),
                 0 5px 10px rgba(0,0,0,.25),
                 0 10px 10px rgba(0,0,0,.2),
                 0 20px 20px rgba(0,0,0,.15),
                 0 0 8px 2px rgba(255, 95, 11, 0.4);
  }
  50% {
    text-shadow: 0 1px 0 #ccc,
                 0 2px 0 #c9c9c9,
                 0 3px 0 #bbb,
                 0 4px 0 #b9b9b9,
                 0 5px 0 #aaa,
                 0 6px 1px rgba(0,0,0,.1),
                 0 0 5px rgba(0,0,0,.1),
                 0 1px 3px rgba(0,0,0,.3),
                 0 3px 5px rgba(0,0,0,.2),
                 0 5px 10px rgba(0,0,0,.25),
                 0 10px 10px rgba(0,0,0,.2),
                 0 20px 20px rgba(0,0,0,.15),
                 0 0 20px rgba(255, 95, 11, 0.75),
                 0 0 40px rgba(255, 95, 11, 0.35);
  }
}

.site-header nav a:hover, .site-header nav a:active {
border-color: var(--navigation-button-border-hover);
background-color: #FF5F0B;
color: var(--navigation-text-hover);
box-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.site-header nav a {
border: 1px solid var(--navigation-button-border);
font-family: "Silkscreen", sans-serif;
font-weight: 300;
font-style: normal;
color: #FF5F0B;
font-size: 1.5em;
background-color: white;
color: var(--navigation-text);
border-radius: 20px;
padding: 0.5em 1em;
font-size: 0.9em;
font-weight: 500;
transition: background-color 0.4s ease-in;
box-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.post-date-wrapper {
color: #454545;
font-size: 1.2em;
font-weight: bold;
}

a {
color: #FF5F0B;
font-weight: bold;
}

a:hover {
color: #35a4d8;
}

.post-title {
color: #35a4d8 !important;
font-family: "Silkscreen", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1.3em;
}

.post-title a {
color: #35a4d8 !important;
font-family: "Silkscreen", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1.3em;
}

.post-title:hover, .post-title:active {
text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

.dt-published {
font-family: "Silkscreen", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1em;
}

.attribution {
display: none;
}

h1 {
font-family: "Silkscreen", sans-serif;
font-weight: 50;
font-style: normal;
color: #FF5F0B;
font-size: 1.5em !important;
}