/* PASTE THIS ENTIRE BLOCK INTO THE CARGO CSS EDITOR */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

/* --- Custom CSS to Fix Link Color --- */

/* Style for standard and visited links */
a,
a:link,
a:visited {
  color: #000000; /* Sets the link color to black */
  text-decoration: underline; /* Underlines the link for clarity */
  transition: color 0.2s ease-in-out; /* Adds a smooth color change effect */
}

/* Style for when you mouse over a link */
a:hover {
  color: #555555; /* Changes color to a dark gray on hover */
  text-decoration: none; /* Removes the underline on hover */
}

/* --- Link Styling --- */

/* This styles all links in their default state */
a {
    color: #6fa8c9; /* Sets the link color to match your text */
    text-decoration: none; /* Removes the default underline */
}

/* This styles the link when you hover your mouse over it */
a:hover {
    text-decoration: underline; /* Adds an underline on hover for usability */
}

/* --- CUSTOM HEADING STYLES --- */

/* Style for Heading 1 */
h1 {
    font-family: 'Helvetica Neue' , sans-serif;
    font-size: 29px !important; /* Use !important to override Cargo's default styles */
    font-weight: 400	 !important; /* 700 is bold */
    line-height: 1.3 !important;
    letter-spacing: 0px !important;
    color: #000000 !important; /* Black */
    text-transform: none !important; /* Options: uppercase, lowercase, capitalize */
}

/* Style for Heading 2 */
h2 {
    font-family: 'Georgia', serif;
    font-size: 33px !important;
    font-weight: 400 !important; /* 400 is normal */
    line-height: 1.4 !important;
    letter-spacing: 0px !important;
    color: #333333 !important; /* Dark Gray */
}

/* Style for Heading 3 */
h3 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 1px !important;
    color: #555555 !important; /* Medium Gray */
    text-transform: uppercase !important;
}

/* You can also style the main body text (paragraphs) */
p {
    font-size: 26px !important;
    line-height: 1.2 !important;
}


/* --- GLOBAL PADDING FOR THE ENTIRE SITE --- */

/*
  This first part is a best-practice reset.
  It ensures that padding is calculated correctly
  and doesn't cause horizontal scrollbars.
*/
/* --- START OF CSS --- */

/* --- General Section Styling --- */
.writing-portfolio {
    font-family: Georgia, 'Times New Roman', serif;
    color: #333333;
}

/* --- Main Headers (e.g., "Cultural Criticism & Essays") --- */
.writing-portfolio h3 {
    margin-top: 3em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 0.5em;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 1.em;
}

.writing-portfolio h2 {
    margin-bottom: 2em;
}

/* --- The Main List Itself --- */
.writing-portfolio ul {
    list-style-type: none;
    padding-left: 0;
}

/* --- Each Portfolio Entry (creates space between them) --- */
.writing-portfolio li {
    margin-bottom: 2.5em;
}

/* --- The Title of Each Work --- */
.writing-portfolio .entry-title {
    font-weight: bold;
    font-size: 1.9em;
    color: #111111;
    line-height: 1.4;
}

.writing-portfolio .entry-title a {
    color: inherit;
    text-decoration: none;
}

.writing-portfolio .entry-title a:hover {
    text-decoration: underline;
}

/* --- The Description Paragraphs --- */
.writing-portfolio .entry-description {
    font-size: 1.8em
        ;
    line-height: 1.6;
    color: #444444;
    margin-top: 0.5em;
    padding-left: 1.5em;
}

/* --- Sub-notes (Publication info, citations, etc.) --- */
.writing-portfolio .entry-meta {
    font-style: italic;
    font-size: 0.9em;
    color: #666666;
    display: block;
    margin-top: 0.75em;
}

/* --- Introductory Text for Sections --- */
.writing-portfolio .section-intro {
    font-style: italic;
    color: #555555;
    margin-bottom: 2em;
    border-left: 2px solid #dddddd;
    padding-left: 1em;
}

/* --- END OF CSS --- */

/*
  This applies the padding to the <body> element,
  which acts as the main container for your whole site.
*/
body {
  padding: 5.7vw !important; /* 5.7% of the viewport width on all 4 sides */
}

/* --- MOBILE PADDING ADJUSTMENT --- */
@media screen and (max-width: 768px) {
    body {
        /* Use a smaller padding for mobile screens */
        padding: 6vw !important;

        /* Or, if you used side-padding only: */
        /* padding: 0 4vw !important; */
    }
}

/* --- New Style for the Portfolio Overview --- */
.writing-portfolio .portfolio-overview {
        text-indent: 2em;
font-style: regular;
    color: #444444;
    margin-bottom: 0em;
    border-left: 2px solid #eeeeee;
    padding-left: 1.5em;
    font-size: 1.6em !important;
    line-height: 1.4 !important;
}
.writing-portfolio .portfolio-overview:first-of-type {
    text-indent: 0;
}

/* --- MOBILE H1 ADJUSTMENT --- */
@media screen and (max-width: 768px) {
    h1 {
        font-size: 18px !important; /* Adjust this value as needed */
    }
}