/* =========================================
   1. GENERAL PAGE STYLE
   Controls the overall appearance
   ========================================= */

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f7fa;
    color: #222; 
}

/* =========================================
   HEADER SECTION

   Controls the appearance of the main
   introduction at the top of my website.
   ========================================= */

header {

    /* Centers all text inside the header */
    text-align: center;

    /*
       Creates space inside the header.
       50px = top and bottom
       20px = left and right
    */
    padding: 50px 20px;

    /* Gives the header its dark-blue background */
    background-color: #1f3c5b;

    /* Makes the text inside the header white */
    color: white;
}


/* =========================================
   MAIN WEBSITE TITLE
   ========================================= */

header h1 {

    /* Removes the browser's default margin */
    margin: 0;

    /* Makes my name the largest text in the header */
    font-size: 40px;
}


/* =========================================
   PROFESSIONAL ROLES

   Displays my three professional roles
   together on one line.
   ========================================= */

.header-roles {

    /* Controls the size of the professional roles */
    font-size: 18px;

    /* Adds space between my name and the roles */
    margin-top: 15px;

    /* Removes unnecessary space below the roles */
    margin-bottom: 0;

    /* Gives the text a normal font style */
    font-style: normal;
}

/* =========================================
   ROLE SEPARATORS

   Adds comfortable spacing around each
   bullet between the professional roles.
   ========================================= */

.role-separator {

    /* Adds space on both sides of each bullet */
    margin: 0 10px;

    /* Makes the separators slightly less prominent */
    opacity: 0.8;
}

/* Styles "Creator of BakoMaths" */
.brand {
    font-size: 16px;
    font-style: italic;
    margin-top: 8px;
}

/* =========================================
   NAVIGATION BAR

   Controls the area containing the links
   to the different pages of my website.
   ========================================= */

nav {

    /* Centers all navigation links */
    text-align: center;

    /* Gives the navigation bar a white background */
    background-color: white;

    /*
       Creates more vertical space inside the navigation bar
       so that the larger links do not feel crowded.
    */
    padding: 22px 20px;
}

/* =========================================
   NAVIGATION LINKS

   Styles Home, Assignments, Semester Project,
   and Course Website.
   ========================================= */

nav a {

    /* Removes the normal underline from links */
    text-decoration: none;

    /* Uses the main dark-blue color of my website */
    color: #1f3c5b;

    /* Makes the navigation text bold */
    font-weight: bold;

    /*
       Makes the navigation text slightly larger
       and easier to see.
    */
    font-size: 20px;

    /*
       Creates horizontal space between
       each navigation link.
    */
    margin: 0 25px;
}

/* =========================================
   4. ABOUT ME STYLE
   Controls my photograph and biography
   ========================================= */
.about {
    max-width: 1000px;
    margin: 50px auto;
    padding: 35px;
    background-color: white;
      /* Places photograph and text side-by-side */
    display: flex;
    /* Vertically aligns the photograph and text */
    align-items: center;
     /* Creates space between photograph and text */
    gap: 40px;
}

/* Controls my photograph */
.about-image img {
    width: 280px;
    height: 280px;
     /* Prevents the photograph from stretching */
    object-fit: cover;
    /* Rounds the corners */
    border-radius: 20px;
}

/* Allows biography to use remaining space */
.about-text {
    flex: 1;
}

.about-text h2 {
    margin-top: 0;
    font-size: 30px;
}

.about-text p {
    font-size: 17px;
    /* Adds space between lines of text */
    line-height: 1.6;
}

/* =========================================
   BAKOMATHS SECTION

   Flexbox places the YouTube symbol and the
   BakoMaths information next to each other.
   ========================================= */

.bakomaths {

    /* Prevents the section from becoming too wide */
    max-width: 1000px;

    /* Centers the section on the webpage */
    margin: 40px auto;

    /* Creates space inside the section */
    padding: 30px 35px;

    /* Gives the section my main dark-blue color */
    background-color: #1f3c5b;

    /* Makes the text white */
    color: white;

    /* Places the children next to each other */
    display: flex;

    /* Vertically centers the children */
    align-items: center;

    /* Creates space between the different parts */
    gap: 30px;

    /* Rounds the corners */
    border-radius: 10px;

    /* Adds a subtle shadow below the section */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}


