/* ============================================
   1. RESET & BASE STYLES
   ============================================
   This section sets a clean starting point.
   "box-sizing: border-box" makes padding and borders
   behave predictably so widths do not surprise you.
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#blockquote {
  margin: 10px 100px;   /* 10px top/bottom, 40px left/right */
  padding: 15px;
  border-radius: 5px;
}
#blockquote + p {
  text-align: right;
}

body {
  
  
    /* Change this to any color name, hex code, or rgb() value */
    background-color: #403268;
     /* Default link: never visited, not being interacted with */

    color: #FFFFFF;
    
    /* Change this to use a different font */
    font-family: Courier, sans-serif;
    
    /* Change this to add space inside the edges of the page */
    padding: 33px;
    
    /* Change this to make the text larger or smaller */
    font-size: 16px;
}
a {
    color: #66b3ff;          /* Light blue so it shows on dark purple */
    text-decoration: none;
}

/* Hover */
a:hover {
    color: #99ccff;
    text-decoration: underline;
}

/* Active (the moment of clicking) */
a:active {
    color: #ff6666;
}

/* Visited */
a:visited {
    color: #cc99ff;          /* Light purple, clearly visible on #403268 */
}




/* ============================================
   2. A REUSABLE CARD COMPONENT
   ============================================
   This styles a box you can use anywhere.
   Each property controls one visual aspect.
   ============================================ */
.card {
    /* Width: how wide the box is. "max-width" prevents it from stretching too far on big screens */
    width: 100%;
    max-width: 400px;
    
    /* Background color of the box itself */
    background-color: #ffffff;
    
    /* Space between the box edge and the text inside it */
    padding: 24px;
    
    /* Space between this box and other elements around it */
    margin: 20px auto;   /* "auto" centers the box horizontally */
    
    /* Rounds the corners. Increase the number for rounder corners */
    border-radius: 8px;
    
    /* Adds a subtle shadow. The four numbers are:
       horizontal offset, vertical offset, blur, color */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* ============================================
   3. TYPOGRAPHY INSIDE THE CARD
   ============================================
   These target specific elements inside .card.
   ============================================ */
.card h2 {
    /* Space below the heading */
    margin-bottom: 12px;
    
    /* Heading color */
    color: #222222;
    
    /* Heading size */
    font-size: 1.5rem;   /* "rem" means relative to the base font size */
}

.card p {
    /* Space between lines of text */
    line-height: 1.6;
    
    /* Paragraph color */
    color: #555555;
}


/* ============================================
   4. A SIMPLE BUTTON
   ============================================
   This styles a clickable button.
   ============================================ */
.btn {
    /* Display and spacing */
    display: inline-block;
    margin-top: 16px;
    padding: 10px 20px;
    
    /* Colors */
    background-color: #007bff;
    color: #ffffff;
    
    /* Remove default underline if this is a link */
    text-decoration: none;
    
    /* Round the corners */
    border-radius: 4px;
    
    /* Cursor changes to a hand on hover */
    cursor: pointer;
    
    /* Smooth color transition when hovering (0.2 seconds) */
    transition: background-color 0.2s ease;
}

/* What happens when you hover over the button */
.btn:hover {
    /* Darken the background slightly */
    background-color: #0056b3;
}