:root {
    --site-bg: url("/img/bgs/yume_bg.png");
  /*or like this for just a solid color:*/
  --color-bg: #FE7BA7;
  
  --text-color: #6B63DC;
  --banner-color: #4F16A5;
  --border-color: #FE7BA7;
  --link-color: #FE7BA7;
  --heading-color: #FE7BA7;
  --highlight: #4F16A5;
  --subtle: #6B63DC;
  --purple: #4F16A5;
  
  
  --mark-color: #4F16A5;
  --mark-bg: #FE7BA7;
}

::selection {
  background-color: #e4f1f7; /* Highlight background */
  color: #4f16a5;            /* Text color */
}
@font-face {
    font-family: 'Doka';
    src: url('/font/Doka_Regular.ttf');
}
@font-face {
    font-family: 'Doka';
    src: url('/font/Doka_Bold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: 'Cozette';
    src: url('/font/Cozette.ttf');
}  
body {
  font-family: 'Doka';
  font-size: 12px;
  text-transform: lowercase;
  margin: 0;
  color: var(--text-color);
    background-image: var(--site-bg);
    background-attachment: fixed;
    background-color: var(--color-bg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-transform: lowercase;
  }
  
  mark {
  background-color: var(--mark-bg); /* Changes the highlight color */
  color: var(--mark-color);            /* Changes the text color inside the mark */
}

html {scroll-behavior: smooth;}

main a {color: var(--link-color);}
main a:visited {color: var(--subtle);}
main a:hover {color: var(--link-color);}
a:hover {
  color: var(--link-color);
  text-decoration: none;
}
header, footer {
  background:var(--banner-color);
  color: white;
    font-family: 'Cozette';
}
header h1 {
  margin:0; padding: 12px 24px; max-width:900px;
    font-family: 'Cozette';
}
header a {text-decoration: none;
    font-family: 'Cozette';
  color: white;}
header a:visited, 
header a:hover {color:white;
    font-family: 'Cozette';}
li {
  margin-bottom: 4px;
}
main {
  width: 900px;
  max-width: 100%;
  background: white;
  border: 3px solid var(--border-color);
  border-radius: .25em;
  margin: 20px auto;
  padding: 12px 48px;
}
main h2 {
  background-color: var(--highlight);
  padding: .2em .5em;
    font-family: 'Cozette';
}

main h3 { background-color: var(--highlight);
  padding: .2em .5em;
    font-family: 'Cozette';}
main h4 {border-bottom: 2px dashed var(--highlight);
    font-family: 'Cozette';}

dt {font-weight: bold;}
dd {margin-bottom: 8px;}

footer {
  position: fixed;
  bottom: 0;
  font-size: 12px;
  opacity: 50%;
  padding: 6px;
  text-align: center;
  width: 100%;
  z-index: 2;
}
  .bio {
    float:none;
    max-width: 100%;
    width: 280px;
    margin: 0 auto;
}

.oof {
  border: solid;
  border-width: 2px;
  border-color: #9983a8;;
}

.line-dash {
  border:0;
  border-top: 2px dashed var(--border-color);
  margin: .8em;
}
  .soyfont {
    font-family: 'soyfont' url('/font/SoyFont.ttf');
/*these set up tumblr-style photoset grids*/
.photosetx2,
.photosetx3 {
    display: grid;
    gap: 4px;
    align-items: center;
}
.photosetx2 {grid-template-columns: 1fr 1fr;}
.photosetx3 {grid-template-columns: 1fr 1fr 1fr;}
/*adjust this to your liking! it crops images that are too tall*/
.cropped {
    width: 156px;
    height: 156px;
    overflow: hidden;
    object-position: 25% 25%;
}
/*this makes sure the image doesn't get distorted when cropped*/
.photosetx2 img,
.photosetx3 img {object-fit: cover;}

/* a class for centering text and images */
.center { text-align: center; }
.img-right { float: right; }

/*this stops the float image from overflowing out of its container*/
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
body {cursor: url(https://softfuton.neocities.org/img/cursor.gif), progress !important;}
a:hover {cursor: url(https://softfuton.neocities.org/img/cursor_hover.png), progress !important;}