/* (⸝⸝> ω <⸝⸝)𓂃˖ ࣪⊹*/

:root {
  --highlight: #ffc4ff;
  --hover: rgb(255, 255, 255);
  
}


html {
  /* 1rem = 10px scale */
  font-size: 62.5%; 
  scrollbar-width: thin;                        
  scrollbar-color: rgba(0, 0, 0, 0.2) #ffffff;   

}




/* ///// fonts !! */


@font-face {
    font-family: 'Yurumoji';
    src: url('Fonts/yurumoji.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.hina-mincho {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
}


.inconsolata-regular {
  font-family: "Inconsolata", monospace;
  font-weight: 400;
}


.meie-script {
  font-family: "Meie Script", cursive;
  font-weight: 400;
  font-style: normal;
}

/*𓂃˖ ࣪⊹*/




body {
  font-family: Arial;
  font-size: 1.6rem;

}

aside {
background-color: #;
}



/* ///// text formatting (p, selection, list style, h2, h4, sidenotes) !! */

p:hover {
    background: var(--hover);
    box-shadow: inset 2px 2px 3px var(--highlight), inset -2px -2px 3px var(--highlight);
    border-radius: 5px;
}

::selection { 
  background-color: rgba(237, 237, 237, 0.6);
  color: #000; 
}

/* <ul> point style */

ul {
    list-style-type: square;
    padding-left:20px;
    margin-top:5px;
    margin-bottom: 5px;
    line-height: normal;
}

li::marker {
    color: gray;
}


h2 {
  font-family: 'Meie Script';
  text-align: center;
  font-size: 2.4rem;
  font-weight: normal;
  line-height: 2.2em;
  text-shadow: 0 0 2px white, 3px 3px 2px white, -3px -3px 2px white, 6px 4px 5px rgb(0 0 0 / 50%);
  box-shadow: inset -3px -3px 5px rgb(0 0 0 / 30%), 5px 10px 10px rgb(0 0 0 / 10%);
  background-image: url('Backgrounds/pink-plaid.jpeg');
  width: min(100%, 300px);
  margin: 0 auto 10px auto;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 100%;
  background-color: #dae1ed;
  
  
}

h4 {
  font-family: 'Yurumoji';
  font-size: 2rem;
  font-weight: normal;
}

h6 {
  font-family: 'Yurumoji';
  font-size: 1.7rem;
  font-weight: normal;
}

.side-note {
  font-family: 'Inconsolata';
  font-size: 1.6rem;
  font-weight: normal;
}

.divider {
  font-family: Arial;
  font-size: 2rem;
  color: gray;
}

/* ///// divs !! */


.div-1 {
 overflow: scroll;
 overflow-x: hidden;
 height: 10em;
 width: 22em;
 padding: 1rem;
 background-color: #FFF;
 border-radius: 10px;
 box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
 
}

.div-2 {
 background-color: rgb(255, 245, 255 / 80%);
 overflow-x: hidden;
 overflow: scroll;
 border: 1px solid;
 padding: 1rem;
}

.div-3 {
  background-color: rgb(232, 236, 255 / 80%);
 overflow-x: hidden;
 overflow: scroll;
 border: 1px solid;
 padding: 1rem;
 border-radius: 10px 10px 10px 10px;
  /* Top-Left Top-Right Bottom-Right Bottom-Left */
}





/* unc terminal (cyword journal, turn.js flipbook) */

  

.page {
    background-color: #fff; 
    background-image: url("Backgrounds/wrinkledpaper2.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.hard {
  background-color: #fff; 
  opacity: 1;
}

/* DIRECTORY */

.directory-vertical-menu {
    position: absolute;
    top: 145px; /* Sits perfectly underneath your background compass element */
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 140px;
    z-index: 40;
}

.directory-button {
    font-family: 'Yurumoji', Arial;
    font-size: 12px;
    color: #000000 !important;
    text-decoration: none;
    text-align: center;
    background: var(  ); /* button bg */
    padding: 6px 10px;
    border: 1px solid #000000;
    cursor: pointer;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.directory-button:hover {
    filter: brightness(1.05);
    box-shadow: 0 0 12px var(  ); /* glow clr */
    transform: translateX(-3px);
}

/* ~~~~~~~~~~~ */



/* AI */



/* ///// nav buttons !! */

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}


.tab-btn {
  
}

.tab-container {
  display: flex;
}


/* styling for nav buttons when clicked */

.tab-btn.active {
  background-color: #e0e0e0;
  border-bottom: 2px solid #000;
  font-weight: bold;
}





/* [ ] make clean code for aside 

    line-height: 1.5rem;
    color: var(--text);
    font-family: 'comic sans ms', sans-serif;
    --lt-color-gray-100: #f8f9fc;
    --lt-color-gray-200: #f1f3f9;
    --lt-color-gray-300: #dee3ed;
    --lt-color-gray-400: #c2c9d6;
    --lt-color-gray-500: #8f96a3;
    --lt-color-gray-600: #5e636e;
    --lt-color-gray-700: #2f3237;
    --lt-color-gray-800: #1d1e20;
    --lt-color-gray-900: #111213;
    --lt-shadowDefault: 0 2px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 4px -1px rgba(0, 0, 0, 0.04);
    --lt-shadowActive: 0 0 8px -2px rgba(0, 0, 0, 0.1), 0 6px 20px -3px rgba(0, 0, 0, 0.2);
    --lt-color-white: #fff !important;
    --lt-color-black: #111213 !important;
    --lt-color-transparent: rgba(255, 255, 255, 0) !important;
    --lt-color-background-light: var(--lt-color-gray-100) !important;
    --lt-color-background-default: var(--lt-color-gray-200) !important;
    --lt-color-background-dark: var(--lt-color-gray-300) !important;
    --lt-color-border-light: var(--lt-color-gray-200) !important;
    --lt-color-border-default: var(--lt-color-gray-300) !important;
    --lt-color-border-dark: var(--lt-color-gray-400) !important;
    --lt-color-text-very-light: var(--lt-color-gray-500) !important;
    --lt-color-text-light: var(--lt-color-gray-600) !important;
    --lt-color-text-default: var(--lt-color-gray-700) !important;
    --lt-color-text-dark: var(--lt-color-gray-800) !important;
    --lt-color-overlay-default: #fff !important;
    --lt-color-overlay-dark: #fff !important;
    --lt-color-overlay-transparent: rgba(0, 0, 0, 0.1) !important;
    --lt-shadow-website-overlay: 0 0 7px 0 rgba(0, 0, 0, 0.3) !important;
    --base: #fff4fdd7;
    --basefade: linear-gradient(rgba(255, 236, 252, 0.792), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.593) 80%, #ffdbffc3);
    --basemix: rgba(255, 107, 191, 0.5);
    --text: #201a1b;
    --accent1: #7da4e9;
    --accent2: #004bad;
    --accent-gradient: linear-gradient(#e3f1ff 10%, #b0d6ff 50%, #91cff8 80%, #4a9bff);
    --link: #ba015b;
    --linktext: #fff;
    --highlight: #f0aef0;
    --hover: rgb(255, 255, 255);
    --focus: hotpink;
    --highlightbg: rgb(38 74 113 / 0.9);
    --highlighttext: #e3f1ff;
    --spoilerbg: #ffd4ea91;
    --spoilertext: #0d53af;
    box-sizing: border-box;
    font-size: 0.85rem;
    position: fixed;
    top: 0;
    z-index: 10;
    transform: translate(-95%, 30%);
    width: clamp(80px, 17vw, 300px);
    height: 500px;
    overflow-y: auto;
    border-radius: 5px;
    padding: 10px;
    background: var(--basefade);
    box-shadow: inset 0 5px 10px var(--highlight), 2px 2px 10px 1px rgba(0,0,0,.4);
    backdrop-filter: blur(2px);