/* fonts */
@font-face {
  font-family: SuperCereal;
  src: url(/fonts/SuperCereal-owLDo.ttf);
}
@font-face {
  font-family: Telegrama;
  src: url(/fonts/telegrama_render_osn.otf);
}
@font-face {
  font-family: rainyhearts;
  src: url(/fonts/rainyhearts.ttf);
}
/* attribute specific fonts */
a:not(.folder, .tab, .filteredlinks){
  font-family: monospace;
}
p.small {
  font-size: 0.8em;
  font-family: monospace;
}
.folder, .tab, .filteredlinks {
  font-family: rainyhearts;
}
/* class filter */
select {
  appearance: none;
  border: 0;
  outline: 0;
  background: rgba(255, 250, 250, 0.571);
  color: inherit;
}
select::-ms-expand {
  display: none;
}
/* Custom Select wrapper */
.select {
  position: relative;
  display: flex;
  font-size: 1.2em;
  font-family: Telegrama;
  justify-self: center;
  inline-size: min(20rem, 90vw);
  background: var(--background-select);
  border-radius: 0.25rem;
  overflow: hidden;
    select {
    flex: 1;
    padding: 1em;
    cursor: pointer;
            }
  &::after {
    content: "\25BC";
    position: absolute;
    inset-inline-end: 1rem;
    inset-block-start: 1rem;
    transition: 0.25s all ease;
    pointer-events: none; 
  }
  &:hover::after {
    color: #1273f3;
    animation: bounce 0.5s infinite;
  }
}
@keyframes bounce {
  25% {
    transform: translatey(5px);
  }
  75% {
    transform: translatey(-5px);
  }
}

.centered{
    justify-self: center;
  align-self: center;
  text-align: center;
  align-items: center;
  align-content: center;
  justify-items: center;
  justify-content: center;
}

/* class filter buttons */
.class-labels button {
  font-size: 0.75em;
  font-family: telegrama;
  margin: 0.5em;
  cursor: pointer;
  border: none;
  background: #eee;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background-color 0.3s;
  justify-self: center;
  align-self: center;
  text-align: center;
  align-items: center;
  align-content: center;
  justify-items: center;
  justify-content: center;
  display: flex;
}

.class-labels button:hover {
  background-color: #ccc;
}
/* iframes */
#guestbook iframe {
    aspect-ratio: 9 / 16;
}
.drawbox iframe {
    aspect-ratio: 15 / 25;
}
iframe.crashblog {
  aspect-ratio: 3 / 2;
  min-block-size: 500px;
  min-inline-size: 300px;
}

/* dividers */
.divider {
  padding-block-start: 5px;
  padding-block-end: 5px;
  image-rendering: pixelated;
  overflow: hidden;
}
div.gap {
  padding: 40px
}


/* main */
body:not(.no-bg, .workspace, .more) {
background:url('/backgrounds/latoilepattern.PNG'); /* please do not use without crediting me @vibefae */
background-size: 450px 450px;
 background-repeat:repeat;
  font-family: SuperCereal;
  max-inline-size: 90%;
    margin-inline-start: auto;
    margin-inline-end: auto;
    font-size: 1.1em;
    align-content: center; 
    justify-content: center;
    justify-items: center; 
    align-items: center;
    text-align: center; 
}
body.no-bg, body.workspace{
   font-family: SuperCereal;
   align-content: center;
   align-items: center;
   text-align: center;
   font-size: 1em
}
body.workspace{
  background: url(/imgs/workspacestatic.jpeg);
}

body.portfolios{
  background: url(/imgs/folder-eye-0386.jpg);
}
body.more{
  background: url(/imgs/heartwindow.png);
}
body.play{
  background: url(/backgrounds/fabric-heartsplaid.png);
}
/* different grid layout for home page*/
@media only screen and (min-width: 600px){
  body.home {
    display: grid;
    gap: 1em;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr 2fr 5fr;
  }
  
  .header { grid-area: 1 / 1 / 2 / 3; }
  
  .drawbox {
    align-self: stretch;
    grid-area: 3 / 2 / 4 / 3;
    inline-size: 80%;
  }
  
  .sidebar {
    grid-area: 2 / 1 / 3 / 4;
    inline-size: 90%;
  }
  
  .guestbook {
    align-self: stretch;
    grid-area: 3 / 1 / 4 / 2;
    inline-size: 80%;
  }

  iframe {
    block-size: 100%;
    inline-size: 100%;
    border: none;
  }
}


