/*
Theme Name: Papercut
Version: 1.0
*/

/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
:root {
  --canvas-width: 950px;
  --canvas-padding: 65px;
}

*{box-sizing:border-box;text-rendering:optimizeLegibility!important;hyphens:unset!important;font-family:"Open Sans",sans-serif;font-weight:400;color:#656565;font-size:16px;font-style:unset;outline:unset;vertical-align:baseline;text-decoration:unset;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing: grayscale;}

html, body { margin:0; min-height:100%; background:#cddee6}

#post-entry {
  position:relative;
  width:calc(100% - 50px);
  max-width:var(--canvas-width);
  margin:25px auto;
  padding:var(--canvas-padding);
  background:#fff;
  box-shadow:0 1px 2px rgba(60,64,67,.20),0 1px 3px rgba(60,64,67,.13);
}

#post-entry h1,
#post-entry h2,
#post-entry h3,
#post-entry h4,
#post-entry h5,
#post-entry h6 {
  font-family:"Merriweather",serif;
  color:#2b60a3;
}

#post-entry h1 {
  margin:0; margin-bottom:10px;
  font-size:32px;
  text-align:center;
}



#post-entry h2 {
  margin-bottom:0;
}

#post-entry h3 {
  margin-bottom:0;
}

#post-entry .post-date {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin:0 0 24px;
  color:#2b60a3;
  font-size:15px;
  white-space:nowrap;
}

#post-entry .post-date::before,
#post-entry .post-date::after {
  content:"";
  flex:0 0 150px;
  width:150px;
  height:1px;
  background:#2b60a3;
}
#post-entry p {
  margin:0 0 14px;
}

#post-entry em {
  font-style:italic;
}

#post-entry strong {
  font-weight:600;
}

#post-entry code {
  display:inline-block;
  padding:0.08em 0.35em;
  border:1px solid #d0d7de;
  border-radius:3px;
  background:#f6f8fa;
  color:#2b60a3;
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  font-size:0.9em;
  line-height:1.35;
  white-space:nowrap;
  vertical-align:baseline;
}

#post-entry a,
#post-entry a:link,
#post-entry a:visited,
#post-entry a:active,
#post-entry a:focus {
  color:#2b60a3;
  text-decoration:none;
  font-family:inherit;
}

#post-entry a:hover {
  text-decoration:underline;
}

#post-entry .canvas-number {
  position:absolute;
  left:50%;
  bottom:calc(var(--canvas-padding) / 2);
  transform:translateX(-50%);
  margin:0;
  padding:0;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

#post-entry img {
  display:block;
  width:100%;
  height:auto;
  margin:22px 0;
}

/* Timeline image; ignores canvas padding and spans the full canvas width. */
#post-entry .timeline {
  width:calc(100% + (var(--canvas-padding) * 2));
  margin-top:calc(0px - var(--canvas-padding));
  margin-left:calc(0px - var(--canvas-padding));
  margin-right:calc(0px - var(--canvas-padding));
  margin-bottom:18px;
}



/* Blockquotes */

#post-entry blockquote{
  margin:25px 0;
  margin-bottom:50px;
  padding:18px 20px;
  border:1px solid #a2a9b1;
  border-left-width:5px;
  background:#f6f8fa;
  color:#72777d;
}

#post-entry blockquote.promptbox
{
	paddinxg:0;
	    border: 1px solid #d1d8df;
		border-left-width:1px;
		
}
#post-entry blockquote.promptbox img
{
	margin:0;
}

#post-entry blockquote.promptbox p
{
	font-size:11px;
}

#post-entry blackquote.codex {
  margin:22px 0;
  padding:18px 20px;
  border:1px solid #a2a9b1;
  background-color:#f6f8fa;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0)),
    repeating-linear-gradient(
      to bottom,
      #f8fafc 0,
      #f8fafc 22px,
      #edf2f7 22px,
      #edf2f7 44px
    );
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  font-size:14px;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

img.glow { display:block; max-width:100%; height:auto; }
.glowWrap { position:relative; display:inline-block; line-height:0; }
.glowWrap canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

@media screen and (max-width: 1000px) {
  :root { --canvas-padding:50px; }
}
