/*
Template stylesheet for https://rigelatin.net/galaxy/template/
22.03.2025
version 1.00
*/
:root {
    /* colors */
    --text: #004D40;
    --background: #F3F8F9;
    --accent-dark: #4A8B8C;
    --accent: #74B6A5;
    --accent-light: #A1D9E1;

    /* fonts */
    --font: 10px/1.3 Arial, sans-serif;
    --header-font: bold 8rem/.9 "Arial Narrow", sans-serif;
    --headertwo: bold 1.3rem/.9 monospace;
    
    --basefont: sans-serif;
    --titlefont: monospace;
    --text-size: 16px;

    /* gallery styling */
    --minimum-img-width: 150px;
    --maximum-img-width: 500px;
    --maximum-columns: 3;
    --image-background: #fff;
    --column-gap: var(--spacing);

    /* misc styling */
    --max-width: 800px;
    --spacing: 15px;
    --base-size: 1em;
    --border-radius: 4px;
    --underline: wavy var(--accent-light);
    --border: dashed var(--accent) 1px;

    /* calculations - don't worry about this */
    --halfspacing: calc(var(--spacing) / 2);
    --doublespacing: calc(var(--spacing) * 2);
}

[data-theme="dark"] {
		--background: #3d3d3d;
		--text: #F3F8F9;
		--accent: #8cc4a8;
		--accent-dark: #ABD6C4;
		--accent-light: #5FA390;
		}

/*
GENERAL STRUCTURAL
Probably don't mess with these
*/

body
{
overflow-x: hidden;
overflow-y: scroll;
padding: var(--spacing) 5%;
margin: 0;
box-sizing: border-box;
min-height: 100vh;
background-color: var(--background);
color: var(--text);
font-family: var(--basefont);
font-size: var(--text-size);
line-height: 1.5em;
text-align: center;
}

main , header, footer {
max-width: var(--max-width);
margin: 0 auto;
}

/*
GENERAL DESIGN
Do mess with these
*/

*
{
-webkit-transition: all 0.15s ease-out; 
-moz-transition: all 0.15s ease-out; 
-o-transition: all 0.15s ease-out; 
transition: all 0.15s ease-out;
-ms-overflow-style: none;
box-decoration-break:clone
}


a {
    color: var(--accent);
    text-decoration: underline var(--underline);
    text-underline-offset:.15em
}

a:hover { color: var(--accent-dark); }

nav { padding-top: var(--spacing) }

nav a {
    padding: 5px;
    margin: 5px;
}

header, footer {
    max-width: var(--max-width);
    margin: 0 auto;
}

header {
    text-align: center;
    padding-bottom: var(--spacing);
    width: 60vw;
    margin: 3.5rem auto;
    margin-bottom: .5rem;
}

footer {
    text-align: center;
    font-size: .9em;
    margin: var(--spacing) auto;
    width: 60vw;
}

mark {
    background-color: var(--accent-light);
    padding: 1px 2px;
    border-radius:var(--border-radius)
}

code {
    font-size:.9em;
    padding:1px 3px;
    font-family:monospace;
    color:var(--accent-dark)
}

/*
HEADER
These are all design, edit without fear.
*/

h1,
h2,
h3,
h4 {
    font-family: var(--titlefont);
    margin: 1.5em auto;
    text-align: center;
    line-height: 1.3em;
}

h1 {
    font-size: 2em;
}

h1 a {
      text-decoration: none;
      color:var(--accent);
    }

h1:has(+ nav) {
    margin-bottom: var(--halfspacing)
}

h2 {
    font-size: 1.5em;
    margin: 1em auto;
    color: var(--accent);
}

hr {
    width: 100%;
    border: none;
}

/* dividing lines between areas */
hr::after,
nav::after,
footer::before {
    content: "/a0 /a0";
    color: var(--background);
    text-align-last: justify;
    width: 50%;
    margin: var(--spacing) auto;
    display: table;
    text-decoration: underline var(--underline); 
    text-decoration-thickness: .1em
}

/*
CHARACTER PAGE ITEMS - STRUCTURAL
The meat of how it works. Only edit if you know what you're doing
*/

.wrapper
{
display: flex;
flex-wrap: wrap;
}

.wrapper div
{
max-width: min-content;
}

.wrapper div img
{
width: 7rem;
height: 7rem;
}

/* CHARACTER PAGE ITEMS - DESIGN
Have fun editing fonts, sizes, colors, etc.
*/

.wrapper
{
margin: 0 auto;
justify-content: center; /* This governs how the last line of characters will be handled if there is an uneven number of items. Look up the specifications for this value for more options */
}

.wrapper div *
{
margin: .2em;
font-weight: normal;
}

.wrapper div
{
margin: 0 2rem 2rem;
}

.wrapper div img
{
border-radius: 10rem; /* Remove if you want the character images to be square instead */
border: .5rem solid var(--accent);
margin-bottom: 1rem;
/* box-shadow: 0rem .7rem .3rem var(--accent-dark), 0 0 .5rem var(--accent); */
}

.wrapper div h2
{
text-transform: uppercase;
font: var(--headertwo);
margin-bottom: .25rem;
}

.wrapper div h3
{
text-transform: uppercase;
font-family: var(--basefont);
font-size: .8rem;
opacity: .75;
/* text-shadow: .1rem .1rem .1rem #000; */
}

.header-description div {
  margin: 5em;
}

/* RESPONSIVITY
Better stuff for phones etc.


@media all and (max-width: 980px) {
:root
{ font: 7px/1.3 Arial, sans-serif; }

.wrapper { width: 100vw; }
}

*/

/* CREDIT LINK
Do not edit below this line:
*/

#credit
{
background-color: var(--background);
padding: .5rem 1rem;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: .8em;
text-shadow: none;
}

#credit:hover
{
background-color: #fff;
color: #000;
}

/* Thank you! */

/* added from main stylesheet */

#to-top {
    display: block;
		position: fixed;
		bottom: .5em;
		right: .5em;
		background: var(--background);
		padding: var(--doublespacing);
		border-top-left-radius: 30px;
		font-size: 3em;
}
#to-top a {
  text-decoration: none;
}
#to-top a:hover {
  color: var(--accent-dark);
}

/*style dark mode toggle*/
.toggle-switch {
  position: absolute;
  right: 3em;
  width: 60px;
}

.toggle-switch label {
  position: absolute;
  width: 100%;
  height: 37px;
  background-color: var(--accent);
  border-radius: 50px;
  cursor: pointer;
}

 .toggle-switch input {
  position: absolute;
  display: none;
}

.slider {
  position: absolute;
  right:.1em;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  transition: 0.3s;
}

.slider:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 10px -4px 0px 0px var(--background);
  background-color: var(--accent);
  transition: 0.3s;
}

input:checked ~ .slider {
  background-color: var(--accent);
}

input:checked ~ .slider::before {
  transform: translateX(22px);
  background-color: var(--background);
  box-shadow: none;
}