:root {
		--bc: #f7f5f2;
		--primary: #f7ea08;
		--secondary: #ff3fb4;
		--tertiary: #ff441a;
		--white: #ffffff;
		--black: #000000;
		/* Gray Colors */
		--gray: #6c757d;
		--gray-light: #f1f1f1;
		--gray-extra-dark: #343a40;
		/* Sizes */
		--heading: 3.4rem;
		--heading-large: 2.5rem;
		--heading-medium: 2rem;
		--paragraph: 1.1rem;
		/* Fonts */
		--font-main: "Poppins";
}
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Open+Sans:ital,wght@1,300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url("https://fonts.googleapis.com/css?family=Scope+One|Open+Sans:700");

.cover-container {
    position: relative;
    width: 100%; /* Full viewport width */
    height: 100%; /* Full viewport height */
    overflow: hidden;
  background-image: url('/turnjs/samples/magazine/pics/lima/city4.jpg'); /* Background image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Inner Container with Inset Border */
.inset-border {
    position: absolute;
    top: 8px; /* Adjust to inset the border */
    bottom: 8px;
    left: 8px;
    right: 8px;

    border: 3px solid #ffffff; /* White inset border */
    padding: 2rem; /* Padding for content */
    box-sizing: border-box;


}

main {
  display: grid;
  grid-gap: 1rem;
	width: 99%; /* Always take 100% of the available width */
	    max-width: 99%;
  grid-template-columns: repeat(2, 1fr) minmax(50px, 1fr);
  grid-template-rows: repeat(10, min-content);

	color: #717388;
	font-family: "Scope One", sans-serif;
	font-size: 1rem;
	line-height: 1;
	margin: 0.5rem;
}
@media (min-width: 60em) {
  main {
    grid-template-columns: 10vw minmax(50px, 50vw) repeat(2, 1fr);
    grid-template-rows: repeat(10, min-content);
  }
}
main img {
    max-width: 100%; /* Ensure images never exceed the width of the main div */
    height: auto; /* Maintain aspect ratio */
}
/* Main Grid Layout */
.grid-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 for Table of Contents, 1/3 for Ads */
    grid-gap: 1rem;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
}

/* Assign grid columns */
[data-grid="grid-column-1"] {
    grid-column: 1; /* Table of Contents in the first column */
}

[data-grid="grid-column-2"] {
    grid-column: 2; /* Ads section in the second column */
}

/* Content sections */
section.page {
    width: 100%; /* Ensure the section takes up the full width of the main container */
    max-width: 100%; /* Prevent overflow */
    padding: 2rem; /* Padding for internal content */
    margin-bottom: 2rem; /* Space between pages */
    box-sizing: border-box; /* Include padding in the width calculation */
}
[data-grid=grid-cell] {
  border-color: #ff0048;
}


[data-grid=grid-column] {
  border-color: rgba(2, 143, 118, 0.8);
  grid-column: 3;
  grid-row: 2/9;
  position: relative;
}
@media (min-width: 60em) {
  [data-grid=grid-column] {
    grid-column: 4;
    grid-row: 1/6;
  }
}

[data-grid=grid-column]:after {
  background: rgba(26, 26, 26, 0.4);
  bottom: 0;
  color: white;
  content: "Grid tracks can overlap";
  inset: auto 0 0;
  padding: 0.7rem;
  position: absolute;
}

[data-grid=grid-area] {
  border-color: #8a0054;
  grid-column: 1/-1;
  grid-row: span 3;
}
/* @media (min-width: 60em) {
  [data-grid=grid-area] {
    grid-column: 1;
  }
} */


[data-grid=grid-row] {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(38, 95, 163, 0.8);
  grid-column: 1/-1;
  grid-row: 8;
}
@media (min-width: 60em) {
  [data-grid=grid-row] {
    grid-row: 5;
  }
}


/* Title Section */
.title {
  grid-column: 1 / -1;
  grid-row: 1;
  text-align: center; /* Center the title and tagline */
	margin-top:-3rem;
  margin-bottom: 2rem; /* Add space below the title */
}
/* Title Section - No Border for Grid Area */
.title[data-grid="grid-area"] {
    border: none; /* Remove any border applied to grid-area inside the title */
}

/* h1 - Main Title Styling for Magazine */
.title h1 {
  font-family: 'Bebas Neue', sans-serif; /* Apply the bold serif font */

-webkit-text-fill-color: white;
  font-size: 6rem; /* Extra large font size */
  font-weight: 900; /* Make the font extra bold */
  line-height: 1; /* Slightly tighter line height for compact look */
  letter-spacing: 0.05em; /* Add some spacing between letters */
  color: white; /* Use the gray extra dark color */
  margin-bottom: 0.25rem; /* Spacing between title and tagline */
  /* text-transform: uppercase; /* Uppercase letters for a dramatic effect */ */
  text-align: center; /* Center the title on the page */
  text-shadow: 5px 5px 1px rgba(0, 0, 0, 0.4); /* Apply drop shadow for depth */
}


