/* Section:
* ----------------------------------------------------------
* General Styles
* ----------------------------------------------------------
*/
:root {  --white: rgb(255, 255, 255);
  --yellow: rgb(252, 255, 227);
  --green: rgb(237, 255, 230);
  --cyan: rgb(212, 255, 254);
  --blue: rgb(187, 212, 255);
  --purple: rgb(210, 167, 255);
  --periwinkle: rgb(236, 164, 255);
  --pink: rgb(255, 152, 255);
  --light-pink: rgb(254, 177, 255);
  --cloud-pink: rgb(254, 201, 255);
  --orange: rgb(253, 218, 220);
  --gold: rgb(255, 236, 208);
  --misty: rgb(223, 174, 247);
  --mountain-light: rgb(214, 159, 255);
  --mountain-dark: rgb(195, 140, 255);
  --shadow: hsl(256, 100%, 81%);
  --charcoal: hsl(256, 24%, 40%);
  --charcoal-40: hsl(256, 24%, 40%, 0.4);
  --steel: hsl(256, 24%, 80%);
  --black: rgb(0, 0, 0);
  --transparent: rgb(255,255,255,0); 
  --rainbow: linear-gradient(to right, var(--gold), var(--orange),var(--pink), var(--periwinkle), var(--purple), var(--blue), var(--cyan), var(--green), var(--yellow));
  --rainbow-fade: linear-gradient(to right, var(--yellow),var(--gold), var(--orange),var(--pink), var(--periwinkle), var(--purple), var(--blue), var(--cyan), var(--green), var(--yellow));
  --rainbow-cycle: linear-gradient(to right, var(--gold), var(--orange),var(--pink), var(--periwinkle), var(--purple), var(--blue), var(--cyan), var(--green), var(--yellow),var(--gold), var(--orange),var(--pink), var(--periwinkle));
  --pink-to-cyan: linear-gradient(to right, var(--pink), var(--periwinkle), var(--purple), var(--blue), var(--cyan));
  --orange-to-blue: linear-gradient(to right, var(--orange),var(--pink), var(--periwinkle), var(--purple), var(--blue));
}
@font-face {
  font-family: "Sniglet";
  src: url(/font/Sniglet-ExtraBold.ttf) format("truetype");
}

body {
/*sample system font stack
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
font-family: 'Lexend Deca', verdana, sans-serif;
font-size:1.2em;
font-weight: 300;
line-height:1.8;
background: url("/img/GalaxyBGrough3.png"),
            radial-gradient(circle 42vh at 65vh 16vh, rgba(211,255,255,1) 0%, rgba(211,255,255,1) 12%,rgba(211,255,255,0) 23%, rgba(211,255,255,0) 100%),
            radial-gradient(circle 42vh at 62vh 19vh, rgba(244,255,233,1) 0%, rgba(244,255,233,1) 17%,rgba(211,255,255,0) 19%, rgba(211,255,255,0) 100%),
            radial-gradient(circle 42vh at 60vh 21vh, rgba(255,255,255,1) 23%, rgba(244,255,233,1) 25%, rgba(244,255,233,1) 26%, rgba(211,255,255,1)36%, rgba(211,255,255,0.25) 63%, rgba(211,255,255,0) 72%),
            linear-gradient(0deg, rgba(255,159,255,1) 0%, rgba(236,164,255,1) 55%, rgba(224,170,255,1) 70%, rgba(210,167,255,1) 85%, rgba(188,215,255,1) 100%),
            rgba(255,159,255,1);
backdrop-filter: none;
background-size: cover;
background-attachment: fixed;
background-position:left;
background-repeat: repeat-x;
margin:0;
}

h1 { /*Used for header text*/
/*Structure*/
font-size: 5rem;
line-height:1.2;
align-self: flex-end;
margin: 0;
/*Style*/
  font-family: "Sniglet", "Comic Sans MS", cursive, sans-serif;
background-color: #ffffff;
background:
linear-gradient(#eed0ff 0%, #e1fffeaa 15%, transparent 80%),
linear-gradient(60deg, rgba(147,208,255,1) 0%, rgba(211,186,248,1) 25%, rgba(255,197,238,1) 50%, rgba(255,226,224,1) 75%, rgba(255,247,202,1) 100%);
background-blend-mode: hard-light,normal;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-stroke:2px #ffffff;
filter: drop-shadow(0px 2px 4px rgba(50, 50, 93, 0.25)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));
}

