/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



#statuscafe {
    padding: .5em;
    background-color: lavender;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}
  
  
.side-by-side {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.plaque-column {
  display: flex;
  flex-direction: column;
}

.plaque-title {
  font-weight: bold; /* optional */
  margin-bottom: 6px; /* spacing above the image */
}





  
  
  /* FONT IMPORT */
@import url('https://fonts.googleapis.com');
@import url('https://fonts.cdnfonts.com/css/open-dyslexic');
@import url('https://fonts.gstatic.com');

@font-face { 
	font-family: "Gothik Steel"; 
	src: url("./fonts/Darkcastle.otf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}

@font-face { 
	font-family: "Modern DOS"; 
	src: url("/fonts/ModernDOS.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
  
  
@font-face { 
	font-family: "Carmencita"; 
	src: url("./fonts/CARMENCI.ttf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
    
    
@font-face { 
	font-family: "Darkcastle"; 
	src: url("./fonts/Darkcastle.otf") format("truetype"); 
	font-weight: normal;
	font-style: normal; 
	font-display: swap; 
}
  
/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */



/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: purple; /* this one changes background color fr fr */
  --content-background-color:#1f222e;
  --content-background-pic2: url("/hydrangea2(3).png");
  --content-background-pic: url('/preddy.jpeg');
  --content-background-image: url("/bggreen.png");
  --sidebar-background-image: url("/lyonnette.png");
  --sidebar-background-color: rgba(150, 220, 200, 0.35)
;

background: linear-gradient(
  to bottom,
  rgba(150, 220, 200, 0.55),  /* stronger mint at top */
  rgba(150, 220, 200, 0.15)   /* pale mint at bottom */
);




;

  /* Text Colors: */
  --text-color: #e8e3fd;
  --sidebar-text-color: #001a33;
  --link-color: #001a33;
  --link-color-hover: #9e48ec;

  /* Text: */
  --font: 'Modern DOS', serif;
  --heading-font: 'Darkcastle', serif;
  --font-size: 17px;

  /* Other Settings: */
  --margin: 40px;
  --padding: 24px;
  --border: 5px solid #ffffff;
  --round-borders: 6px;
  --sidebar-width: 300px;
}


/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

/* read more stuff */
.more-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  color: black;
}

/* When checkbox is checked, reveal text */
.more-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.readmore-button::after {
  content: "Read more";
  color: #7a4dbb;
  font-weight: bold;
  cursor: pointer;
}

/* Reveal only the matching block */
.readmore-block input:checked ~ .more-text {
  max-height: 999999px;
}

/* Change button text only for the matching block */
.readmore-block input:checked ~ .readmore-button::after {
  content: "Read less";
} /* end of readmore stuff */

 
 
    .player {
        width:fit-content;
        border: #CECECE solid 2px;
        border-radius: 100px;
        margin-left:auto;
        margin-right:auto;
      background: linear-gradient(0deg, rgba(205,205,205,1) 0%, rgba(230,230,230,1) 30%, rgba(255,255,255,1) 100%); 
      padding:5px;
    }
 



.seek_slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 6px;
  background: #e4d5dc;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border-radius: 8px;
}

.seek_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  background: white;
  cursor: pointer;
  border-radius: 50%;
  border:1px solid #cecece;
  padding-top:3px;
  position:relative;
  bottom:3px;
}
 
button,input,label,option,select,table,textarea,ul.tree-view{-webkit-font-smoothing:none;font-family:"Myriad Pro";font-size:11px}h1{font-size:5rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.5rem}u{border-bottom:.5px solid #222;text-decoration:none}button,input[type=reset],input[type=submit]{border:none;border-radius:0;box-sizing:border-box;color:transparent;min-height:23px;min-width:75px;padding:0 12px;text-shadow:0 0 #222}.vertical-bar,button,input[type=reset],input[type=submit].vertical-bar{height:20px;width:4px}button:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=submit]:not(:disabled):active{opacity:0.5}}@media (not(hover)){button:not(:disabled):hover,input[type=reset]:not(:disabled):hover,input[type=submit]:not(:disabled):hover{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}}button:focus,input[type=reset]:focus,input[type=submit]:focus{opacity:1}button::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0}:disabled,:disabled+label,input[readonly],input[readonly]+label{color:grey}:disabled+label,button:disabled,input[type=reset]:disabled,input[type=submit]:disabled{text-shadow:1px 1px 0 #fff}}
 

 
 
@media (not(hover)){
	button:not(:disabled):hover {
    box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}

 
@font-face {
  font-family: "Myriad Pro";
  src: url("https://dl.dropbox.com/scl/fi/z8hqw29h8a9i3a3cbbxkt/MYRIADPRO-REGULAR.OTF?rlkey=begwqxljs2gzyw26h00oeovzi&st=px0mbeax&dl=0") format("woff");
}
 
 
 
.window, .title-bar {
  font-family: "Myriad Pro";
  -webkit-font-smoothing: none;
  font-size: 11px;
}
 
.window {
  padding:10px;
  width:290px;
}
 
 
.window-body { 
  display:block;
  margin:auto; 
  border-radius:0em;
}
 
 
 
input[type=range] {
        -webkit-appearance: none;
        appearance:none;
        width: 100%;
    }
 
    input[type=range]:focus {
        outline: none;
    }
 
    /* settings for chrome browsers */
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: pointer;
    }
 
 
    /* settings for firefox browsers */
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        cursor: pointer;
    }
 
    .flex {display: flex;}
 
 
 
 
   
.webring-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
}

.webring-scroll::-webkit-scrollbar {
  height: 8px;
}

.webring-scroll::-webkit-scrollbar-thumb {
  background: #7aa88f; /* soft green to match your aesthetic */
  border-radius: 4px;
}

.webring-item {
  display: flex;
  align-items: center;   /* centers each widget vertically */
  justify-content: center;
  height: 180px;         /* or whatever height you want */
}




.webring-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 20px;

  background-image: url("https://hydrangea-pop.neocities.org/bg/geocities25.jpg");
  background-size: cover;   /* or cover */
  background-repeat: repeat; /* cute for patterns */
  background-position: center;
  
  border-radius: 12px;        /* optional */
}





/* shrink the whole Angelnet card a bit more */
.angelnet-webring {
  transform: scale(0.78);   /* previously ~0.85 */
  transform-origin: top center;
}

/* reduce internal spacing further */
.angelnet-inner {
  padding: 4px !important;
}

/* slightly smaller badge */
.angelnet-badge {
  width: 52px !important;
  height: auto;
}

/* slightly smaller title */
.angelnet-title {
  font-size: 0.9rem !important;
  line-height: 1.1;
}

/* smaller link text */
.angelnet-links {
  font-size: 0.8rem !important;
  padding: 2px 0 !important;
}

/* tighter divider */
.angelnet-divider {
  margin: 2px 0 !important;
}

#gfdkris img {
  width: 220px !important;
  height: auto !important;
  max-width: 220 !important;
}