/* =========================================
   LEFT SIDE: YOUTUBE SYMBOL
   ========================================= */

.bakomaths-icon {

    /* Gives the icon its own fixed area */
    width: 150px;

    /* Centers the icon horizontally */
    display: flex;

    justify-content: center;

    /* Prevents the icon area from shrinking */
    flex-shrink: 0;
}


/* =========================================
   YOUTUBE LOGO

   Creates a simple red YouTube-style icon.
   ========================================= */

.youtube-logo {

    /* Gives the icon its red background */
    background-color: #ff0000;

    /* Makes the play symbol white */
    color: white;

    /* Controls the size of the icon */
    width: 75px;
    height: 55px;

    /* Centers the play symbol */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Makes the play symbol larger */
    font-size: 25px;

    /* Rounds the corners */
    border-radius: 12px;
}


/* =========================================
   VERTICAL DIVIDER

   Separates the YouTube symbol from the text.
   ========================================= */

.bakomaths-divider {

    /* Creates the vertical line */
    width: 1px;

    /* Controls the height of the line */
    height: 150px;

    /* Gives the line a soft white appearance */
    background-color: rgba(255, 255, 255, 0.4);

    /* Prevents the divider from shrinking */
    flex-shrink: 0;
}


/* =========================================
   RIGHT SIDE: BAKOMATHS CONTENT
   ========================================= */

.bakomaths-content {

    /* Allows this area to use the remaining space */
    flex: 1;

    /* Aligns the content to the left */
    text-align: left;
}


/* =========================================
   BAKOMATHS TITLE
   ========================================= */

.bakomaths-content h2 {

    /* Removes unnecessary space above the title */
    margin: 0 0 5px;

    /* Controls the title size */
    font-size: 30px;
}


/* =========================================
   BAKOMATHS TAGLINE
   ========================================= */

.bakomaths-tagline {

    /* Makes the tagline bold */
    font-weight: bold;

    /* Controls its size */
    font-size: 18px;

    /* Controls spacing around the tagline */
    margin: 0 0 12px;
}


/* =========================================
   BAKOMATHS DESCRIPTION
   ========================================= */

.bakomaths-description {

    /* Makes the paragraph comfortable to read */
    line-height: 1.5;

    /* Controls the paragraph size */
    font-size: 16px;

    /* Creates space before the button */
    margin: 0 0 18px;
}


/* =========================================
   YOUTUBE BUTTON
   ========================================= */

.bakomaths-button {

    /* Allows the link to behave like a button */
    display: inline-block;

    /* Creates space inside the button */
    padding: 11px 18px;

    /* Gives the button YouTube's recognizable red */
    background-color: #ff0000;

    /* Makes the text white */
    color: white;

    /* Removes the normal link underline */
    text-decoration: none;

    /* Makes the text bold */
    font-weight: bold;

    /* Rounds the button */
    border-radius: 7px;

    /* Creates a smooth hover effect */
    transition: background-color 0.3s ease,
                transform 0.3s ease;
}


/* =========================================
   PLAY SYMBOL INSIDE BUTTON
   ========================================= */

.button-play {

    /* Creates some space after the play symbol */
    margin-right: 8px;
}


/* =========================================
   ARROW INSIDE BUTTON
   ========================================= */

.button-arrow {

    /* Creates some space before the arrow */
    margin-left: 8px;
}


/* =========================================
   YOUTUBE BUTTON HOVER EFFECT
   ========================================= */

.bakomaths-button:hover {

    /* Changes the red slightly when hovered */
    background-color: #cc0000;

    /* Moves the button slightly upward */
    transform: translateY(-2px);
}

/* =========================================
   7. EXPLORE SECTION STYLE
   Controls the Assignments and Project area
   ========================================= */