h2 {
font-size: 1.3em;
color:rgb(71,21,54);
font-weight: 700;
font-family: 'Lexend Deca', 'Courier New', verdana, sans-serif;
letter-spacing: 0.1em;
line-height:1.2;
text-shadow: 3px 3px rgba(255,226,224,1);
}

h3 {
font-size: 1.17rem;
font-family: georgia, serif;
font-weight: bold;
letter-spacing: 0.1em;
line-height:1.2;
}

h4 {
font-size: 1rem;
}
h5 {
font-size: .83rem;
}
h6 {
font-size: .67rem;
}
/* Section:
* ----------------------------------------------------------
* Layout
* ----------------------------------------------------------
*/
.grid-container {  display: grid;
grid-template-columns: 1fr 255px 1050px 255px 1fr; /*sidebox width=3*stamp_width+2*stamp_margin+2*box shadow+2*margin+scrollbar width. 2ch+3*992*3+2*8+17 calc(336px + 2ch)*/
grid-template-rows: auto 1fr auto;
gap: 10px 15px;
grid-auto-flow: row;
justify-content: stretch;
justify-items: stretch;
align-items: stretch;
grid-template-areas:
  "l-gutter Top Top . r-gutter"
  "l-gutter Left Center Right r-gutter"
  "Bottom Bottom Bottom Bottom Bottom";
width: 100%;
}

.grid-container-wide {  display: grid;
  grid-template-columns: 1fr 170px 1050px min-content 1fr; /*sidebox width=3*stamp_width+2*stamp_margin+2*box shadow+2*margin+scrollbar width. 2ch+3*992*3+2*8+17 calc(336px + 2ch)*/
  grid-template-rows: auto 1fr auto;
  gap: 10px 15px;
  grid-auto-flow: row;
  justify-content: stretch;
  justify-items: stretch;
  align-items: stretch;
  grid-template-areas:
    "l-gutter Top Top . r-gutter"
    "l-gutter Left Center Right r-gutter"
    "Bottom Bottom Bottom Bottom Bottom";
  width: 100%;
  }


.Left { grid-area: Left;
display:flex;
flex-flow: column;
gap:1rem;
justify-content: flex-start;
align-items: center;}

.Center { grid-area: Center;
display:flex;
flex-flow: column;
gap:1rem;
justify-content: flex-start;}

.Right { grid-area: Right;
display:flex;
flex-flow: column;
gap:1rem;
justify-content: flex-start;}

.Right > div {
width: fit-content; 
}

.Bottom { grid-area: Bottom;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
background: var(--cyan);
}

.Top { grid-area: Top;
padding-top:4rem;
display: flex;
justify-content: center;
align-items: end;}

.l-gutter { grid-area: l-gutter; }

.r-gutter { grid-area: r-gutter; }

.sidebox {
height: 170px;
}

.navlist {
list-style-type: none; /* Remove bullets */
padding: 0; /* Remove padding */
margin: 0; /* Remove margins */
  display: flex;
flex-direction: column;
gap: 0.25rem;
}

.navlist > div {
align-self:stretch;
}

.stretch-scroll {
height:calc(100% - 50px); /*26 px + 3 x margin*/
min-height:0;
overflow-y:auto;
}

.stretch {
height:100%;
}
/* Section:
* ----------------------------------------------------------
* Decor
* ----------------------------------------------------------
*/
.header {
display: flex;
}

