/* MAIN */
:root {
  --background: #b3ad95;
  --foreground: #faf8df;
  --bottomshadow: #e5dac6;
  --maintxt: #533e0f;
  --alttxt: #9c8d70;

  /* 
    COLOR NOTE
    -------------
    all of the colors below are associated with a star sign in-game.
    each sign is listed next to its associated color variable. feel 
    free to copy how it is in the game or use whatever color you want!
    */
  --gray: #adac8f; /* aries */
  --green: #6fbe65; /* taurus */
  --skyblue: #858fde; /* gemini */
  --red: #f49387; /* cancer */
  --yellowgreen: #b2cf3d; /* leo */
  --lavender: #ac99e4; /* virgo */
  --teal: #7dc49c; /* libra */
  --dandelion: #d5a81d; /* scorpio */
  --cyan: #6abace; /* sagittarius */
  --brickred: #e38570; /* capricorn */
  --pink: #cb82d0; /* aquarius */
  --ocean: #6aaac7; /* pisces */
}

@font-face {
  font-family: dialogue;
  src: url(/layouts/acnhpassport/FOT-RodinBokutoh\ Pro\ EB.otf);
}

@font-face {
  font-family: system;
  src: url(/layouts/acnhpassport/FOT-Seurat\ Pro\ B.otf);
}

body {
  margin-left: auto;
  margin-right: auto;
  width: 700px;
  font-family: system;
  background-color: var(--background);
}

/* GRID */
.grid-container {
  display: grid;
  grid-template-areas:
    "title title title title"
    "photo content content content"
    "footer footer footer footer";
  background-color: var(--foreground);
  border-radius: 25px;
}

.grid-container > div {
  border: 1px black;
}

.g1 {
  grid-area: title;
  text-align: center;
  color: var(--dandelion);
}

.g2 {
  grid-area: photo;
  text-align: center;
  padding: 20px;
  padding-top: 70px;
  background-color: var(--dandelion);

}

.g3 {
  grid-area: content;
  padding: 20px;
  background-color: var(--dandelion);
}

.g2, .g3 {
  background-image: url("leafbg.png");
  background-size: 50px;
}

.g4 {
  grid-area: footer;
  padding-top: 15px;
  padding-left: 40px;
}

/* DESIGN */

/* passport photo */
#photo {
  border-radius: 10%;
  margin-top: 10px;
}

#photoborder {
  border-radius: 10%;
  background-color: var(--foreground);
  margin-left: auto;
  margin-right: auto;
}

/* EXTRA */
.icon {
  width: 50px;
  vertical-align: middle;
}

.speech {
  width: 300px;
  /* make the width bigger/smaller to accomodate your text */
  background: var(--foreground);
  padding: 10px;
  text-align: center;
  position: relative;
  border-radius: 30px;
}

hr {
  height: 3px;
  border-width: 0px;
  background-color: var(--foreground);
}

.maintxt {
  color: var(--maintxt);
}

.alttxt {
  color: var(--alttxt);
}

/* --- LINKS CONTAINER (PERFECTLY MATCHES PASSPORT OUTER SHELL) --- */
.links-container {
    display: grid;
    /* Use the same background color and rounding as the passport (.grid-container) */
    background-color: var(--foreground);
    border-radius: 25px;
    margin-top: 40px; /* Space below the main passport */
    
    /* Apply the leaf background pattern */
    background-image: url("leafbg.png");
    background-size: 50px;
}

/* 1. Title Area (Matches .g1 style) */
.links-g1 {
    padding: 20px 0 10px 0;
    text-align: center;
}

.links-g1 h3 {
    /* Title text uses the bold font and Dandelion color */
    color: var(--dandelion);
    font-family: dialogue; 
    font-size: 1.3em;
    margin: 0;
}

/* 2. Main Link Grid (3 columns, full width) */
.links-grid-main {
    display: grid;
    /* This ensures 3 horizontal columns of equal width */
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; /* Space between the link boxes */
    padding: 0px 40px; /* Aligns with passport content padding */
}

.links-grid-main .link-item {
    text-decoration: none; 
    display: block; 
    text-align: center;
}

/* CORRECTION: White/Cream speech bubble style for the 3 links */
.link-speech-bubble {
    /* This is the key change: background is now the passport's main cream/white color */
    background: var(--foreground); 
    
    /* Ensuring the bubble fills the grid cell and sits horizontally */
    display: block; 
    width: 100%; 
    height: 100%;
    
    /* Styling */
    color: var(--maintxt);
    font-family: system;
    padding: 15px 10px;
    border-radius: 30px; /* Highly rounded corners */
    text-align: center;
    font-size: 0.9em;
    border: 1px solid var(--alttxt);
    box-sizing: border-box; /* Important for grid alignment */
}

.links-grid-main .link-item:hover .link-speech-bubble {
    background-color: var(--bottomshadow); /* Subtle hover effect */
}


/* 3. Footer Area (Bottom row for Neocities image and Music Player) */
.links-footer {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    padding: 20px 40px; /* Padding for the entire footer area */
    text-align: center;
    font-family: system;
    color: var(--alttxt);
    font-size: 0.9em;
}

.links-footer .footer-left {
    text-align: left;
}

.links-footer .footer-right {
    text-align: right;
}

.neocities-icon {
    width: 60px; /* Size for the image */
    display: block;
    margin: 0 auto 0 0; /* Align image left */
}

.music-player {
    width: 100%; /* Make the player span the full right column width */
    max-width: 250px; /* Optional: limit the size if it gets too wide */
    display: block;
    margin: 0 0 0 auto; /* Align player right */
}