/* --- APPLY GOOGLE FONT SITE-WIDE --- */
/* Apply VT323 font and larger size to all text */
* {
    font-family: 'VT323', monospace;
    font-size: 18px; /* change this number to whatever you want */
}

nav a {
    font-family: 'VT323', monospace; /* your new font */
    font-size: 1.5rem;               /* make this bigger or smaller as you like */
    font-weight: bold;               /* optional: makes it pop more */
}


/* --- LIGHT MODE --- */
:root {
    --text: dimgrey;
    --border: #00000086;
    --accent: #7c8081;
    --bg: #a7a9d8;
    --gradientTop: rgba(250, 242, 250, 0.55);
    --gradientBottom: rgba(240, 234, 213, 0.6);
}


header {
    background: url(images/aed4a28b-f8cc-4c13-94b9-e0969c68faec.webp); /* replace with your header banner if you have one */
}

header {
    width: 100%;
    height: 200px;          /* keep your header height */
    display: flex;          /* enables flexbox */
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically */
    background-color: transparent; /* or keep your header color */
    border: 2px ridge var(--border); /* optional */
    border-radius: 5px;      /* optional */
}

header img {
    max-width: 100%;   /* makes sure it doesn’t overflow the header */
    max-height: 100%; /* fits within header height */
    height: auto;     /* maintains aspect ratio */
}

.site-footer {
    width: 100%;
    height: 120px; /* same as header */
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-image: url(images/93fef742-edcf-4d97-8485-53d43fe80cd4.webp);
    background-size: cover;
    background-position: center;

    border: 2px ridge var(--border);
    border-radius: 5px;

    background-color: rgba(255, 255, 255, 0.6); /* same translucent feel */
}


/* --- BASIC STYLING --- */
* {
    box-sizing: border-box;
}

body {
    padding: 10px;
    font-family: 'MS PGothic', sans-serif;
    color: var(--text);
    background-color: var(--gradientTop);
    background-image: url('images/pinkertile.png'); /* your repeating background */
}

.container {
    max-width: 55rem;
    margin: 5vw auto 12px auto;
    border: 6px ridge var(--border);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    gap: 5px;
    background-color: var(--gradientBottom);
}

/* --- COLUMN WIDTHS --- */
.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }

/* --- HEADER --- */
header {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 120px;
    border: 2px ridge var(--border);
    border-radius: 5px;
    position: relative;
}
header span {
    font-size: 2.5rem;
    position: absolute;
    bottom: 0;
    right: 10px;
    margin: 10px;
    font-weight: bold;
    text-shadow: 1px 1px var(--text), -1px 1px var(--text), 1px -1px var(--accent), -1px -1px var(--accent);
    color: var(--gradientTop);
}

/* --- NAVIGATION --- */
nav {
    border: 2px ridge var(--border);
    border-radius: 5px;
    padding: 5px;
    background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}
nav div {
    text-align: center;
    font-size: 1.25rem;
    margin: 5px 5px 10px 5px;
}
nav a {
    display: block;
    margin: 5px;
    background: linear-gradient(to right,var(--bg),var(--gradientBottom));
    border-radius: 5px;
    padding: 2px 7px;
    text-decoration: none;
    color: var(--text);
}
nav a:hover, nav a:focus {
    background: linear-gradient(to right,var(--bg), var(--gradientBottom), var(--gradientTop));
}

/* --- SECTIONS --- */
section {
    border: 2px ridge var(--border);
    border-radius: 5px;
    background: linear-gradient(var(--gradientTop),var(--gradientBottom));
    padding: 5px;
}
section img {
    width: 80%;
    max-width: 100px;
    height: auto;
}


section.half h1,
section.half h2 {
    flex: 1 1 100%;
}
.masked-border {
    display: block;
    margin: 0 auto;
    width: 150px; 
    height: auto;

    -webkit-mask-image: url(https://i.imgur.com/1PjqQS6.png);
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    mask-image: url(https://i.imgur.com/1PjqQS6.png);
    mask-size: 200%;
    mask-repeat: no-repeat;
    mask-position: center;
}


/* --- FOOTER --- */
footer {
    width: 100%;
    height: 200px; /* same height as header */
    display: flex;
    justify-content: center; /* centers image horizontally */
    align-items: center;     /* centers image vertically */
    border: 2px ridge var(--border); /* optional, matches header border */
    border-radius: 5px;     /* optional, matches header */
    margin-top: 10px;       /* space above footer */
}

footer img {
    max-width: 100%;  /* same as header */
    max-height: 100%; 
    height: 100%;     /* keeps aspect ratio */
}

/* --- HEADINGS & TEXT --- */
h1, h2, h3, h4, h5, h6, p {
    margin: 5px;
    line-height: 1;
}
h1 {
    font-size: 1.4rem;
    letter-spacing: 1px;
    font-weight: normal;
    text-align: center;
    padding-bottom: .5px;
}
h2 { font-size: 1.25rem; font-weight: normal; text-align: center; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; color: var(--accent); padding-left: 5px; }

img { max-width: 100%; }
pre { overflow-x: auto; }
a:hover, a:focus { font-style: italic; }
a:visited { color: var(--accent); }

/*------- ADVANCED STYLING -----------*/

.section-images {
    display: flex;           /* line up images horizontally */
    justify-content: center; /* center the row */
    gap: 10px;               /* space between images */
    flex-wrap: nowrap;       /* keep them in one row */
    margin-top: 10px;        /* optional: space above images */
}

.section-images img {
    display: inline-block !important; /* override any previous 'display: block' */
    width: auto !important;           /* override previous widths like 70% */
    max-width: 150px;                 /* set the size you want */
    height: auto;                     /* maintain aspect ratio */
}