/* ============================================================
   PokéGallery — layout.css
   Base layout, typography, and page-shell styling.
   ============================================================ */

/* Imports the Google Fonts used throughout the website.
   Press Start 2P is used for Pokémon-style headings and
   Nunito is used for normal body text. */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Nunito:wght@400;600;700;800&display=swap'); 
 
/* Creates reusable colour, font, and styling variables.
   These variables make it easier to keep the same colours
   and fonts consistent across the whole website. */
:root { 
    --poke-red:     #EE1515; 
    --poke-red-dark:#B80F0F; 
    --poke-blue:    #2A75BB; 
    --poke-yellow:  #FFCB05; 
    --ink:          #22262B; 
    --ink-soft:     #4A5058; 
    --paper:        #FFFDF7; 
    --card:         #FFFFFF; 
    --line:         #E7E1D3; 
 
    --font-display: 'Press Start 2P', cursive; 
    --font-body: 'Nunito', -apple-system, Segoe UI, Roboto, sans-serif; 
 
    /* Sets the default red accent colour used on pages
       that do not have their own Pokémon type theme. */
    --accent:       var(--poke-red); 
    --accent-dark:  var(--poke-red-dark); 
    --accent-glow:  rgba(238, 21, 21, 0.30); 
} 
 
/* Changes the accent colours when the page uses the Fire theme.
   This makes Fire pages use orange/red colours instead of
   the default red. */
body.theme-fire { 
    --accent:      #EE5A24; 
    --accent-dark: #C23F14; 
    --accent-glow: rgba(238, 90, 36, 0.32); 
} 
 
/* Changes the accent colours when the page uses the Water theme.
   This gives the Water page a blue colour scheme. */
body.theme-water { 
    --accent:      #2A75BB; 
    --accent-dark: #1D5A93; 
    --accent-glow: rgba(42, 117, 187, 0.32); 
} 
 
/* Changes the accent colours when the page uses the Grass theme.
   This gives the Grass page a green colour scheme. */
body.theme-grass { 
    --accent:      #3FA129; 
    --accent-dark: #2C7A1C; 
    --accent-glow: rgba(63, 161, 41, 0.32); 
} 
 
/* Changes the accent colours when the page uses the Normal theme.
   This gives the Normal page a yellow/olive colour scheme. */
body.theme-normal { 
    --accent:      #A8A25A; 
    --accent-dark: #857E3F; 
    --accent-glow: rgba(168, 162, 90, 0.32); 
} 
 
/* Makes the width and height of elements include their padding
   and borders, making sizing easier to control. */
* { box-sizing: border-box; } 
 
/* Removes the browser's default page spacing and sets the main
   background colour, text colour, font, size, and line spacing. */
html, body { 
    margin: 0; 
    padding: 0; 
    background: var(--paper); 
    color: var(--ink); 
    font-family: var(--font-body); 
    font-size: 18px; 
    line-height: 1.65; 
} 
 
/* Controls the main width of the website content.
   It centres the content and adds spacing around it. */
.wrapper { 
    max-width: 1240px; 
    margin: 0 auto; 
    padding: 0 28px 50px; 
} 
 
/* --- Logo & title band ------------------------------------- */ 
 
/* Controls the layout of the logo and website title.
   It centres them, adds space between them, and allows them
   to move onto another line on smaller screens. */
.brand { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 22px; 
    padding: 26px 0 8px; 
    flex-wrap: wrap; 
} 
 
/* Controls the container around the logo.
   Position relative allows the glowing effect to be positioned
   around the logo. */
.logo { 
    line-height: 0; 
    position: relative; 
} 
 
/* Creates a glowing circular effect behind the logo.
   The glow uses the current page's accent colour and is animated. */
.logo::before { 
    content: ""; 
    position: absolute; 
    inset: -18px; 
    border-radius: 50%; 
    background: radial-gradient(circle, var(--accent-glow), transparent 70%); 
    animation: logo-pulse 2.6s ease-in-out infinite; 
    z-index: -1; 
} 
 
/* Creates the animation used for the logo glow.
   The glow becomes smaller and larger repeatedly. */
@keyframes logo-pulse { 
    0%, 100% { transform: scale(0.92); opacity: 0.7; } 
    50%      { transform: scale(1.15); opacity: 1; } 
} 
 
/* Turns off the logo glow animation for users who have
   reduced motion enabled in their accessibility settings. */
@media (prefers-reduced-motion: reduce) { 
    .logo::before { animation: none; } 
} 
 
/* Controls the Pokémon logo image size and animation.
   It makes the logo 130px square, spins it continuously,
   and adds a shadow underneath it. */
.logo img { 
    width: 130px; 
    height: 130px; 
    animation: pokeball-spin 3.5s linear infinite; 
    transform-origin: center center; 
    filter: drop-shadow(0 6px 10px rgba(34, 38, 43, 0.28)); 
} 
 
 
/* Turns off the logo spinning animation for users who have
   reduced motion enabled in their accessibility settings. */
@media (prefers-reduced-motion: reduce) { 
    .logo img { 
        animation: none; 
    } 
} 
 
/* Centres the website title and removes the bottom margin. */
.top-title { 
    text-align: center; 
    margin-bottom: 0; 
} 
 