#gfdkris .kwtfaw-control {
  width: 50px !important;
  height: auto !important;
}

 
    #musicplayer {
display:block;
        float:right;
      background: linear-gradient(0deg, #F1E3F0, white) padding-box, linear-gradient(to top, white, #A2A2A2) border-box;
  border-radius: 60em;
  border: 2px solid transparent;
      margin-left:8px;
      padding-left:10px;
      box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
    }

 
    .wheel {
      display: block;
  justify-content: center;
        margin:auto;
      background: linear-gradient(white, white) padding-box, linear-gradient(to top, white, #A2A2A2) border-box;
  border-radius: 50em;
  border: 2px solid transparent;
      padding-top:0px;
      box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.27) inset;
    }

.innerwheel {
  border-radius: 50em;
  border: 2px solid #E2E2E2;
  
      padding:9px;
  padding-left:10px;
  padding-right:12px;
  margin:0;
  box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
-webkit-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
-moz-box-shadow: 1px 1px 10px 0px rgba(128,128,128,0.17) inset;
  
}
th{
  width:20px;
 
  margin:0;
}
.fas fa-minus{
  margins:0;
  padding-bottom:5px;
}

 
    .wheelcontrols {
        font-size:14px !important; /* size of controls */
        text-align:center;
        padding-top:2px;
color: #aaa;
    opacity: 0.8;
    }

.wheelcontrols button {
    background: none;
    border: none;
    color: #aaa;
    opacity: 0.6;
    font-size: 14px;
    padding: 2px;
    cursor: pointer;
}
.wheelcontrols button:hover {
  opacity: 1;
}

.controls button:hover {
   opacity: 1;
  
}

.playpause-track button{
  display:block;
  color:#C1C1C1;
  font-size: 20px;
  margin:auto;
}

