/*
============================================================
                      GREETINGS CHLOREO
============================================================
You finally have a style.css and you don't have to do
awful style tags. Yay. The AI wrote chunks of the comments
so if it sounds weird don't blame me.

I've put all the easy-to-change stuff right here at
the top for you. You can change any of the values below
to customize your site.

You don't need to touch anything in the second half
of this file unless you're feeling adventurous!

^ Like that, why did they say it like that, so stupid.
============================================================
*/

/*
============================================================
                1. WEBSITE CUSTOMIZATION
============================================================
*/

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

:root {
  /*
  --------------------------------------
  --FONTS--
  --------------------------------------
  */
  /* Change 'DotGothic16' to another font from Google Fonts if you wanna */
  /* Just make sure to update the @import link at the top of this section. */
  --main-font: "DotGothic16", sans-serif;
  --font-size-normal: 16px;
  --font-size-small: 12px;

  /*
  --------------------------------------
  --COLORS--
  --------------------------------------
  */

  /* Page Background Gradient */
  /* This is the cool gradient for the whole page background. */
  --bg-gradient-top: #362e5c; /* Night sky color */
  --bg-gradient-bottom: #abbfe0; /* Daytime sky color */
  --bg-gradient-breakpoint: 60%;

  /* Text Colors */
  --text-color-dark: #333; /* For text on light backgrounds */
  --text-color-light: #FAF9F6; /* For text on dark backgrounds */

  /* General Link Colors */
  --link-color: #007bff;
  --link-hover-color: #0056b3;

  /*
  --------------------------------------
  --NAVIGATION LINK COLORS (Left Column)--
  --------------------------------------
  These create the colorful gradient effect on your navigation links.
  Each link blends into the next one.
  */
  --nav-color-1: #c9b1ff; /* home */
  --nav-color-2: #ffcaf2; /* about */
  --nav-color-3: #ffb2b1; /* picchers */
  --nav-color-4: #fff3ad; /* neopets */
  --nav-color-5: #bcffbc; /* recipes */
  --nav-color-6: #a2edff; /* fun stuff */
  /* If you add a 7th link, you'd add --nav-color-7: #yourcolor; here */

  /* You can play with these %'s to tweak the gradients on the links */
  --nav-grad-start: 80%;
  --nav-grad-mid: 88%;


  /*
  --------------------------------------
  --MAIN CONTENT "CLOUD" (Center Column)--
  --------------------------------------
  */
  --content-bg-color: #FAF9F6; /* The background of the main content box */
  --content-shadow-color: #FAF9F6; /* The glow effect around the box */

  /*
  --------------------------------------
  --WIDGETS (Under the Cloud)--
  --------------------------------------
  */
  /* Calendar Widget */
  --calendar-bg: white;
  --calendar-border-color: var(--nav-color-6); /* Uses the same color as the last nav link */
  --calendar-header-text: #555;
  --calendar-day-names: #888;
  --calendar-today-bg: var(--nav-color-4); /* Uses the same color as the 'neopets' link */
  --calendar-clock-text: var(--nav-color-1); /* Uses the same color as the 'home' link */

  /* News Widget */
  --news-bg: white;
  --news-border-color: var(--nav-color-2); /* Uses the same color as the 'about' link */

  /*
  --------------------------------------
  --RIGHT COLUMN--
  --------------------------------------
  */
  --right-column-bg: white;
}


/*
============================================================
            2. ADVANCED STYLING BELOW
============================================================
  Try not to break anything.

  Go ALLLLLLL the way to the bottom for styling for your
  content sections.
============================================================
*/

/* --- Universal Styles --- */
/* This applies to *everything* on the page */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* This makes layout math easier */
}