main, .guestbook, .sidebar, .drawbox, .boxedtext{
  border: 3px lightslategray;
  border-radius: 50px;
  background-color: linen;
  box-shadow: 0 10px 15px 5px rosybrown;
  padding: 8px 16px;
}
main {
  overflow-y: hidden
}
/* different home layout for mobile*/
@media only screen and (max-width: 599px) {
  body.home{
    display: grid; 
    grid-auto-rows: 1fr; 
    grid-template-columns: 1fr; 
    grid-template-rows: 0.5fr 0.8fr 1fr 2fr; 
    gap: 1em; 
    justify-content: center; 
    align-content: center; 
    justify-items: center; 
    align-items: center; 
  }
  .header { grid-area: 1 / 1 / 2 / 2; }
  .sidebar {
    justify-self: stretch; 
    align-self: start; 
    grid-area: 2 / 1 / 3 / 2; 
  }
  .guestbook {
    justify-self: stretch; 
    align-self: start; 
    grid-area: 3 / 1 / 4 / 2; 
  }
  .drawbox {
    justify-self: stretch; 
    align-self: stretch; 
    grid-area: 4 / 1 / 5 / 2; 
  }
* {
    max-width: 89vw;
  }
  iframe {
    block-size: 100%;
    inline-size: 100%;
    border: none;
  }
  .gap {
    padding: 0px;
  }
}

/* display filterable list as grid*/

ul.filteredlinks {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
  display: grid;
  grid-auto-columns: max-content;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-items: center;
}
li{
  border: 1px rgb(37, 37, 135) dotted; 
  margin-block-end: 5em;
  padding: 5em;
  inline-size:calc(max-content);
}
/* subpage nav like for portfolios page */

  .subpagenav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  
  }
  
/*tooltips*/

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-block-end: 1px dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  inline-size: 10em;
  background-color: black;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
  font-family: rainyhearts;
}

/*tooltip end */

