@import url(/style.css);

body {
    background: url(/images/hope.jpg) no-repeat center fixed;
}

.box {
    border-image: linear-gradient(135deg, cyan 0%, hwb(0 100% 100% / 0) 50%, hwb(0 100% 100% / 0) 50%, magenta 100%) 1;
    border-width: 2px;
}

.roll::before {
        content: " ";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgb
a(0, 0, 255, 0.06));
        z-index: 2;
        background-size: 100% 2px, 3px 100%;
        pointer-events: none;
}

.failroll {  
  padding: 5px 5px 5px 5px;
  background: hsla(189 100% 0% / 0.95);
  color: red;
  border-image: linear-gradient(90deg, red 0%, hwb(0 100% 100% / 0) 50%, hwb(0 100% 100% / 0) 100%) 1;
  border-width: 1px;
  border-style: solid;
  margin: 10px 20px 10px 20px;

}

.fail {
color: red;
    /*
  text-shadow: 0.06rem 0 0.06rem cyan, -0.125rem 0 0.06rem red;
  letter-spacing: 0.125em;

  animation-duration: 0.01s;
  animation-name: textflicker;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  */
}

.mythic {  
  padding: 5px 5px 5px 5px;
  background: hsla(189 100% 0% / 0.95);
  color: #bc95ff;
  border-image: linear-gradient(90deg, #4100b1 0%, hwb(0 100% 100% / 0) 50%, hwb(0 100% 100% / 0) 100%) 1;

  border-radius: 5px; /* this doesn't work */
  border-width: 1px;
  border-style: solid;
  margin: 10px 20px 10px 20px;
}

.scene {
  font-family: "jill";
  text-align: center;
}

.endnotes {  
  font-family: "jill";
  text-align: left;}

.subtitle {
  text-align: left;
  font-size: small;
  font-family: "headliner";
}

.myth {
  font-style: italic;
}