/* h2 - Tagline Styling */
.title h2 {
  font-family: 'Open Sans', sans-serif; /* Apply the italic sans-serif font */
  font-size: 2.0rem; /* Smaller font size for tagline */
  font-style: italic; /* Italicize the tagline */
  font-weight: 300; /* Light weight for contrast with h1 */
    color: white; /* Use the gray extra dark color */
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Apply drop shadow for depth */

    margin-top: 2px;
}





[data-grid] {
  border-width: 1px;
  border-style: solid;
}


strong {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
/* General styles remain the same as in your existing CSS */
/* Article Headline */
.article-headline {
    font-size: 2.5rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Byline */
.article-byline {
    font-size: 1.2rem;
    font-weight: normal;
    color: #666;
    margin-bottom: 1rem;
    font-family: "Open Sans", sans-serif;
}
.article  {
		line-height: 1.2rem;
    font-weight: normal;
    color: #666;
    margin-bottom: 1rem;
    font-family: "Open Sans", sans-serif;
}

/* Drop Cap */
/* Drop Cap Styling */
p.drop-cap::first-letter {
    float: left;
    font-size: 3rem;
    font-weight: bold;
    line-height: 0.85;
    margin-right: 0.25rem;
    color: var(--gray-extra-dark); /* Highlight the first letter */
}


/* Multi-Column Layout */
.multi-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.column {
    padding: 1rem;
    background: #f9f9f9;
    border: 1px solid #ddd;
}

.column h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    font-family: "Scope One", serif;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .multi-column {
        grid-template-columns: 1fr;
    }
}
/* Pegging to specific corners */
.corner-info {
  position: absolute;
  font-size: 0.9rem;
  color: var(--gray-extra-dark);
  background-color: var(--gray-light); /* Light gray background for better contrast */
  padding: 0.5rem;
  z-index: 10; /* Ensure it's on top of other elements */
	opacity:0.6;
}

.corner-info.top-left {
  top: 10px;
  left: 10px;
}

.corner-info.top-right {
  top: 10px;
  right: 10px;
}

.corner-info.bottom-left {
  bottom: 10px;
  left: 10px;
}

.corner-info.bottom-right {
  bottom: 10px;
  right: 10px;
}

/* Optional for making the info look smaller and lighter */
.corner-info small {
  display: block;
  color: var(--gray);
  font-size: 0.8rem;
}

/* Pull Quote - Common Styling */
.pull-quote {
  font-family: 'Playfair Display', serif; /* Bold, eye-catching font */
  font-size: 2rem;
  font-weight: bold;
  padding: 1rem;
  margin: 1rem;
  line-height: 1.5;
  float: left; /* Makes the text flow around the pull quote */
  max-width: 300px;
  color: var(--gray-extra-dark);
}

/* Variation 1: Pull Quote with Background */
.pull-quote.background {
  background-color: var(--gray-light);
  border-radius: 5px;
  padding: 1.5rem;
  color: var(--gray-extra-dark);
}

/* Variation 2: Pull Quote with Top and Bottom Borders */
.pull-quote.borders {
  border-top: 5px solid var(--primary); /* You can change to any CSS variable */
  border-bottom: 5px solid var(--primary);
  padding: 1rem 0;
}

/* To adjust margins when floated left */
.pull-quote {
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Table of Contents */
.table-of-contents {
  font-family: 'Open Sans', sans-serif;
  padding: 2rem;
  margin: 1.5rem 0;
  background-color: var(--gray-light); /* Background for separation */
}

.table-of-contents h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  color: var(--gray-extra-dark);
  margin-bottom: 1rem;
}

.table-of-contents ul {
  list-style: none;
  padding-left: 0;
}
a {
  text-decoration: none;
  color: inherit;
}

a:visited, a:hover, a:active {
  text-decoration: none;
  color: inherit;
}

.table-of-contents li {
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 0.5rem;
  color: var(--gray-extra-dark);
}

.table-of-contents li a {
  text-decoration: none;
  color: var(--black);
  font-weight: bold;
}

.table-of-contents li a:hover {
  text-decoration: underline;
}
/* Advertisement Box */
.advertisement {
  border: 2px solid var(--primary);
  padding: 1rem;
  margin: 2rem 0;
  text-align: center;
  background-color: var(--gray-light);
}
.floatingimage {
  border: 2px solid var(--black);


  text-align: center;

}
.advertisement img {
  max-width: 100%;
  height: auto;
}

.advertisement p {
  font-size: 1.1rem;
  margin-top: 0.5rem;
}
/* Ads Section */
.ads-section {
    display: flex;
    flex-direction: column; /* Stack ads vertically */
    gap: 1.5rem; /* Space between the ads */
}

.ad {
    background-color: var(--gray-light);
    padding: 1rem;
    border: 1px solid var(--gray);
    text-align: center;
    border-radius: 5px;
}

.ad img {
    max-width: 100%; /* Ensure images don't overflow */
    height: auto;
}

.ad p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: var(--gray-extra-dark);
    margin-top: 1rem;
}

/* Masthead Section */
.masthead {
  padding: 2rem;
  background-color: var(--gray-light);
  margin: 2rem 0;
}

