*{
  scrollbar-width: none;
}

::selection{
  color: var(--color2);
  background: var(--color1);
}

body{
  width: 600px;
  color: var(--color1);
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.25;
  margin: 0 100px;

  &::before{
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: -999;
    inset: 0;
    background: var(--background) center / cover;
  }
}

main, section, aside{
  gap: 0.5em;
}

section > div,
aside > div,
nav, header{
  border: 1px solid var(--border);
  outline: 1px dotted var(--outline);
  outline-offset: -3px;
  box-shadow: 2px 2px 0 var(--shadow);
}

section > div, aside > div{
  background: var(--background-div);
  background-blend-mode: multiply;
  box-shadow: 2px 2px 0 var(--shadow);
  padding: 0.75em;
}

section img, aside img, #p1, #p2{
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  outline: 1px dotted var(--outline);
  outline-offset: -3px;
  user-select: none;
}

aside > div{
  width: 150px;
  font-size: 10px;

  .fc, .fr{
    gap: 0.35em;
  }
}

nav{
  background: var(--background-div);
  background-blend-mode: multiply;
  padding: 0.5em 0.75em;
  align-items: center;
  justify-content: space-between;

  div{
    align-items: center;
    gap: 0.5em;

    a{
      font-style: normal;
    }

    span, a{
      transform: scaleY(1.25);
    }

    :not(p){
      font-weight: bold;
    }
  }
}

header{
  background: var(--header);
  margin: 0.5em 0;
  height: 225px;
  overflow: hidden;
}

.marquee{
  --gap: 1rem;
  display: flex;
  flex-direction: column;
  user-select: none;
  gap: var(--gap);
  animation: flicker1 0.75s infinite;
}

.marquee-content{
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: 0 1em;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll-y 55s steps(500) infinite;
}

pre{
  background: #fff url(/images/shallow/unwound/texture2.png);
  background-clip: text;
  color: transparent;
  filter: drop-shadow(2px 2px 0 var(--pre-shadow));
  text-align: right;
  font-family: var(--pre-font);
  font-size: var(--pre-size);
  line-height: var(--pre-line-height);
  letter-spacing: 1px;

  span{
    background: var(--pre-span) url(/images/shallow/unwound/texture2.png);
    background-blend-mode: multiply;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* main */

p{
  margin: 0;
}

a{
  color: var(--accent);
  text-decoration: none;
  font-style: italic;
}

a:hover{
  color: var(--accent-hover);
}

summary{
  list-style-type: '✩ ⠀';
  color: var(--accent);
}

summary:hover{
  color: var(--accent-hover);
  cursor: pointer;
}

details[open] > summary{
  list-style-type: '★ ⠀';
}

select{
  background: #fff;
  word-spacing: 2px;
}

select:hover{
  cursor: pointer;
}

input{
  padding: 0.15em 0.5em;
}

select, input{
  color: #757575;
  letter-spacing: -1px;
  font-size: 11px;
  border: 1px solid var(--border);
}

hr{
  margin-top: 0.25em;
  border: 0;
  border-top: 1px solid var(--underline);
  width: 100%;
}

.post{
  display: flex;
  gap: 0.75em;

  .fc{
    width: 100%;
    gap: 0.25em;

    > .fc{
      margin-top: 0.5em;
    }
  }

  a{
    align-self: flex-start;
  }

  img:not(.icon1, .icon2){
    image-rendering: auto;
    margin-top: 0.25em;
    filter: var(--filter);
    transition: all 0.2s;
  }

  img:not(.icon1, .icon2):hover{
    cursor: zoom-in;
    filter: none;
  }
}

.icon1, .icon2{
  width: 45px;
  height: 45px;
  outline-offset: 1px;
}

.icon1{content: var(--profile-mini1);}
.icon2{content: var(--profile-mini2);}

.user{
  justify-content: space-between;
  gap: 0.75em;
  background: var(--background-title);
  background-blend-mode: multiply;
  border: 1px dotted var(--outline);
  padding: 0.25em 0.5em;
  margin-bottom: 0.35em;
  color: var(--color1);
  font-weight: bold;
  font-size: 8px;

  .fr{
    align-items: center;
    gap: 0.75em;
  }

  span{
    transform: scaleY(1.25);
  }
}

/* sidebar */

.info-span{
  display: flex;
  justify-content: space-between;

  > span{
    color: var(--info-span);
    font-size: 8px;
    font-weight: bold;
    transform: scaleY(1.25);
    text-decoration: 1px underline dotted var(--underline);
    margin: 0.25em 1em 0 0;
  }

  p{
    text-align: right;
  }
}

.info-title{
  background: var(--background-title);
  background-blend-mode: multiply;
  padding: 0.25em 1em 0 0;
  text-align: right;
  font-weight: bold;
  font-size: 8px;
  border: 1px dotted var(--outline);
  transform: scaleY(1.25);
}

#statuscafe-username{
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.35em;

  a{
    text-transform: uppercase;
  }
}

/* misc */

.user::before, .info-title::before, nav::before{
  content: "";
  pointer-events: none;
  background-image: var(--stripes);
  position: absolute;
  z-index: 999;
  inset: 0;
  opacity: 0.1;
}

#p1, #p2{
  position: absolute;
  z-index: 999;
  border-radius: 50%;
  filter: drop-shadow(2px 2px 0 var(--shadow));
}

#p1{
  content: var(--profile1);
  z-index: 1;
  width: 120px;
  top: 55px;
  left: -35px;
  animation: flicker3 0.75s infinite;
}

#p2{
  content: var(--profile2);
  z-index: 2;
  width: 90px;
  top: 150px;
  left: -45px;
  animation: flicker3 0.75s 0.25s reverse infinite;
}