.explore {
    max-width: 1070px;
    margin: 50px auto;
    text-align: center;
}

.explore h2 {
    font-size: 30px;
    color: #1f3c5b;
}

/* =========================================
   8. CARD LAYOUT
   Places the two cards next to each other
   ========================================= */
.cards {
     /* Places cards side-by-side */
    display: flex;
    /* Creates space between the cards */
    gap: 25px;
    margin-top: 30px;
}

/* =========================================
   9. INDIVIDUAL CARD STYLE
   Controls each clickable card
   ========================================= */
.card {
    flex: 1;
    background-color: white;
    padding: 30px;
    /* Removes normal link underline */
    text-decoration: none;
    color: #222;
    /* Rounds the card corners */
    border-radius: 10px;
/* =========================================
       NEW CSS FEATURE:
       Creates a smooth animation when the card changes
       ========================================= */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

/* =========================================
   NEW CSS FEATURE LEARNED

   :hover applies these styles when the mouse
   pointer is placed over a card.

   transform moves the card slightly upward.

   box-shadow creates a shadow underneath the card.

   transition in the .card style makes these
   changes happen smoothly instead of instantly.
   ========================================= */

.card:hover {

    /* Moves the card upward by 8 pixels */
    transform: translateY(-8px);

    /* Adds a shadow underneath the card */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.card h3 {
    color: #1f3c5b;
    font-size: 23px;
}

.card p {
    line-height: 1.6;
}

.card span {
    color: #1f3c5b;
    font-weight: bold;
}

.page-content {
    max-width: 1000px;
    margin: 50px auto;
    padding: 35px;
    background-color: white;
    border-radius: 10px;
}

.page-content h2 {
    color: #1f3c5b;
}

.page-content a {
    color: #1f3c5b;
    font-weight: bold;
    text-decoration: none;
}
.explore {
    max-width: 1070px;
    margin: 50px auto;
    text-align: center;
}

.explore h2 {
    font-size: 30px;
    color: #1f3c5b;
}

.cards {
    display: flex;
    gap: 25px;
    margin-top: 30px;
}

.card {
    flex: 1;
    background-color: white;
    padding: 30px;
    text-decoration: none;
    color: #222;
    border-radius: 10px;
}

.card h3 {
    color: #1f3c5b;
    font-size: 23px;
}

.card p {
    line-height: 1.6;
}

.card span {
    color: #1f3c5b;
    font-weight: bold;
}

/* =========================================
   ASSIGNMENTS AND PROJECT PAGE CONTENT

   This style controls the main content box
   on my Assignments and Semester Project pages.
   ========================================= */

   .page-content {

    /* Limits how wide the content box can become */
    max-width: 1000px;

    /*
       50px gives space above and below the box.
       auto centers the box horizontally.
    */
    margin: 50px auto;

    /* Creates space inside the box */
    padding: 35px;

    /* Gives the content area a white background */
    background-color: white;

    /* Rounds the corners of the content box */
    border-radius: 10px;
}


/* =========================================
   PAGE CONTENT HEADING
   Styles headings inside the content box
   ========================================= */

.page-content h2 {

    /* Gives the heading the same blue used in my website */
    color: #1f3c5b;

    /* Makes the heading larger */
    font-size: 28px;
}


/* =========================================
   PAGE CONTENT PARAGRAPHS
   Makes paragraphs easier to read
   ========================================= */

.page-content p {

    /* Increases the space between lines */
    line-height: 1.6;
}

/* =========================================
   LINKS INSIDE THE CONTENT BOX

   This includes the "Back to Home" link.
   ========================================= */

.page-content a {

    /* Changes the link to my website's blue color */
    color: #1f3c5b;

    /* Makes the link bold */
    font-weight: bold;

    /* Removes the normal underline from the link */
    text-decoration: none;
}

/* =========================================
   CONNECT WITH ME SECTION

   Creates a clean area where visitors can
   access my social media platforms.
   ========================================= */

.connect {

    /* Limits the width of the section */
    max-width: 1000px;

    /* Centers the section and creates vertical spacing */
    margin: 60px auto;

    /* Centers the heading and introductory text */
    text-align: center;
}

/* =========================================
   CONNECT INTRODUCTION
   ========================================= */

.connect-intro {

    /* Uses a softer text color */
    color: #555;

    /* Keeps the introduction smaller than the heading */
    font-size: 16px;

    /* Reduces the space before the social cards */
    margin-bottom: 22px;
}


/* =========================================
   CONNECT WITH ME HEADING
   ========================================= */

.connect h2 {

    /* Uses the main website color */
    color: #1f3c5b;

    /* Keeps the heading noticeable without being oversized */
    font-size: 28px;

    /* Controls the space below the heading */
    margin-bottom: 6px;
}

/* =========================================
   CONNECT WITH ME SECTION

   Keeps the social media area compact and
   centered near the bottom of the webpage.
   ========================================= */

.connect {

    /* Makes the section narrower than the main content */
    max-width: 800px;

    /* Centers the section and reduces vertical space */
    margin: 45px auto;

    /* Centers all text */
    text-align: center;
}

/* =========================================
   SOCIAL LINKS CONTAINER

   Flexbox keeps the three social media
   cards together in one row.
   ========================================= */

.social-links {

    /* Places the three cards next to each other */
    display: flex;

    /* Reduces the space between the cards */
    gap: 15px;

    /* Centers the group of cards */
    justify-content: center;
}

/* =========================================
   INDIVIDUAL SOCIAL MEDIA CARD
   ========================================= */

.social-card {

    /*
       Gives each card a controlled width instead
       of allowing it to fill all available space.
    */
    width: 220px;

    /* Places the icon, name, and arrow in one row */
    display: flex;

    /* Vertically centers everything */
    align-items: center;

    /* Creates smaller internal spacing */
    padding: 14px 16px;

    /* Gives the card a white background */
    background-color: white;

    /* Removes the normal link underline */
    text-decoration: none;

    /* Uses the main website blue */
    color: #1f3c5b;

    /* Rounds the corners */
    border-radius: 9px;

    /* Adds a subtle shadow */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Makes hover movement smooth */
    transition: transform 0.3s ease,
                box-shadow 0.3s ease;
}

/* =========================================
   SOCIAL MEDIA ICONS
   ========================================= */

.social-icon {

    /* Creates a smaller icon box */
    width: 38px;
    height: 38px;

    /* Centers the symbol */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Makes the symbol bold */
    font-weight: bold;

    /* Controls the symbol size */
    font-size: 20px;

    /* Creates space between icon and name */
    margin-right: 12px;

    /* Rounds the icon box */
    border-radius: 7px;

    /* Prevents the icon from becoming smaller */
    flex-shrink: 0;
}


/* =========================================
   LINKEDIN ICON
   ========================================= */

.linkedin-icon {

    /* LinkedIn-inspired blue background */
    background-color: #0a66c2;

    /* Makes the letters white */
    color: white;
}


/* =========================================
   FACEBOOK ICON
   ========================================= */

.facebook-icon {

    /* Facebook-inspired blue background */
    background-color: #1877f2;

    /* Makes the letter white */
    color: white;

    /* Makes the Facebook symbol slightly larger */
    font-size: 30px;
}


/* =========================================
   TIKTOK ICON
   ========================================= */

.tiktok-icon {

    /* Uses a dark background for the TikTok symbol */
    background-color: #111;

    /* Makes the music note white */
    color: white;
}


/* =========================================
   SOCIAL MEDIA NAME
   ========================================= */

.social-name {

    /* Makes the platform name bold */
    font-weight: bold;

    /* Makes the platform name easy to read */
    font-size: 18px;
}


/* =========================================
   SOCIAL MEDIA ARROW
   ========================================= */

.social-arrow {

    /*
       Pushes the arrow to the far-right
       side of each social card.
    */
    margin-left: auto;

    /* Makes the arrow blue */
    color: #1f6fc2;

    /* Makes the arrow larger */
    font-size: 22px;
}


/* =========================================
   SOCIAL CARD HOVER EFFECT
   ========================================= */

.social-card:hover {

    /* Moves the card slightly upward */
    transform: translateY(-5px);

    /* Makes the shadow slightly stronger */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}


/* =========================================
   WEBSITE FOOTER
   ========================================= */

footer {

    /* Uses the same dark blue as the website header */
    background-color: #1f3c5b;

    /* Makes the footer text white */
    color: white;

    /* Centers the footer information */
    text-align: center;

    /* Creates comfortable space inside the footer */
    padding: 25px 20px;
}


/* =========================================
   FOOTER PARAGRAPHS
   ========================================= */

footer p {

    /* Controls the spacing between footer lines */
    margin: 5px 0;
}


/* =========================================
   FOOTER SUBTITLE
   ========================================= */

.footer-subtitle {

    /* Makes the second line slightly softer */
    opacity: 0.8;
}

/* =========================================
   APPLET COLLECTIONS TABLE
   This section controls the appearance of
   the resource table on the Assignments page.
   ========================================= */


/* Controls the overall table */
.resource-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
    margin-bottom: 35px;
}

/* Controls both the heading cells and
   the regular cells inside the table */
.resource-table th,
.resource-table td {
    border: 1px solid #cccccc;
    padding: 16px;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}

/* Gives the table headings the same navy
   color used throughout the website */
.resource-table th {
    background-color: #1f3c5b;
    color: white;
    font-size: 17px;
}

/* Makes the title column narrower so that
   the description has more space */
.resource-table th:first-child,
.resource-table td:first-child {
    width: 32%;
}


/* Controls the appearance of the clickable
   resource titles */
.resource-table a {
    color: #1f3c5b;
    font-weight: bold;
    text-decoration: none;
}


/* Underlines a resource title when the
   mouse is placed over the link */
.resource-table a:hover {
    text-decoration: underline;
}


/* Controls the Applet Collections heading */
.assignment-resources h3 {
    color: #1f3c5b;
    font-size: 24px;
    margin-top: 35px;
}

/* =========================================================
   ASSIGNMENTS TABLE
   Styles the main table containing all assignments
   ========================================================= */


/* Allows the table to scroll on smaller screens */
.assignment-table-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 25px;
}


