:root{
  --p:10px;
  --c1:#43362e;
  --c2:#ede8e5;
  --c3:#0c0908;
}
body{
  background: radial-gradient(#150d08, #1f160b);
  color:#222;
  font-size:23px;
  line-height:1.3em;
  font-family:APL333;
  background-attachment: fixed;
  &:after{
    content:"";
    width:80vw;
    height:80vh;
    border:1px solid ;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, var(--c1), transparent,var(--c1));
    z-index: -1;
    position: fixed;
    top:10vh;
    left:10vw;
  }
  nav{
    position: fixed;
    z-index: 10;
    right: var(--p);
    top: var(--p);
    display: flex;
    gap: var(--p);
    button{
      font-size: 1.5em;
    }
  }
  &>header{
    position: fixed;
    left:0;
    top: 0;
    background:#ffffffcc;
    padding:var(--p);
    gap:var(--p);
    .admin{background: gold;}
  }
  a{color:inherit;}
}
main{
  display: flex;
  .plot-caption{
    text-align: center;
    padding:var(--p);
    position: absolute;
    width: 20vw;
    border-radius: calc(var(--p)/2);
    color:var(--c2);
    &:open{
      background:var(--c1);
      box-shadow: 2px 2px 10px var(--c3);
      .name{
        &:after{
          rotate:90deg; margin-top:0;
        }
      }
    }
    .name{
      display: inline-flex;
      background: var(--c2);
      padding:calc(var(--p)/2);
      cursor: pointer;
      align-items: center;
      border:1px solid transparent;
      border-radius: 2px;
      color: var(--c1);
      &:hover{
        border-bottom-color:gray;
        background:var(--c2);
      }
      &:after{
        content:"▸";
        display:inline-block;
        margin-left:.5em;
        margin-top:-.2em;
        transform-origin:center;
        transition: all .1s linear;
      }
    }
    header{
      text-align: left;
      padding-top:calc(var(--p) * 4);
      gap:var(--p);
      width:100%;
      display: flex;
      text-transform: uppercase;
      font-size: 1rem;
      justify-content: center;
      .data{
        width:50%;
        text-align: center;
        span{display: none;}
        button{
          margin-inline: auto;
          margin-bottom:var(--p);
        }
      }
    }
  }
}

