/*
Template stylesheet for https://rigelatin.net/galaxy/template/
22.03.2025
version 1.00
*/

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

body
{
margin: 0;
box-sizing: border-box;
min-height: 100vh;
}

/*
GENERAL DESIGN
Do mess with these
*/

:root
{
font: 10px/1.3 Arial, sans-serif;
}

*
{
-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;
}


body
{
background-color: #e0e7ef;
color: #3d5365;
text-align: center;
}

a
{
color: #3d5365;
}

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

header
{
margin: 3rem auto;
width: 70vw;
font-size: 1.4rem;
}

header h1
{
font: bold 8rem/.9 "Arial Narrow", sans-serif;
margin: 0 0 2rem;
}

/*
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: 10rem;
height: 10rem;
}

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

.wrapper
{
width: 70vw;
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: 0;
font-weight: normal;
}

.wrapper div
{
margin: 0 2.75rem 3rem;
}

.wrapper div img
{
border-radius: 10rem; /* Remove if you want the character images to be square instead */
border: 1rem solid rgba(255,255,255,.2);
margin-bottom: 1rem;
background: url('images/roadborder.png');
}

.wrapper div h2
{
text-transform: uppercase;
font: bold 2rem/.9 "Arial Narrow", sans-serif;
color:#bf34a0; 
margin-bottom: .25rem;
}

.wrapper div h3
{
text-transform: uppercase;
font-family: "Arial Narrow";
color:#2383ad;
font-size: 1rem;
letter-spacing: .05rem;
opacity: .75;
}


/* 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
{
position: fixed;
bottom: 0;
right: 2vw;
background-color: #000;
padding: .5rem 1rem;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
text-shadow: none;
}

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

/* Thank you! */