.playpause-track {
    font-size: 22px !important;
    padding: 3px;
}
 
    .songtitle {
        padding:25px; /* padding around song title */
        color:#A3A3A3;
      padding-bottom:0;
      margin-left:15px;
      margin-right:20px;
        font-size: 16px;
        display:block;
        font-family:Myriad Pro;
    }
 
    .controls button{
      display:block;
      
      margin-left:15px;
        font-size:14px !important; /* size of controls */
        text-align:center;
        color:#ccb3be;
      opacity:0.6
        
    } 
 
    button {
      min-width:20px;
      background:none;
      
      text-align:center;
    }
button:active {
    opacity: 0.7;
}

 
    .seeking {
        display:flex;
        justify-content: space-evenly;
        padding:10px; /* padding around seeking bar */
      padding-left:0;
      padding-bottom:0px;
      color:#A3A3A3;
    }
 
    .current-time {
        padding-right:5px;
    }
 
    .total-duration {
        padding-left:5px;
    }
    





* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;

  background: var(--background-color);
  background-image: url('/bg/clouds1.png');
  background-size: 220px;
  background-repeat: repeat;        /* ← repeat everywhere */
  background-size: auto;            /* or try 300px if you want smaller clouds */

  animation: cloudsMove 60s linear infinite;
}

@keyframes cloudsMove {
  from { background-position: 0 0; }
  to   { background-position: -1000px 0; }
}


::selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
}

mark {
  /* Text highlighted by using the <mark> element */
  text-shadow: 1px 1px 4px var(--link-color);
  background-color: inherit;
  color: var(--text-color);
}

/* Links: */
a {
  text-decoration: underline;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
  width: 1050px;
  display: grid;
  grid-gap: var(--margin);
  grid-template:
    "header header" auto
    "sidebarTop main" auto
    "leftSidebar main" auto
    "footer footer" auto
    / var(--sidebar-width) 1fr; /* ← THIS is the fix */
}

.plaque-column {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers the image block */
  text-align: center;    /* centers the text */
}


header {
  grid-area: header;
}

#sidebarTop {
  grid-area: sidebarTop;
}

#leftSidebar {
  grid-area: leftSidebar;
}

main {
  grid-area: main;
}

footer {
  grid-area: footer;
}




main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);
  border: var(--border);
  border-radius: var(--round-borders);
  border-image: url('cutestexture.png.png') 50 round;

}





/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header {
  grid-area: header;
  font-size: 1.2em;
  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);
  background: var(--content-background-pic2);

}

.header-content {
  padding: var(--padding);
}

.header-title {
  font-family: var(--heading-font);
  font-size: 1.5em;
  font-weight: bold;
}

.header-image img {
  width: 100%;
  height: auto;
}




/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

sidebarTop {
  grid-area: aside;
  /* style it however you want */
}

aside {
  grid-area: aside;
  border: 5px solid white;
  border-radius: var(--round-borders);
  overflow: hidden;

  background:
    linear-gradient(
      to bottom,
      rgba(150, 220, 200, 0.35),
      rgba(100, 170, 200, 0.35)

    ),
    var(--sidebar-background-image);

  background-repeat: repeat;
  background-position: top left;

  padding: var(--padding);
  color: var(--sidebar-text-color);
}





.left-sidebar {
  grid-area: leftSidebar;
}

.right-sidebar {
  grid-area: rightSidebar;
}

.sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: var(--heading-font);
}

.sidebar-section:not(:last-child) {
  margin-bottom: 3em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

/* Sidebar Blockquote: */

.sidebar-section blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
}

.sidebar-section blockquote > *:first-child {
  margin-top: 0;
}

.sidebar-section blockquote > *:last-child {
  margin-bottom: 0;
}

/* Site Button: */

.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-button textarea {
  font-family: monospace;
  font-size: 0.7em;
}

/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
  grid-area: footer;
  border: var(--border);
  border-radius: var(--round-borders);
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: var(--content-background-image);
  display: flex;
  justify-content: center;
}

footer a,
footer a:visited {
  color: var(--link-color);
}

footer a:hover,
footer a:focus {
  color: var(--link-color-hover);
}

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

nav {
  margin-bottom: 3em;
}

nav .sidebar-title {
  margin-bottom: 0.5em;
}

