/* 
    USE FOR REFERENCE:

    TYPES OF SELECTORS

    ID Selector (#) -- targets an element with an ID:

        <div id="my-id">    ---> HTML

        #my-id { }          ---> CSS

    Class Selector(.) -- targets an element with a class:

        <div class="my-class">  ---> HTML

        .my-class { }           ---> CSS

    Element Selector -- targets an element based on type:

        ***NOTE: can be done with any element tag!

        <p ANY TEXT HERE />     ---> HTML

        p { }                   ---> CSS

    Attribute Selector -- targets an element based on attribute:

        type = "text"

        input[type = "text"] { }
    
    Descendant Selector -- targets an element that is a descendant of another specific element:

        div p {
            STYLES FOR ALL <p> ELEMENTS THAT ARE DESCENDANTS OF <div> ELEMENTS
        }
    
    Child Selector -- targets an element that is a direct child of another specific element:

        div > p {
            STYLES FOR ALL <p> ELEMENTS THAT ARE DIRECT CHILDREN OF <div> ELEMENTS
        }

    Adjacent Sibling Selector -- targets an element that is directly preceded by another specific element:

        h2 + p {
            STYLES FOR <p> ELEMENTS THAT ARE IMMEDIATELY PRECEDED BY <h2> ELEMENTS
        }

    General Sibling Selector -- targets elements that are siblings of a specific element: 

        h2 ~ p {
            STYLES FOR <p> ELEMENTS THAT ARE SIBLINGS OF <h2> ELEMENTS
        }

    AND MORE...
*/

* { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for theme change */
}


:root {
    /* 
    
        These are the colors I am using for my website!

    */
    --secondary-bg: #eccada;
    --primary-bg: #eb9aad;

    --shadow-color: #e7768d;
    --link-color: #e7768d;
    --header-color: rgb(80, 52, 52);

    --hover-link: rgb(80, 52, 52);

    --lightBlue: #b2ccd6;
    --mediumBlue: #8ba1d3;
    
    /* --button-bg: #ae97cf;
    --button-shadow: #5d5483; */
    --button-bg: #b2ccd6;
    --button-shadow: #8ba1d3;
    
    --lightGreen: #97c9bb;

    --lightYellow: #fffed4;
    --fadedGold: #f7d795;

    --grey: #dfe0ec;

    --red: #af4646;

    --blackBlue: #2e2f42;
    --black: #1e2035;

    --tempBrown: #896d5e;
}

body.dark-mode {
    --secondary-bg: #5d5483;
    --primary-bg: #2e2f42;
    --shadow-color: #ae97cf;
    --link-color:  #393d80;

    --header-color: #dfe0ec;
    --hover-link: #2e2f42;

    --lightBlue: #b2ccd6;
    --mediumBlue: #8ba1d3;
    
    --button-bg: #393d80;
    --button-shadow: #202020;

    --lightGreen: #97c9bb;

    --lightYellow: #639c8c;
    --fadedGold: #f7d795;

    --grey: #dfe0ec;

    --red: #af4646;

    --blackBlue: #2e2f42;
    --black: #1e2035;

    --tempBrown: #896d5e;
}

/* 
    BEGINNING STYLE FOR HOMEPAGE
*/

body {
    font-family: 'Tinos', serif;
}

.homepage {
    background-color: var(--primary-bg);
}


.navbar {
    background: var(--secondary-bg);
    height: 80px;
    width: auto;    

    border-radius: 15px;
    border: 5px solid var(--primary-bg);
    box-shadow: 5px 5px 0px 2px var(--shadow-color);; /* red-tinted shadow */

    margin-left: 12vh;
    margin-right: 12vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
}

.navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    z-index: 0;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 50px;
}

.navbar-logo {
    
    background-color: #ff8177;
    background-size: 100%;
    /*-webkit-background-clip: text;
    -moz-background-clip: text; */
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    font-size: 2 rem;
}

.navbar-menu {
    display: flex;
    align-items: center;
    list-style: none;
    text-align: center;
}