/* --- Body and Background --- */
/* This styles the main page itself */
body {
    font-family: var(--main-font);
    font-weight: 400;
    font-style: normal;
    font-size: var(--font-size-normal);
    line-height: 1.6;
    height: 100vh;
    width: 100vw;
    color: var(--text-color-dark);
    /* The background is a gradient from the bottom color to the top color */
    background: linear-gradient(to top, var(--bg-gradient-bottom) 0%, var(--bg-gradient-bottom) var(--bg-gradient-breakpoint), var(--bg-gradient-top) 100%);
    overflow-x: hidden; /* Prevent horizontal scroll from the moving clouds */
    position: relative; /* Needed for positioning the clouds */
}


/* --- Floating Clouds --- */
/* These styles control the animated clouds in the background */
.cloud {
    position: absolute;
    pointer-events: none; /* So you can click through them */
    z-index: 1; /* Puts them behind the main content */
    background-size: contain;
    background-repeat: no-repeat;
}

/* You can add more cloud SVGs in the 'assets' folder and then */
/* add a new .cloud-shape-X class here. Make sure to also update */
/* the background.js file to include your new cloud shape! */
.cloud-shape-1 {
    background-image: url('assets/cloud1.svg');
}
.cloud-shape-2 {
    background-image: url('assets/cloud2.svg');
}
.cloud-shape-3 {
    background-image: url('assets/cloud3.svg');
}

/* These create the blurry, distant look for the clouds */
.cloud-small {
    filter: blur(1px);
}
.cloud-medium {
    filter: blur(2px);
}
.cloud-large {
    filter: blur(3px);
}

/* --- Basic Text Styles --- */
/* Default styles for headings, paragraphs, and links */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 10px;
    color: var(--text-color-dark);
}

p {
    margin-bottom: 15px;
}

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

a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

/* This is a general button style, but it doesn't look like it's used anywhere yet. */
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--link-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}

.button:hover {
    background-color: var(--link-hover-color);
}

/* --- Main Page Layout --- */
/* These are the main columns for the page: Left, Center, and Right */
.container {
    max-width: 1200px;
    margin: 0 auto; /* Centers the whole layout */
    padding: 20px;
    position: relative;
    z-index: 10; /* Puts the content in front of the clouds */
    display: flex;
    flex-direction: row;
    gap: 3%;
}

/* The three main columns */
.left, .right {
    flex: 1; /* These columns will grow to fill available space */
    height: 100%;
}

.center {
    flex: 0 0 auto; /* This column will not grow or shrink */
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- Left Column (Navigation) --- */
.left {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* --- Right Column (Charms and Visitor Counter) --- */
.right {
    background-color: var(--right-column-bg);
    padding: 12px 0;
}

/* The container for the little charm images */
#charms-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
}

#charms-wrapper img {
    display: block;
    max-width: 100%;
}

/* The visitor counter at the bottom of the right column */
.counter {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-size: var(--font-size-small);
}

/* --- Main Navigation --- */
.main-nav ul {
    position: relative;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 5px;
}

.main-nav a {
    display: block;
    padding: 23px;
    color: #33F; /* A specific blue for the nav text */
    text-decoration: underline;
    text-align: center;
    transition: background-color 0.3s ease;
}

.main-nav a:hover {
    background-color: rgba(255, 255, 255, 0.3); /* A see-through white on hover */
    text-decoration: none;
}

/* 
Navigation Link Gradient Magic 
This code creates the colorful gradient effect on the links.
It uses the --nav-color variables from the customization section at the top.
To add a new link:
   1. Add a new --nav-color-X variable at the top of the file.
   2. Copy the last li:nth-child block below.
   3. Paste it, and change the number to be the next number in the sequence.
   4. Update the --nav-color variables inside your new block.
*/
:root {
    /* You can adjust the nav colors here if you want */
  --nav1: var(--nav-color-1);
  --nav2: var(--nav-color-2);
  --nav3: var(--nav-color-3);
  --nav4: var(--nav-color-4);
  --nav5: var(--nav-color-5);
  --nav6: var(--nav-color-6);
  /* Add a new color after the last one here */

  /* You can play with these %'s to tweak the gradients */
  --grad-start: var(--nav-grad-start);
  --grad-mid: var(--nav-grad-mid);
}