/* Styles the complete assignments table */
.assignment-menu-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    border: 1px solid #cccccc;
}


/* Styles the table headings and table information */
.assignment-menu-table th,
.assignment-menu-table td {
    padding: 16px;
    border: 1px solid #cccccc;
    text-align: left;
}


/* Gives the table headings a dark-blue background */
.assignment-menu-table th {
    background-color: #183b61;
    color: white;
}


/* Shows that the complete assignment row can be clicked */
.clickable-assignment {
    cursor: pointer;
}


/* Changes the row background when the mouse moves over it */
.clickable-assignment:hover {
    background-color: #eef4fa;
}


/* Styles the assignment number and assignment title links */
.clickable-assignment td a {
    color: #172235;
    text-decoration: none;
    font-weight: bold;
}


/* Underlines an assignment link when the mouse moves over it */
.clickable-assignment td a:hover {
    text-decoration: underline;
}


/* Styles the View link as a button */
.view-assignment-button {
    display: inline-block;
    padding: 8px 18px;
    background-color: #234b78;
    color: white !important;
    border-radius: 5px;
    text-decoration: none !important;
}


/* Changes the View button when the mouse moves over it */
.view-assignment-button:hover {
    background-color: #183b61;
}



/* =========================================================
   ASSIGNMENT 2 INTRODUCTION
   Styles the activity title and description
   ========================================================= */