.navbar-item {
    height: 50px;
    width: 120px;
}

.navbar-item:hover {
    /* background: var(--shadow-color); */
    transition: all 0.5s ease;
    border-radius: 80px;
}

.navbar-links {
    color: #fff;
    display:flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 1rem;
    height: 100%;
}

.navbar-links:hover {
    color: var(--hover-link);
    transition: all 0.5s ease; 
}

.name-container {
    /* Dimensions of this container */
    width: auto;
    height: auto;

    /* Specify how the border of this container looks like */
    border: 5px solid var(--secondary-bg);
    box-shadow: 5px 5px 0px 2px var(--shadow-color);; /* red-tinted shadow */

    border-radius: 15px;
    padding: 25px;
    margin: 0 auto;    
    margin-top: 40px;
    margin-left: 14vw;
    margin-right: 14vw;
    justify-content: center;
    align-items: center;
    font-size: 1.5vw;
    color: var(--header-color);
}

.name {
    font-size: 5vw;
    font-family: 'Abril Fatface', cursive;
}

.pronouns {
    font-size: 3vw;
}
.name,
.pronouns {
    color: var(--header-color);
    text-align: center;
    display: inline-block;
}

/* --- NEW STYLES FOR ADDED SECTIONS --- */

.section-title {
    font-family: 'Abril Fatface', cursive;
    font-size: 3rem;
    margin-left: 8vw;
    color: var(--header-color);
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Projects Section */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    text-align: left;
    margin-left: 8vw;
    margin-right: 8vw;
}

.project-card {
    background-color: var(--secondary-bg);
    padding: 25px;
    border-radius: 10px;

    border: 3px solid var(--primary-bg);
    box-shadow: 4px 4px 0px 1px var(--shadow-color);
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 6px 6px 0px 1px var(--shadow-color);
}

.project-title {
    font-family: 'Abril Fatface', cursive;
    font-size: 1.8rem;
    color: var(--header-color);
    margin-bottom: 10px;
}

.project-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.project-link {
    display: inline-block;
    background-color: var(--link-color);
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

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

/* About Me & Blog Section */
.about-me-text,
.blog-excerpt,
.contact-text {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto; /* Center the text block */
    text-align: left;
    color: var(--header-color);
}

.blog-post {
    text-align: left;
    border-left: 4px solid var(--secondary-bg);
    padding-left: 20px;
    margin-left: 12vh;
    margin-right: 12vh;
}

.blog-title {
    font-family: 'Abril Fatface', cursive;
    color: var(--header-color);
    font-size: 1.8rem;
}

.blog-meta {
    font-style: italic;
    color: var(--mediumBlue);
    margin: 5px 0 15px 0;
}

/* Contact Section */
.contact-text {
    text-align: center;
    margin-bottom: 30px;
}

.contact-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.contact-link-item {
    background-color: var(--button-bg);
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 10px;
    box-shadow: 4px 4px 0px 1px var(--button-shadow);
    transition: all 0.3s ease;
}

.contact-link-item:hover {
    background-color: var(--button-shadow);
    transform: translateY(-3px) translateX(-3px);
    box-shadow: 7px 7px 0px 1px var(--button-shadow);
}

/* === STYLE FOR THE THEME TOGGLE BUTTON === */

#theme-toggle {
  padding: 8px 16px;
  background-color: var(--primary-bg); /* Uses purple in light mode, green in dark */
  color: white;
  border: none;
  border-radius: 8px;
  font-family: 'Tinos', serif;
  font-weight: bold;
  cursor: pointer;
  
  /* This shadow is key to matching your site's style! */
  box-shadow: 3px 3px 0 0 var(--shadow-color); 
  
  /* Smooth transitions for the hover effect */
  transition: all 0.2s ease;
}

#theme-toggle:hover {
  background-color: var(--button-hover-bg);
  
  /* Makes the button "lift up" on hover */
  transform: translateY(-2px); 
  box-shadow: 5px 5px 0 0 var(--shadow-color);
}
/* 
    ENDING STYLE FOR HOMEPAGE
*/