.main-nav li:nth-child(1) a {
  background: linear-gradient(
    to bottom,
    var(--nav1) var(--grad-start),
    var(--nav1) var(--grad-mid),
    var(--nav2) 100%
  );
}
.main-nav li:nth-child(2) a {
  background: linear-gradient(
    to bottom,
    var(--nav2) var(--grad-start),
    var(--nav2) var(--grad-mid),
    var(--nav3) 100%
  );
}
.main-nav li:nth-child(3) a {
  background: linear-gradient(
    to bottom,
    var(--nav3) var(--grad-start),
    var(--nav3) var(--grad-mid),
    var(--nav4) 100%
  );
}
.main-nav li:nth-child(4) a {
  background: linear-gradient(
    to bottom,
    var(--nav4) var(--grad-start),
    var(--nav4) var(--grad-mid),
    var(--nav5) 100%
  );
}
.main-nav li:nth-child(5) a { /* Copy this whole block and then paste a new one, then make it the next # */
  background: linear-gradient(
    to bottom,
    var(--nav5) var(--grad-start), /* Make sure to update the --nav# here too */
    var(--nav5) var(--grad-mid), /* Make sure to update the --nav# here too */
    var(--nav6) 100% /* Make sure to update the --nav# here too */
  );
}
.main-nav li:nth-child(6) a { /* Change the number here to the next number */
  background: var(--nav6); /* Also change the --nav# here to the next number */
}
/* End of link gradients */

/* --- Bottom Widgets (Calendar and News) --- */
.bottom-widgets {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    align-items: flex-start;
}

.widget-calendar {
    width: 215px;
    height: 260px;
    background: var(--calendar-bg);
    border: 2px solid var(--calendar-border-color);
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    user-select: none; /* You can't select the text in the calendar */
}

#clock {
    font-size: 24px;
    font-weight: bold;
    color: var(--calendar-clock-text);
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.calendar-header {
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--calendar-header-text);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.day-name, .day {
    padding: 2px 0;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
}

.day-name {
    font-weight: bold;
    color: var(--calendar-day-names);
}

.day.empty {
    background-color: transparent;
}

.day.today {
    background-color: var(--calendar-today-bg);
    color: var(--text-color-dark);
    border-radius: 50%;
    font-weight: bold;
}

#widget-news {
    width: 325px;
    height: 260px;
    padding: 15px;
    border: 2px solid var(--news-border-color); /* Using a color from the nav */
    border-radius: 5px;
    background: var(--news-bg);
    text-align: center;
    overflow-y: auto; /* Adds a scrollbar if news is too long */
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

#widget-news p {
    margin-bottom: 10px;
}

#widget-news img {
    max-width: 100%;
}

/* --- Center Column --- */
.center-body {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 400px;
    background-color: var(--content-bg-color);
    box-shadow: 0px 0px 10px 10px var(--content-shadow-color);
    padding: 12px 12px;
    margin-top: 10px;
    overflow-y: auto;
}

/* The little section with Aoi the friend :) */
.main-extras {
    display: block;
    text-align: center;
    max-width: 24%;
    font-size: var(--font-size-small);
}

.main-extras #aoi {
    border: 1px solid black;
    border-radius: 10%; 
    width: 100%;
    cursor: grab;
}

.main-extras #aoi:active {
    cursor: grabbing;
}

/* The actual area where your page content (from the /partials/ folder) appears */
#content {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    text-wrap: auto;
}

/* 
Special styles for content inside the #content area. 
You can make more div classes here if you wanna fuck with stuff
Just do "#content .classname" or you can even do "#content a" to change the
default look of links in your content section.
*/
#content .center {
    display: block;
    width: 100%;
    text-align: center;
}