/* testing testing, one two three...*/

#wrapper {
  margin:0;padding:0;
  border-image-source: url('https://lazicepie.neocities.org/images/castletownborderref.png');
  border-image-slice: 32 162;
  border-image-repeat: stretch;
  border-image-width: auto;
  top:0;
  position: fixed;
  width: 100%;
  height: 100%;;
  z-index: 0;
}

#workskin {
  margin: 32px 162px;
  font-family: "Arial", "Helvetica", sans-serif;
  z-index: 1;
}

body{margin:0;padding:0;background: black;color:red;}

#workskin .hide {display:none;}

#workskin .darkness {background-color:#0f1034;color:grey;width:auto;padding: 4em;}

#workskin .darkness ~ .brightness {border:solid 0 #0f1034;border-top:1em;border-image-source: linear-gradient(white, black);}

#workskin .brightness {color:black;background-color:#dfddd9;width:auto;padding: 4em;}

#workskin .brightness ~ .darkness {border:solid 1em, 0, 0, 0 #dfddd9;border-image-source:linear-gradient(black,white);}

#workskin section {
  background-color: black;
  border: 0.2em white;
  border-style: solid double;
  color:white;
  display: grid;
  flex: 1;
  grid-column-gap: 3em;
  font-family: "fixedsys", monospace;
  font-size: 20px;
  margin-top:3em;
}

#workskin section .choice {
  grid-template-columns: 2fr 1fr 2fr;
  text-align: center;
}

#workskin .choice .c1{
  grid-column: 1;
  margin: 2em;
}

#workskin .choice .c2{
  grid-column: 3;
  margin: 2em;
}

.select::before{content: url("https://lazicepie.neocities.org/images/redheart.png"); content:"  ♥  "; color:red;}

.dialogue { grid-template-columns: 1fr 3fr;}

#workskin .dialogue .line{
  grid-column: 2;
  margin: 2em;
  text-align: justify;
  color: inherit;
  padding-top: 2em;
}

.dialogue .line:before {
  content: " * ";
  font-size: 1.5em;
}

#workskin section .sprite { 
  grid-column: 1;
  width: 70%;
  height: auto;
  margin: 2em;
  margin-left: 25%;
}