.seed-box{
  display: flex;
  justify-content: center;
  padding:calc(var(--p) * 4);
  background:color-mix(in hsl, var(--c1) 95%, white);
  border:1px solid gray;
  border-color:var(--c3) color-mix(in hsl, var(--c1) 85%, white) color-mix(in hsl, var(--c1) 65%, white) color-mix(in hsl, var(--c1) 85%, white);
  position: relative;
  font-size: 15px;
  &:before{
    content:"seed";
    position:absolute;
    top:.2em;
    left:.3em;
    color:color-mix(in srgb, var(--c1) 70%, white);
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .seed{
    width:80px;
    height:80px;
    position:relative;
  }
}

form{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  label, input{
    width:100%;
  }
  input{
    margin-top:calc(var(--p)* 4);
    padding:var(--p);
    font:inherit;
    border:0;
    border-radius: var(--p);
    background:#ffffffcc;
  }
  textarea{display:none;}
  hr{
    border: 0;
    width: 100%;
    /*! margin-top: calc(var(--p) * 4) */
  }
  button[type="submit"]{
    width:100%;
  }
}

button, .button{
  background:color-mix(in hsl, var(--c1) 60%, var(--c3));
  font-size: 1.2rem;
  display: flex;
  justify-content:  center;
  align-items: center;
  font-family:inherit;
  color: var(--c2);
  padding:calc(var(--p) * .8) var(--p);
  border:0;
  text-decoration: none;
  border-radius: var(--p);
  border-bottom:2px solid var(--c3);
  cursor: pointer;
  &:hover{
    background:color-mix(in hsl, var(--c3) 90%, var(--c2));
  }
  &:active, &.inview{
    position: relative;
    border-bottom:0;
    margin-top:2px;
  }
  &.inview{
    background:var(--c2);
    position: relative;
    &:after{
      content:"";
      width: .5em;
      height:.5em;
      background: var(--c2);
      position: absolute;
      bottom: -.2em;
      left: calc(50% - .5em / 2);
      rotate: -45deg;
    }
  }
  img{
    width:1em;
  }
}
.message-box{
  position: fixed;
  left:0;
  bottom:0;
  width:clamp(300px,20%, 800px);
  padding:var(--p);
  display: flex;
  flex-direction: column;
  gap:calc(var(--p) / 2);
  .message{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding:  var(--p) var(--p) calc(var(--p) * 2) var(--p);
    background:white;
    color:var(--c3);
    border-radius: var(--p);
    scale:1 0;
    transition: all .6s ease-out;
    transform-origin: bottom center;
    position:relative;
    box-shadow: 2px 1px 15px #000;
    a{
      color:inherit;
    }
    &:before{
      transition:all .9s linear;
      content:"";
      position: absolute;
      bottom:calc(var(--p)/2); right:calc(var(--p));
      width:calc((var(--time) * 5%) - calc(var(--p) * 2));
      border-bottom:2px solid lime;
      box-shadow: 2px 1px 1px #333;
    }
    &.appears{
     scale:1 1;
    }
    &.dies{
     translate:0 -40px;
     opacity: 0;
    }
    &.info{background: color-mix(in srgb,blue, white 70%)}
    &.success{background: color-mix(in srgb,lime, white 70%)}
    &.alert{background: color-mix(in srgb,red, white 70%)}
  }
}
.profile-box{
  position: fixed;
  right:var(--p);
  bottom:var(--p);
  width:clamp(300px,20%, 800px);
  padding:var(--p);
  gap:calc(var(--p) / 2);
  background:var(--c3);
  color:var(--c2);
  font-size: .8em;
  border:1px solid var(--c3);
  p{
    margin:0;
    span{
      background:var(--c2);
      padding: calc(var(--p)/8) calc(var(--p)/1.5);
      border-radius: var(--p);
      color: var(--c3);
      margin-left:var(--p);
      /* a{text-decoration: none;} */
    }
  }
}
.popup{
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%;
  height: 100vh;
  overflow-y:auto;
  justify-content: center;
  align-items: center;
  &.opened{
    display: flex;
    background: 0% 0% / 10px 10px repeat radial-gradient(3px 3px at 50% 50%, var(--c3) 180% 100%, transparent 100%);
  }
  .inner{
    max-height: 100vh;
    overflow-y:scroll;
    width:min(90%, 700px);
    background:var(--c1);
    color:var(--c2);
    border-radius:var(--p);
    padding:calc(var(--p) * 7) var(--p) calc(var(--p) * 5) var(--p);
    position: relative;
    .close{
      position: absolute;
      top: var(--p); right:var(--p);
    }
    figure{
      width:100%;
      margin-block: calc(var(--p)*5);
      img{width:100%;}
      figcaption{
        font-size: .6em;
        text-align: center;
        margin-bottom:var(--p);
      }
    }
    .outro{
      text-align: center;
    }
  }
}
h1, h2{
  text-align:center;
  padding-bottom: calc(var(--p)/2);
  margin-bottom:calc(var(--p) * 5);
  border-bottom:1px solid var(--c2);
}
h2{
  margin-top:calc(var(--p) * 7);
}
h2, p, ul, ol, blockquote{
  margin-bottom: calc(var(--p)*2);
}
p button{display: inline-block;}
li{
  padding-left: calc(var(--p)*4);
  position: relative;
  margin-bottom: calc(var(--p));
  &:before{
    content:"";
    width:.4em;
    height: .2em;
    border-radius: 100%;
    background: var(--c2);
    position: absolute;
    top: .5em;
    left: 0;
  }
}
blockquote{
  border:1px solid var(--c2);
  border-radius: var(--p);
  padding:var(--p);
  p{
    margin:0;
  }
}
::selection{background: SeaGreen;}