/* floating image code adapted from pochi.card.co*/
  .float {
    animation-name: floating;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, -0px); }    
}
.subpage{
  display: inline-block
}
.subpage img {
block-size: 500px;
margin: 0px 40px;
filter: drop-shadow(-4px 6px 8px #000000);
}
  /* navbar photopile from ribo.zone */
.photopile { 
  display: flex; 
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
}
.photopile figure { 
  display: inline-block;
  max-inline-size: 40%;
  background: white;
  box-shadow: 1px 4px 5px black;
  transform: rotate(2deg);
  margin: 0 -15px;
}
.photopile figure img {
  max-inline-size: calc(80% - 2rem);
  margin: 1rem 1rem 0rem 1rem;
  border: 2px darkslategray inset;
}
.photopile figcaption {
  text-align: center;
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 1rem;
  color: black;
}
.photopile figure:hover { 
  z-index: 3;
}
.photopile figure:nth-child(2n) { 
  transform: rotate(-10deg);
}
.photopile figure:nth-child(3n) {
  transform: rotate(5deg);
}
.photopile figure:nth-child(4n) { 
  transform: rotate(4deg);
}
.photopile figure:nth-child(5n) { 
  transform: rotate(-2deg);
}
.photopile figure:nth-child(6n) {
  transform: rotate(-7deg);
}

/* color shift to make noai webring widget pink*/
.colorfilter{
filter: hue-rotate(20deg) saturate(1000%);
}

/*moleskine notebooks*/

.moleskine-wrapper {
  max-inline-size: 25%;
  min-inline-size: 10%;
  display: inline-block;
}

.moleskine-notebook {
  block-size: 250px;
  inline-size: 175px;
  position: relative;
  transition: 0.4s ease-in-out;
  border-radius: 5px 15px 15px 5px;
  transform-origin: left center 0px;
  display: inline-block;
  margin: 30px;
  perspective: 800px;
}
.moleskine-notebook:hover {
  transform: rotateZ(-10deg);
}
.moleskine-notebook:hover .notebook-cover {
  transform: rotateY(-50deg);
  z-index: 999;
  box-shadow: 20px 10px 50px rgba(0, 0, 0, 0.2);
}

.notebook-cover {
  background: #cc4b48;
  block-size: 250px;
  inline-size: 175px;
  position: absolute;
  border-radius: 5px 15px 15px 5px;
  z-index: 10;
  transition: 0.5s linear;
  transform-style: preserve-3d;
  transform-origin: left center 0px;
}
.notebook-cover::before {
  content: "";
  position: absolute;
  inline-size: 10px;
  block-size: calc(100% + 2px);
  inset-block-start: -1px;
  z-index: 100;
  border-radius: 2px;
  inset-inline-end: 25px;
  transition: 2s ease;
  background: linear-gradient(to right, #9c2e2b 0%, #cc4b48 12%, #9c2e2b 25%, #cc4b48 37%, #9c2e2b 50%, #cc4b48 62%, #9c2e2b 75%, #cc4b48 87%, #9c2e2b 100%);
}

.notebook-skin {
  block-size: 50px;
  background: #e8e8e0;
  margin-block-start: 80px;
  padding: 15px;
  font-size: 16px;
  font-family: rainyhearts;
  position: relative;
  z-index: 10;
  color: #222;
  text-align: start;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.notebook-skin:before {
  content: "";
  position: absolute;
  inline-size: 100%;
  block-size: 15px;
  inset-inline-start: 0;
  inset-block-end: 0;
  background: #cddc39;
}

.notebook-page {
  block-size: 100%;
  inline-size: 175px;
  position: absolute;
  background-color: #fbfae8;
  z-index: 0;
  border-radius: 5px 16px 16px 5px;
  overflow: hidden;
}
.notebook-page.ruled {
  block-size: 100%;
  inline-size: 175px;
  position: absolute;
  overflow: hidden;
  background: linear-gradient(to bottom, #fbfae8 9px, #e4e4e4 1px);
  background-size: 100% 10px;
}
.notebook-page.squared {
  background-image: linear-gradient(#e4e4e4 1px, transparent 1px), linear-gradient(90deg, #e4e4e4 1px, transparent 1px);
  background-size: 10px 10px, 10px 10px, 2px 2px, 2px 2px;
}
.notebook-cover.yellow {
  background: #fed754;
}
.notebook-cover.yellow:before {
  background: linear-gradient(to right, #ebb501 0%, #fed754 12%, #ebb501 25%, #fed754 37%, #ebb501 50%, #fed754 62%, #ebb501 75%, #fed754 87%, #ebb501 100%);
}
.notebook-cover.green {
  background: #abc3b5;
}
.notebook-cover.green:before {
  background: linear-gradient(to right, #7ea38e 0%, #abc3b5 12%, #7ea38e 25%, #abc3b5 37%, #7ea38e 50%, #abc3b5 62%, #7ea38e 75%, #abc3b5 87%, #7ea38e 100%);
}

/* folder tabs*/ 
.folder {
  box-sizing: border-box;
}
body.more {
  padding: 2rem 2rem 2rem;
  font-size: 1rem;

  justify-content: center;
  align-content: center;
  align-items: center;
  text-align: center;
}
body .folder {
  display: grid;
  grid-column: 1/-1;
}

.tab {
  font-family: rainyhearts;
  text-transform: uppercase;
  line-height: 0.8;
  display: inline-block;
  margin-inline-start: -35px;
  filter: drop-shadow(0px -3px 2px rgba(0, 0, 0, 0.05));
  border: none;
  border-radius: 6px 6px 0 0;
  position: relative;
  margin-inline-end: 4rem;
  background: var(--background);
  white-space: nowrap;
  cursor: pointer;
  background: var(--background);
}
.tab:focus {
  outline: none;
}
.tab:focus span {
  border-block-end: 2px solid;
  border-radius: 0;
}
.tab:first-of-type {
  margin-inline-start: 30px;
}
.tab div {
  background: var(--background);
  padding: 6px 0;
  position: relative;
  z-index: 10;
}
.tab span {
  display: inline-block;
  border: 2px solid transparent;
  padding: 6px 15px 6px;
  border-radius: 5px;
  z-index: 5;
  position: relative;
  font-size: 140%;
  color: #fff;
  min-inline-size: 6rem;
}
.tab:before, .tab:after {
  content: "";
  block-size: 100%;
  position: absolute;
  background: var(--background);
  border-radius: 8px 8px 0 0;
  inline-size: 30px;
  inset-block-start: 0;
}
.tab:before {
  inset-inline-end: -16px;
  transform: skew(25deg);
  border-radius: 0 8px 0 0;
}
.tab:after {
  transform: skew(-25deg);
  inset-inline-start: -16px;
  border-radius: 8px 0 0 0;
}
.tab.active {
  z-index: 50;
  position: relative;
}
.tab.active span {
  background: white;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  color: black;
}

.content {
  border-radius: 10px;
  position: relative;
  inline-size: 100%;
}
.content #tab-1 {
  display: block;
}
.content:before {
  content: "";
  inline-size: 100%;
  block-size: 100%;
  position: absolute;
  z-index: -1;
  inset-block-start: 0;
  inset-inline-start: 0;
  border-radius: inherit;
}
.content__inner {
  font-family: rainyhearts, sans-serif;
  display: none;
  background: var(--background);
  border-radius: inherit;
  padding: 1rem;
  filter: drop-shadow(0px -2px 2px rgba(0, 0, 0, 0.1));
  z-index: 5;
}

.folder {
  margin: 1rem auto;
  max-inline-size: 50rem;
  inline-size: 100%;
  scrollbar-height: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.folder ::-webkit-scrollbar {
  background: transparent; /* Chrome/Safari/Webkit */
  display: none;
}

.page {
  padding: 1.5rem;
  border-radius: 2px;
  min-block-size: 20rem;
  background-color: #f9f9f9;
  filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.15));
  background-image: linear-gradient(#e4e4e4 1px, transparent 1px);
  background-size: 8% 8%, 2px 2px;
}

.tabs {
  padding: 2rem 0 0 0;
  margin: 0 0.5rem;
  overflow-x: auto;
  inline-size: calc(100% - 1rem);
  white-space: nowrap;
}


.folder .tab:nth-of-type(1),
.folder .content__inner:nth-of-type(1) {
  --background: #af4d98;
}
.folder .tab:nth-of-type(2),
.folder .content__inner:nth-of-type(2) {
  --background: #d66ba0;
}
.folder .tab:nth-of-type(3),
.folder .content__inner:nth-of-type(3) {
  --background: #e5a9a9;
}
.folder .tab:nth-of-type(4),
.folder .content__inner:nth-of-type(4) {
  --background: #6cb6bb;
}
.folder .tab {
  border: 2px solid;
  border-width: 2px 0 0;
}
.folder .tab:before, .folder .tab:after {
  inset-block-start: -2px;
  border-block-start: 2px solid;
}
.folder .tab:before {
  border-inline-end: 2px solid;
}
.folder .tab:after {
  border-inline-start: 2px solid;
}
.folder .tab.active span {
  border: 2px solid;
}
.folder .tab.active:focus span {
  outline: 1px solid rgba(255, 255, 255, 0.7);
}
.folder .tab:not(.active) {
  border-block-end: 2px solid;
}
.folder .tab:not(.active):before, .folder .tab:not(.active):after {
  box-shadow: 0 1.5px 0 black;
}
.folder .content {
  inset-block-start: -2px;
  inset-inline-start: -2px;
}
.folder .content__inner {
  box-shadow: 0 0 0 1.5px black;
}
.folder .page {
  border: 2px solid;
}


/* cursors * {cursor: url(https://ani.cursors-4u.net/nature/nat-11/nat1045.cur), auto !important;} */ 
* {cursor: url(https://cur.cursors-4u.net/symbols/sym-2/sym189.ani), url(https://cur.cursors-4u.net/symbols/sym-2/sym189.png), auto !important;}