nav ul {
  margin: 0 -5px;
  padding: 0;
  list-style: none;
  user-select: none;
}

nav ul li {
  margin-bottom: 0;
}

nav > ul li > a,
nav > ul li > strong {
  display: inline-block;
}

nav > ul li > a,
nav > ul li > details summary,
nav > ul li > strong {
  padding: 5px 10px;
}

nav > ul li > a.active,
nav > ul li > details.active summary {
  font-weight: bold;
}

nav ul summary {
  cursor: pointer;
}

nav ul ul li > a {
  padding-left: 30px;
}

/* NAVIGATION IN HEADER */

header nav {
  margin-bottom: 0;
}

header nav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}

header nav ul li {
  position: relative;
}

header nav ul li:first-child > a {
  padding-left: 0;
}

header nav ul li:last-child > a {
  padding-right: 0;
}

/* Subnavigation (Drop-Down): */

header nav ul ul {
  background: var(--background-color);
  display: none;
  position: absolute;
  top: 100%;
  left: 10px;
  padding: 0.5em;
  z-index: 1;
  border: var(--border);
  min-width: 100%;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
}

header nav ul li:hover ul,
header nav ul li:focus-within ul {
  display: block;
}

header nav ul li strong {
  color: var(--link-color);
  text-decoration: underline;
  font-weight: normal;
}

header nav ul ul li a {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

main {
  line-height: 1.5;
}

main a,
main a:visited {
  color: var(--link-color);
}

main a:hover,
main a:focus {
  color: var(--link-color-hover);
  text-decoration-style: wavy;
}

main p,
main .image,
main .full-width-image,
main .two-columns {
  margin: 0.75em 0;
}

main ol,
main ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

main ol li,
main ul li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

main ol {
  padding-left: 2em;
}

main blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
}

main pre {
  margin: 1em 0 1.5em;
}

main code {
  text-transform: none;
}

main center {
  margin: 1em 0;
  padding: 0 1em;
}

main hr {
  border: 0;
  border-top: var(--border);
  margin: 1.5em 0;
}

/* HEADINGS: */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-family: var(--heading-font);
  margin-bottom: 0;
  line-height: 1.5;
}

main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
  margin-top: 0;
}

main h1 {
  font-size: 1.5em;
}

main h2 {
  font-size: 1.4em;
}

main h3 {
  font-size: 1.3em;
}

main h4 {
  font-size: 1.2em;
}

main h5 {
  font-size: 1.1em;
}

main h6 {
  font-size: 1em;
}

/* COLUMNS: */

.two-columns {
  display: flex;
}

.two-columns > * {
  flex: 1 1 0;
  margin: 0;
}

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}






/* -------------------------------------------------------- */
/* CONTENT IMAGES */
/* -------------------------------------------------------- */

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;
}

.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
}

.images img {
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 0;
  overflow: hidden;
}

/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */

/* please do not remove this. */

#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

/* not currently using this lol

#topborder {
  background-image: url('/divider10.png');
  background-repeat: repeat-x;
  background-size: auto 73px; /* scale image to fit height */
  height: 73px;
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 3;
}



*/


/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */

/* CSS Code for devices < 800px */
@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .layout {
    width: 100%;
    grid-template: "header" auto  "rightSidebar" auto "main" auto "footer" auto / 1fr;
    /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
  }

  .left-sidebar { 
    display: none;
  }
  

  aside {
    border-bottom: 1px solid;
    padding: 9px;
    font-size: 0.9em;
  }

  
  nav {
    padding: 0;
  }

  nav > ul {
    padding-top: 0.5em;
  }

  nav > ul li > a,
  nav > ul li > details summary,
  nav > ul li > strong {
    padding: 0.5em;
  }

  main {
    max-height: none;
    padding: 15px;
  }

  .images {
    flex-wrap: wrap;
  }

  .images img {
    width: 100%;
  }

  #skip-to-content-link {
    font-size: 1rem;
  }


/* drop down stuff */
.more-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  color: black;
}

/* When checkbox is checked, reveal text */
.more-text {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.readmore-button::after {
  content: "Read more";
  color: #7a4dbb;
  font-weight: bold;
  cursor: pointer;
}

/* Reveal only the matching block */
.readmore-block input:checked ~ .more-text {
  max-height: 999999px;
}

/* Change button text only for the matching block */
.readmore-block input:checked ~ .readmore-button::after {
  content: "Read less";
}
  
  
}