@import url('https://fonts.googleapis.com/css2?family=DM+Mono&display=swap');

/** color themes ! **/
:root,
:root.mulled {
    /** mulled wine: a holiday theme **/
    --primary: #BA2D0B;
    --text: #D5F2E3;
    --secondary: #73ba9b;
    --tertiary: #73ba9b;
    --background: #01110A;
}

:root.spiced {
  /** mulled wine: a holiday theme **/
  --primary: #BA2D0B;
  --text: #01110A;
  --secondary: #358261;
  --tertiary: #358261;
  --background: #daf8e9d6;
}

[data-selected-theme="rosebud tea"] {
    /** rosebud tea: light theme **/
    --background: #f6efee42;
    --text: #99c299;
    --primary: #e365c1;
    --secondary: #3a2f39;
    --tertiary: #e396df;
}

[data-selected-theme="pumpkin spice"] {
    /** pumpkin spice: dark theme **/
    --background: #1f1300;
    --text: #ffc15e;
    --primary: #cc5803;
    --secondary: #f7934c;
    --tertiary: #f7b05b;
}

[data-selected-theme="peaches and cream"] {
    /** peaches and cream: soft theme **/
    --background: #f8edeb6d;
    --text: #FFB5A7;
    --primary: #FEC89A;
    --secondary:#FEC89A;
    --tertiary: #FCD5CE;
}

[data-selected-theme="pistachio caramel"] {
    /** pistachio caramel: green theme **/
    --background: #f0ead293;
    --text: #6C584C;
    --primary: #617922;
    --secondary: #A98467; 
    --tertiary: #ADC178;
}

[data-selected-theme="berry sangria"] {
    /** berry sangria: bright theme 1 **/
    --background: #F8F7FF;
    --text: #9381FF;
    --primary: #ee9d67;
    --secondary: #B8B8FF;
    --tertiary: #ffc096;
}

[data-selected-theme="bisexual cosmos"] {
    /** bisexual cosmos: callback theme **/
    --background: url('https://honeybread.neocities.org/details/backgrounds/stars3_dark.gif');
    --text: #F8F7FF;
    --primary: #ff80b9;
    --secondary: #ff6ff5;
    --tertiary: #B8B8FF;
    font-family: 'DM Mono', monospace;
}

[data-selected-theme="melted otterpop"] {
    /** otterpops: bright theme 2 **/
    --primary: #EA526F;
    --text: #070600;
    --background: #F7F7FF;
    --secondary: #23B5D3;
    --tertiary: #279AF1;   
}

body {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--text);
  text-transform: lowercase;
  background: url('img/035s.jpg');
  height: 100%;
}

p {
  max-width: 74ch;
}

.footer {
    text-align: center;
    text-transform: uppercase;
    width: 400px;
    color: var(--text);
    border: 1px dashed var(--primary);
    background: var(--background);
    margin: auto;
}

.door {
  max-width: 760px;
  max-height: 546px;
  height: 100%;
  margin: 96px auto 46px auto;
  display: flex;
  border: 1px dashed;
  border-color: var(--tertiary);
  background: var(--background);
  filter: drop-shadow(0px 0px 12px black);
}

.window {
  width: 60%;
  max-height: 540px;
  overflow-y: scroll;
  padding: 18px;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.window::-webkit-scrollbar {
  display: none;
}

.curtain {
  width: 30%;
  padding: 18px;
}


/* big titles */
h1 {
  font-size: 14px;
  color: var(--primary);
  font-weight: bold;
}

h2 {
  color: var(--secondary);
  font-size: 12px;
  margin: 0 auto;
}

h3 {
  color: var(--tertiary);
  font-size: 12px;
  margin: 0 auto;
  text-transform: uppercase;

}

hr {
  border-top: 1px dashed;
  border-bottom: 0px;
  margin: 12px 0 12px 0;
  color: var(--secondary);
}


/* regular degular links */      
a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--primary);
}

a:visited{
  color: var(--primary);
  text-decoration-color: var(--primary);
  text-decoration-line: underline;
}

a:hover{
  text-decoration-style: wavy;
  text-decoration-color: var(--tertiary);
  color: var(--tertiary);
  opacity: 1.0;
}

/* sweet sweet bullet lists */
ul {
  list-style-type: hiragana-iroha;
}

/* list items */
li {
  color: var(--primary);
  padding-bottom: 18px;

}

.inbody {
  list-style-type: hiragana;
  color: var(--text);
  padding-bottom: 6px;
}

u {
  color: var(--primary);
}

.deviantart {
  overflow-y: scroll;
  max-height: 240px;
  margin: 12px;
  padding: 18px;
  color: var(--background);
  border: 1px dashed var(--primary);
  background: var(--text);
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.deviantart::-webkit-scrollbar {
  display: none;
}

.dart {
    border: 1px solid;
    border-color: var(--tertiary);
}

@media screen and (max-width: 1024px) {
  .wrap {
  flex-direction: column;
  }
  .main, .nav, .revnav {
  width: 100%;
  }
}
  
#statuscafe-content {
  color: var(--background);
}

#statuscafe {
  margin: 12px auto;
}

#statuscafe-username {
  font-size: 8px;
  text-transform: uppercase;
}