/* Controls the main website heading.
   It uses the Pokémon-style font, changes the size and colour,
   adds spacing, and gives the text a dark shadow. */
.top-title h1 { 
    font-family: var(--font-display); 
    font-size: 2.6rem; 
    color: var(--accent); 
    letter-spacing: 2px; 
    text-shadow: 3px 3px 0 var(--ink); 
    margin: 0; 
    transition: color 0.3s ease; 
} 
 
/* --- Content "cards" ---------------------------------------- */ 
 
/* Creates the main card/box style used for sections of content.
   It adds a white background, border, rounded corners, spacing,
   a coloured left border, and a subtle shadow. */
.box { 
    background: var(--card); 
    border: 1px solid var(--line); 
    border-left: 8px solid var(--accent); 
    border-radius: 10px; 
    padding: 38px 44px; 
    margin-bottom: 30px; 
    box-shadow: 0 2px 6px rgba(34, 38, 43, 0.06); 
    transition: border-color 0.3s ease; 
} 
 
/* Styles the main section headings inside content boxes.
   It uses the Pokémon font, increases the size, adds spacing,
   and places a yellow dotted line underneath the heading. */
.box.main h2 { 
    font-family: var(--font-display); 
    font-size: 1.7rem; 
    color: var(--ink); 
    line-height: 1.7; 
    margin-top: 0; 
    padding-bottom: 18px; 
    border-bottom: 3px dotted var(--poke-yellow); 
} 
 
/* Styles smaller headings inside the main content boxes.
   It makes them bold and uses the current Pokémon type's
   darker accent colour. */
.box.main h3 { 
    font-family: var(--font-body); 
    font-weight: 800; 
    font-size: 1.15rem; 
    color: var(--accent-dark); 
    margin: 24px 0 10px; 
} 
 
/* Styles the footer box.
   It centres the text, gives it a dark background, changes
   the text colour, and removes the coloured left border. */
.box.footer { 
    text-align: center; 
    background: var(--ink); 
    color: var(--paper); 
    border-left: none; 
    font-size: 1rem; 
    letter-spacing: 0.5px; 
    padding: 20px; 
} 
 
/* Changes all paragraph text to the softer dark-grey colour
   so it is easier to read against the light background. */
p { color: var(--ink-soft); } 
 
/* Sets the default colour and removes the underline from links. */
a { color: var(--poke-blue); text-decoration: none; } 

/* Changes links to red and adds an underline when the user
   moves their mouse over them. */
a:hover { color: var(--poke-red); text-decoration: underline; } 
 
/* --- Pokéball-style bullets ---------------------------------- 
   Used for any plain list inside a .box.main so lists read as 
   part of the Pokédex theme instead of generic browser bullets. 
------------------------------------------------------------- */ 
 
/* Removes the browser's normal bullet points from lists inside
   the main content box and removes the default left padding. */
.box.main ul.text { 
    list-style: none; 
    padding-left: 0; 
    margin: 16px 0; 
} 
 
/* Controls the appearance and spacing of each list item.
   Extra left padding makes room for the custom Pokéball bullet. */
.box.main ul.text li { 
    position: relative; 
    padding-left: 30px; 
    margin-bottom: 10px; 
    color: var(--ink-soft); 
} 
 
/* Creates the top-level Pokéball bullet before each list item.
   It uses red, black, and white sections to resemble a Pokéball. */
.box.main ul.text li::before { 
    content: ""; 
    position: absolute; 
    left: 0; 
    top: 4px; 
    width: 16px; 
    height: 16px; 
    border-radius: 50%; 
    background: 
        linear-gradient(var(--poke-red) 0 47%, var(--ink) 47% 53%, #fff 53% 100%); 
    box-shadow: inset 0 0 0 1px var(--ink); 
} 
 
/* Creates the small white centre circle inside each custom
   Pokéball bullet to make it look more realistic. */
.box.main ul.text li::after { 
    content: ""; 
    position: absolute; 
    left: 6px; 
    top: 10px; 
    width: 4px; 
    height: 4px; 
    border-radius: 50%; 
    background: #fff; 
    box-shadow: inset 0 0 0 1px var(--ink); 
} 
 
/* --- Responsive images ---------------------------------------*/ 
 
/* Makes images responsive so they cannot become wider than
   their container and keeps their original proportions. */
.responsive { 
    max-width: 100%; 
    height: auto; 
    display: block; 
} 
 
/* Changes the appearance of inline code.
   It gives code a light background, rounded corners, padding,
   and a slightly smaller font size. */
code { 
    background: #F1EEE3; 
    border-radius: 4px; 
    padding: 1px 6px; 
    font-size: 0.9em; 
} 
 
/* Applies different styling when the screen is 600px wide
   or smaller, making the website more suitable for phones. */
@media (max-width: 600px) { 

    /* Reduces the padding inside content boxes on small screens. */
    .box { padding: 22px 20px; } 

    /* Makes the main website title smaller on mobile devices. */
    .top-title h1 { font-size: 1.6rem; } 

    /* Makes the content headings smaller on mobile devices. */
    .box.main h2 { font-size: 1.3rem; } 

    /* Makes the logo smaller so it fits better on small screens. */
    .logo img { width: 70px; height: 70px; } 

    /* Reduces the spacing around the logo and title on mobile. */
    .brand { gap: 12px; padding: 18px 0 6px; } 
}