.window{
/*Structure*/
padding: 3px;
/*Style*/
background-color: #fffff7;
opacity: 1;
background-image:  linear-gradient(#eed6ff 1.2000000000000002px, transparent 1.2000000000000002px), linear-gradient(to right, #eed6ff 1.2000000000000002px, #fffff7 1.2000000000000002px);
background-size: 24px 24px;
box-shadow: inset 0px 0px 0px 3px #d79eff;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

.window-body {
padding: .5rem 15% 2rem 10%;
}

.profile .window-body {
font-size: 14px;
}

.window h2 {
/*Structure*/
height: 26px;
padding: 7px 5px;
display: flex;
justify-content: space-between;
align-items: center;
/*Style*/
background-color: #d79eff;
background:
linear-gradient(#eed0ff 0%, #e1fffeaa 15%, transparent 80%),
linear-gradient(60deg, rgba(147,208,255,1) 0%, rgba(211,186,248,1) 25%, rgba(255,197,238,1) 50%, rgba(255,226,224,1) 75%, rgba(255,247,202,1) 100%);
background-blend-mode: hard-light,normal;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
box-shadow: inset 0px -2px 0px 0px #d79eff;
text-shadow: 1px 1px #7f004e;
text-shadow: none;
margin:0;
}

.window h2::after {
/*Structure*/
content: '';
min-width: 25px;
min-height: 25px;
margin-left: 2px;
padding: 0;
display: block;
/*Style*/
background-color: #ffffff;
background:
linear-gradient(#eed0ff 0%, #e1fffeaa 15%, transparent 80%),
linear-gradient(60deg, rgba(147,208,255,1) 0%, rgba(211,186,248,1) 25%, rgba(255,197,238,1) 50%, rgba(255,226,224,1) 75%, rgba(255,247,202,1) 100%);
background-blend-mode: hard-light,normal;
box-shadow: inset 0px 0px 0px 2px #ffffff;
border-radius: 6px;
border: none;
}

.status-bar {
display: flex;
box-shadow: inset 0px 2px 0px 0px #d79eff;
background-color: #d79eff;
padding: 2px 1px;
gap: 0px;
}

.status-bar-field {
box-shadow: none;
padding: 1px 3px;
flex-grow: 1;
margin: 0;
font-size: 0.75rem;
border-right: 2px dotted #ffffff;
}

.status-bar-field:last-of-type {
border-right: none;
}

.navtitle {
/*Structure*/
padding: 4px 8px;
display: block;
font-size: 1.3em;
min-width: 8rem;
/*Style*/
background-color: #fffff7;
background:
linear-gradient(#eed0ff 0%, #e1fffeaa 15%, transparent 80%),
linear-gradient(60deg, rgba(147,208,255,1) 0%, rgba(211,186,248,1) 25%, rgba(255,197,238,1) 50%, rgba(255,226,224,1) 75%, rgba(255,247,202,1) 100%);
background-blend-mode: hard-light,normal;
border-radius: 6px 6px 0 0;
border: none;
color: #000000;
text-decoration: none;
font-family: 'Lexend Deca', georgia, serif;
font-weight: bold;
letter-spacing: 0.1em;
}

.navbody {
/*Structure*/
font-size: 1em;
min-width: 8rem;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
/*Style*/
background-color: #fffff7;
border-radius: 6px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
border: none;
color: #000000;
text-decoration: none;
font-family: 'Lexend Deca', georgia, serif;
font-weight: bold;
letter-spacing: 0.1em;
list-style-type: none; /* Remove bullets */

}

.navbody > ul {
  list-style-type: none; /* Remove bullets */
padding: 1px;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
text-decoration: none;
font-weight: 700;
font-size: 0.8em;
line-height: 1.8;
}

a.navbutton {
color: #000000;
}

a.navbutton:hover {
color: rgba(255,197,238,1);
}

.taskbar {
/*Structure*/
display: flex;
height: 100%;
width: 100%;
padding: 3px 5px 3px 3px;
/*Style*/
background-color: #8cfff4;
background:
linear-gradient(#eed0ff 0%, #e1fffeaa 15%, transparent 80%),
linear-gradient(60deg, rgba(147,208,255,1) 0%, rgba(211,186,248,1) 25%, rgba(255,197,238,1) 50%, rgba(255,226,224,1) 75%, rgba(255,247,202,1) 100%);
background-blend-mode: hard-light,normal;
box-shadow: inset 0px 0px 0px -2px #ff006f;
}

.display-box {
background-color: #9ee9fbff;
background: linear-gradient(60deg, var(--blue) 0%, var(--purple) 100%);
box-shadow: inset 0px 0px 0px 3px rgba(255,247,202,1);
padding:1rem;
padding-top: calc(1rem + 0.5em);
position:relative;
margin-right: 1em;
margin-top: 0.5em;
}

.display-box > h2 {
  font-size: 1.8em;
color:rgba(255,247,202,1);
text-shadow: 2px 2px #b453d6, -2px -2px #b453d6, 2px -2px #b453d6, -2px 2px #b453d6, 2px 0px #b453d6, -2px -0px #b453d6, 0px -2px #b453d6, 0px 2px #b453d6, 3px 3px #b453d688, 4px 4px rgba(211,186,248,1);
position: absolute;
top:-0.5em;
right:-0.5em;
margin:0;
}

.sticker {
 filter: drop-shadow(0px 2px 4px rgba(50, 50, 93, 0.25)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));
}

.pixel {
image-rendering: pixelated;
}

/*Alien list bullets. Used in navigation.*/
.navbody > ul {
padding-left:2rem;
}
.navbody li:nth-of-type(10n) {
list-style-image: url('/img/alien_ico1.webp');
}
.navbody li:nth-of-type(10n+1) {
list-style-image: url("/img/alien_ico0.webp");
}
.navbody li:nth-of-type(10n+2) {
list-style-image: url("/img/alien_ico2.webp");
}
.navbody li:nth-of-type(10n+3) {
list-style-image: url("/img/alien_ico3.webp");
}
.navbody li:nth-of-type(10n+4) {
list-style-image: url("/img/alien_ico4.webp");
}
.navbody li:nth-of-type(10n+5) {
list-style-image: url("/img/alien_ico6.webp");
}
.navbody li:nth-of-type(10n+6) {
list-style-image: url("/img/alien_ico7.webp");
}
.navbody li:nth-of-type(10n+7) {
list-style-image: url("/img/alien_ico5.webp");
}
.navbody li:nth-of-type(10n+8) {
list-style-image: url("/img/alien_ico8.webp");
}
.navbody li:nth-of-type(10n+9) {
list-style-image: url("/img/alien_ico9.webp");
}

.new::after {
content: url("/img/zip.gif");
}

.imgcardlist {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  gap: 20px;
}
.imgcard {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  flex-basis: min-content;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.imgcard_body {
  flex: 1;
  padding: 1em;
}
.imgcard_title, .imgcard h3 {
 /* margin: 1em;*/
}
.imgcard_subtitle, .imgcard h4 {
  /*margin: 0 1em;*/
}
.imgcard-new h3::after {
  content: url("/img/zip.gif");  
}
#furryring {
  background-image: url("/img/longpale.png");
  background-size: cover;
}
#furryring > table {
  margin: auto;
}
/* Section:
* ----------------------------------------------------------
* Picross
* ----------------------------------------------------------
*/

#gameboard {  display: grid;
  grid-template: 5em repeat(3, 1fr)  / 5em repeat(3, 1fr) ;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: none;
  width: 48em;
  height: 48em;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  position: relative;
  margin-bottom: 2rem;
}

.board {
  background-color: var(--yellow);
  border: 1px solid var(--mountain-light);
  z-index: 2;
}
.sides {
  background-color: var(--mountain-dark);
  color: white;
  border: 1px solid var(--charcoal);
  display: flex;
  padding: 0.5rem;
  font-family: 'Lexend Deca', verdana, sans-serif;
font-size:1.2em;
font-weight: 500;
line-height: 1.2;
}
.sides * {
}
.column {
    align-items: end;
  justify-content: center;
  min-width: 0;
}
.row {
  align-items: center;
   justify-content: end;
   min-height: 0;
}
.on {
  background-color: transparent;
  z-index: 2;
}
.off {
    background-image: linear-gradient(45deg, var(--yellow) 46%, var(--pink) 46%, var(--pink) 54%, var(--yellow) 54%);
  border: 1px solid var(--mountain-light);
  z-index: 2;
}
#on_background {
  background-color: var(--pink);
  grid-area: 1 / 1 / 1 / 1;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  margin:0;

}
.win_background {
  background-image: var(--rainbow-cycle) !important;
  background-size: 400% 100%;
	animation: picross_gradient 5s linear infinite;
}

@keyframes picross_gradient {
	0% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
#controls button {
  border: 1px solid var(--charcoal-40);
  border-radius: 8px;
  padding: 12px 16px;
  background-color: var(--mountain-dark);
  background-image: radial-gradient(75% 25% at 50% 95%, rgba(255, 255, 255, .2), transparent);
  color: #ffffff;
  box-shadow:
    inset 0 0 2px 1px rgba(255, 255, 255, .2),
    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  font-family: 'Lexend Deca', verdana, sans-serif;
font-size:1.2em;
font-weight: 500;
  margin-right: .5em;
}
#controls button:hover {
  box-shadow:
    inset 0 0 2px 2px rgba(255, 255, 255, .4),rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
#controls button:active {
  border-color: var(--charcoal-40);
    transform: scale(.96);
    background-color: var(--periwinkle);
}
#controls button[disabled] {
  opacity: 0.5;
  pointer-events: none;
} 
#controls button:has(+select) {
   border-radius: 8px 0px 0px 8px;
  margin-right: 0px;
}
#controls select {
  appearance: none;
  border: 1px solid var(--charcoal-40);
  border-radius: 0px 8px 8px 0px;
  border-left:none;
  padding: 12px 16px;
  background-color: var(--yellow);
  background-image: radial-gradient(75% 25% at 50% 95%, rgba(255, 255, 255, .2), transparent);
  color: var(--charcoal);
  box-shadow:
    inset 0 0 2px 1px rgba(255, 255, 255, .2),
    rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  font-family: 'Lexend Deca', verdana, sans-serif;
font-size:1.2em;
font-weight: 500;
  margin-right: .5em;
}

#controls {
  display: flex;
}

/* Section:
* ----------------------------------------------------------
* Experimental
* ----------------------------------------------------------
*/
.spotlight {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: stretch;
  align-content: flex-start;
}

.spotlight-card {
  width: 50%;
  aspect-ratio: 4 / 3;

  display: flex;
  justify-content: center;
  align-items: center;
    transition: 0.3s;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%), url("/img/Power.jpg");
  background-size: cover;
  box-sizing: border-box;
  background-clip: content-box;
  padding: 5px;
}

.spotlight-card > h2 {
  text-shadow: 3px 3px rgba(255,226,224,1), 0px 0px 60px var(--black);
}

.spotlight-card > a:link {
  text-decoration: none;
}

.spotlight-card > a:visited {
  text-decoration: none;
}

.spotlight-card > a:hover {
  text-decoration: underline;
}

.spotlight-card > a:active {
  text-decoration: underline;
}

.spotlight-card:hover {
 background-color: #cccccc; 
}

.spotlight-bar {
  width: 100%;

  
}