/* Adds space below the activity introduction */
.activity-introduction {
    margin-bottom: 25px;
}


/* Styles the mathematical activity title */
.activity-introduction h2 {
    color: #183b61;
    margin-bottom: 12px;
}


/* Styles the description beneath the activity title */
.activity-description {
    font-size: 18px;
    line-height: 1.7;
}



/* =========================================================
   GUIDING QUESTION
   Makes the central mathematical question easy to identify
   ========================================================= */


/* Styles the complete guiding-question section */
.guiding-question {
    margin: 25px 0;
    padding: 20px;
    background-color: #eef4fa;
    border-left: 5px solid #234b78;
}


/* Styles the Guiding Question heading */
.guiding-question h3 {
    margin-top: 0;
    color: #183b61;
}


/* Styles the mathematical question */
.guiding-question p {
    margin-bottom: 0;
    font-size: 18px;
    font-weight: bold;
}



/* =========================================================
   LEARNING OBJECTIVES
   Styles the remaining activity-information box
   ========================================================= */


/* Adds spacing around the Learning Objectives section */
.activity-information {
    margin: 30px 0;
}


/* Styles the Learning Objectives box */
.activity-information-box {
    width: 100%;
    padding: 22px;
    background-color: white;
    border: 1px solid #cccccc;
    border-radius: 8px;
}