.masthead h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--gray-extra-dark);
  margin-bottom: 1rem;
}

.masthead p {
  font-size: 1rem;
  color: var(--gray);
}
/* Headlines */
h1, .headline {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  color: var(--gray-extra-dark);
  font-weight: bold;
  margin-bottom: 1rem;
}

/* Subheadings */
h2, .subheading {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5rem;
  color: var(--gray);
  font-style: italic;
  margin-bottom: 1rem;
}

/* General styling for cover articles */
.cover-article {
  position: absolute;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--white); /* Make text stand out */
  padding: 0.5rem 0.5rem;
  background-color: rgba(200, 200, 200, 0.4); /* Semi-transparent background for better readability */
  border-radius:  8px 0 0 8px;
  max-width: 332px; /* Limit the width of the text blocks */
  text-transform: uppercase;
}

/* Positioning the cover articles at different locations */
.cover-article.one {
  top: 24%;
  left: 1%;
}

.cover-article.two {
  top: 76%;
  right: 0%;
}

.cover-article.three {
  bottom: 20%;
  left: 1%;
}

.cover-article.four {
  bottom: 15%;
  right: 10%;
}

/* Special styling for highlighted article */
.cover-article.highlight {
  font-size: 2rem;
  color: var(--primary); /* Use your primary color for emphasis */
  background-color: rgba(255, 255, 255, 0.8); /* Light background */
  color: var(--gray-extra-dark); /* Dark text */
  padding: 1rem;
}
/* Uppercase */
.uppercase {
  text-transform: uppercase;
}

/* Lowercase */
.lowercase {
  text-transform: lowercase;
}

/* Title Case (capitalize) */
.titlecase {
  text-transform: capitalize;
}
/* No Background */
.no-background {
  background-color: transparent; /* Remove background color */
}

/* Light Background */
.light-background {
  background-color: rgba(255, 255, 255, 0.8); /* Light background for white text */
  color: var(--gray-extra-dark); /* Dark text on light background */
}

/* No Background with White Text and Black Outline */
.white-text-outline {

  color: var(--white); /* White text */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* Black outline */
}
/* Center Text */
.text-center {
  text-align: center;
}

/* Right Align Text */
.text-right {
  text-align: right;
}
.no-border {
	border:0px;
}
/* Left Align Text (Default) */
.text-left {
  text-align: left;
}
/* Small Text */
.small-text {
  font-size: 1rem;
}
.quite-small-text {
  font-size: 0.5rem;
}
/* Large Text */

/* Small Text */
.dark-text {
  font-size: 2rem;
	color:grey;
}
/* Small Text */
.fun-text {
	font-family: 'Bebas Neue', sans-serif; /* Apply the bold serif font */
  font-size: 2.3rem;
	color:darkblue;
}
.large-text {
  font-size: 2rem;
}

/* Extra Large Text */
.extra-large-text {
  font-size: 2.5rem;
}
/* Tight Padding */
.tight-padding {
  padding: 0.25rem 0.5rem;
}

/* Extra Padding */
.extra-padding {
  padding: 1rem 1.5rem;
}
/* Position the video centered under the title */
.video-wrapper {
    position: absolute;
    top: calc(120px + 5rem); /* Adjust this based on the height of your title */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    z-index: 14;
		max-height: 70vh; /* Limits the video to 70% of the viewport height */
}

/* Position the video centered under the title */
.video-wrapper-floating {
position: relative;
    width: 100%;
    height: auto;
    z-index: 14;
}
/* Style the video with an inset border using outline */
#cover-video {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    outline: 3px solid white; /* Inset white border */
		object-fit: cover; /* Ensures the video scales properly */
		transition: all 1s ease;
}
/* Style the video with an inset border using outline */
#cover-video2 {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    outline: 3px solid white; /* Inset white border */
		object-fit: cover; /* Ensures the video scales properly */
}

/* Sound button styling */
.sound-button {
    position: absolute;
    top: 18px;
    left: 10px;
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: 15;
    font-size: 1rem;
}
.sound-button-floating {
    position: absolute;
    top: 18px;
    left: 10px;
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    z-index: 15;
    font-size: 1rem;
		-webkit-transform: translateZ(0); /* Forces hardware acceleration */
		transform: translateZ(0);
}
/* Fade out effect for the video container */
.fade-out {
    opacity: 0;
    transition: opacity 1s ease;
		pointer-events: none;
}
/* Image styling for the article image */
.article-image {
    width: 100%;
		    max-width: 140px;
    height: auto;

}

/* Existing styles for the headline and subheading */
.cover-article h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
		padding: 0px;
    margin: unset;
}

.cover-article p {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2rem;
    color: var(--white);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
		margin-top: 0px;
}

.video-wrapper.hidden {
  opacity:0.0;
}
.pageHeadLeft {
	position: absolute;
	top:2px;
	left:28px;
	font-family: "Playfair Display";
	color:#999;
	font-size:0.9rem;
}
.pageHeadRight {
	position: absolute;
	top:2px;
	right:28px;
	font-family: "Playfair Display";
	color:#999;
	font-size:0.9rem;
}