/* Styles the Learning Objectives heading */
.activity-information-box h3 {
    margin-top: 0;
    color: #183b61;
}


/* Adds space between the learning objectives */
.activity-information-box li {
    margin-bottom: 10px;
}



/* =========================================================
   ACTIVITY RESOURCES
   Styles the simulator, worksheet and activity-plan boxes
   ========================================================= */


/* Adds space around the complete resources section */
.activity-resources {
    margin: 40px 0;
}


/* Styles the Activity Resources heading */
.activity-resources h2 {
    color: #183b61;
}


/* Places the three resource boxes in one row */
.resource-container {
    display: flex;
    gap: 20px;
    margin-top: 22px;
}


/* Styles each resource box */
.resource-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22px;
    background-color: white;
    border: 1px solid #cccccc;
    border-radius: 8px;
}


/* Styles the heading inside each resource box */
.resource-box h3 {
    margin-top: 0;
    color: #183b61;
}


/* Keeps the three resource buttons aligned */
.resource-box p {
    flex-grow: 1;
}


/* Styles each resource link as a button */
.resource-button {
    display: inline-block;
    padding: 10px 16px;
    background-color: #234b78;
    color: white;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}


/* Changes a resource button when the mouse moves over it */
.resource-button:hover {
    background-color: #183b61;
}



/* =========================================================
   BACK LINK
   Styles the link returning to the Assignments page
   ========================================================= */


/* Adds space above the Back to Assignments link */
.back-link {
    margin-top: 35px;
}


/* Styles the Back to Assignments link */
.back-link a {
    color: #234b78;
    font-weight: bold;
    text-decoration: none;
}


/* Underlines the link when the mouse moves over it */
.back-link a:hover {
    text-decoration: underline;
}


/* =========================================================
   RESPONSIVE DESIGN
   Rearranges the content on phones and smaller screens
   ========================================================= */

@media screen and (max-width: 768px) {

    /* Places the three resource boxes vertically */
    .resource-container {
        flex-direction: column;
    }


    /* Reduces spacing inside the assignments table */
    .assignment-menu-table th,
    .assignment-menu-table td {
        padding: 12px 8px;
    }


    /* Makes the resource buttons easy to select on a phone */
    .resource-button {
        width: 100%;
    }

}
/* =========================================
   ACTIVITY RESOURCE BUTTON TEXT
   Makes the writing on the blue buttons
   bright white and easier to read
   ========================================= */

.resource-button,
.resource-button:visited,
.resource-card .button,
.resource-card .button:visited {
    color: #ffffff !important;
    font-weight: bold;
}


/* Keeps the writing white when the mouse
   is placed over any resource button */

.resource-button:hover,
.resource-card .button:hover {
    color: #ffffff !important;
}

/* =========================================
   REMOVES ARROWS FROM SOCIAL-MEDIA CARDS
   The cards and their links remain clickable
   ========================================= */

.social-card .arrow,
.social-link .arrow,
.social-arrow {
    display: none !important;
}


/* Removes arrows if they were created
   automatically by the CSS */

.social-card::after,
.social-link::after {
    content: none !important;
    display: none !important;
}