@charset "UTF-8";



/* @FONT FACE (enable the use of 'custom fonts' inside your document) */

/* 
  You can use 'fontsquirrel' (https://www.fontsquirrel.com) 
  or 'transfonter' (https://transfonter.org)
  to generate your own font for the web from .ttf or .oft files 
*/



@font-face {
    font-family: 'Junicode';
    src: url('assets/fonts/junicode/Junicode.woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
  font-family: 'Fungal';
  src: url('assets/fonts/fungal/Fungal-Grow100Thickness500.woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}




/* VARIABLES */

:root {
  /* Color values */
  --color-background: rgba(255, 255, 255, 1); /* Background color */
  --color-text: rgba(0, 0, 0, 1); /* Text color */
  --color-text-link: #710303; /* Text color for links */
  --color-text-link-hover: #1d0371; /* Hover color for links */

  /* Font values */
  --font-text: 'Junicode'; /* Set your desired font family here */

  /* Margin value */
  --margin: 2rem; /* Default margin */
}




/* GENERAL STYLES */

html {
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  background-color: var(--color-background);
  margin: 0;
    padding: 0;
    overflow-x: hidden; /* Ensures no horizontal scrolling */
}

header{
  z-index: 1;
  position:relative;
  display:block;
  width:100%;
  height:auto;
  
}

.landing-content{
  position:relative;
  top:0;
  left:0;
  width:100%;
  margin-top:10vh;
}

.landing-subheader {
  margin: 0 auto;  /* Center the section on the page */
  width: 80%;  /* Ensure the section takes up the full width */
  text-align: center; /* Center the content inside the section */
  padding-top: 200px;
  height: 100vh;
  
}

#chapter-1 {
  margin-left: -20px; /* Adjust the value as necessary */
  clear: both; /* Ensures the title breaks cleanly above the text */
  text-align: left; /* Ensures the title aligns to the left */
  font-size: 12px; /* You can adjust the size as needed */
  font-weight: bold; /* Optional, if you want the title to stand out more */
  line-height: 1.5; /* Adjust line height for readability */
  word-break: break-word; /* Break words if they're too long */
}

#chapter-2 {
  margin-left: -20px; /* Adjust the value as necessary */
  clear: both; /* Ensures the title breaks cleanly above the text */
  text-align: left; /* Ensures the title aligns to the left */
  font-size: 12px; /* You can adjust the size as needed */
  font-weight: bold; /* Optional, if you want the title to stand out more */
  line-height: 1.5; /* Adjust line height for readability */
  word-break: break-word; /* Break words if they're too long */
}

#chapter-3 {
  visibility: hidden;
  color: #710303;
    font-style: normal;
  font-weight: normal;
  margin-left: -20px;
  margin-right: 10px;
  margin-top: 500px;  /* Adjust this value to move the title down */
  text-align: left;
  font-size: 40px;
  line-height: 1.2;
}




.quote {
  font-style: italic; /* Make the text italic */
  font-size: 70px;  /* Adjust font size if needed */
  color: #710303;  /* Adjust the color of the quote text */
  text-align: center;  /* Center the quote */
  line-height: 1.2;
  padding-top: 100px; /* Adjust the value to move the quote down */
  transition: all 0.3s ease-in-out;
}

.quote small {
  font-style: normal; /* Make the text italic */
  font-size: 15px; /* Makes it 80% of normal text size */
}



/* Styling for the entire quote section */
.quote-section {
  margin: 0 auto;  /* Center the section on the page */
  width:70%;  /* Ensure the section takes up the full width */
  text-align: center; /* Center the content inside the section */
  height: 180vh;
}

.top-text {
  color: #710303;
  font-size: 12px;  /* Set font size to make it small */
  text-transform: lowercase; /* Ensure all text is lowercase */
  text-align: center;  /* Align text across the page */
  padding: 10px 0;  /* Add padding for spacing */
  background-color: #ffffff;  /* Optional background color for visibility */
  width: 100%;  /* Make it take up the full width of the page */
  position: fixed;  /* Fix it to the top of the page */
  top: 0;  /* Stick it at the very top */
  left: 0;  /* Align it to the left edge of the page */
  z-index: 999;  /* Make sure it's on top of other content */
}

.top-text span {
  margin: 0 15px;  /* Space between each piece of text */
}

.top-right-nav {
  position: sticky; /* Make it sticky */
  top: 0; /* Stick to the top of the viewport */
  left: 0; /* Positions it at the left edge */
  width: 230px;
  text-align: left;
  z-index: 1000; /* Ensure the navbar is above other content */
  background-color: #fff; /* Optionally, add a background color */
}

.top-right-nav ul {
  list-style-type: none; /* Remove default bullet points */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
}

.top-right-nav li {
  margin-top: 20px;
  margin-bottom: 10px; /* Add space between list items */
  word-break: break-word; /* Break words if they're too long */
}

.top-right-nav a {
  font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
  text-decoration: none; /* Remove underline */
  color: #710303; /* Change link color */
  font-size: 15px; /* Adjust font size */
}

.top-right-nav a:hover {
  color: rgb(255, 0, 0); /* Change link color on hover */
  text-decoration: none; /* Remove underline */
}


.styled-image {
  width: 50%; /* Make the image take up 50% of its container */
  max-width: 300px; /* Maximum width */
  height: auto; /* Maintain aspect ratio */
  float: left; /* Make the image float to the left */
  margin-right: 12px; /* Add some space to the right of the image */
  margin-bottom: 10px; /* Add some space below the image */
}

body {
  font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
  position: relative;
  background-color: var(--color-background);
  font: var(--font-size) var(--font-family);
  color: #710303;
  width: 100%;
  height: auto;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  cursor: url('assets/images/BDM-singing.png'), auto;

}


p {
  color: #710303;
  font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
  font-size: 16px; /* Adjust to a smaller size (relative to parent font size) */
  line-height: 1.4; /* Optionally adjust line spacing for readability */
  text-align: left; /* Make sure text aligns left within the paragraph */
  text-align: justify;
  text-justify: inter-word;
}

summary {
  font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
  font-weight: bold;
  color: #710303;
  font-size: 12px;
  text-align: left;
  width: 25%;
  padding: 1rem;
  box-sizing: border-box;
  
  /* Hide the default arrow */
  list-style: none;
  padding-left: 20px; /* Optional: Space for the finger symbol */
}

summary::before {
  content: "☞"; /* Unicode for pointing finger */
  margin-right: 10px; /* Space between the symbol and text */
  font-size: 20px; /* Adjust the symbol size */
}

/* When the details are open, you can change it to another finger or symbol */
details[open] summary::before {
  content: "☟"; /* Another finger pointing upwards */
}

figure {
  position: relative;
  float: right;
  width: 25vw;
  margin: 0;
  padding: 0;
  margin-right: -30vw;
  margin-top: -10px;
}

figure img {
  width: 80%;
  height: auto;
  margin: 0;
  padding: 0;
  max-width: none;
  margin-top: -250px;
  object-fit: cover;
  filter: contrast(100%) sepia(100%) hue-rotate(300deg) saturate(70%) brightness(110%); /* Creates a reddish tint */
  transition: filter 0.3s ease; /* Smooth transition for hover effect */
}

figure img:hover {
  filter: none;
}

figcaption, 
figcaption p, 
figcaption em, 
figcaption a {
  font-size: 12px; 
  width:90%;
  text-align: justify;

}

p {
  color: #710303;
  font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
  font-size: 16px; /* Adjust to a smaller size (relative to parent font size) */
  line-height: 1.4; /* Optionally adjust line spacing for readability */
  text-align: left; /* Make sure text aligns left within the paragraph */
  text-align: justify;
  text-justify: inter-word;
}

#special-image {
  width: 100%; /* Adjust the width to 100% of the container */
  height: auto; /* Keep the aspect ratio intact */
  margin: 20px 0; /* Add space above and below the image */
  display: block; /* Ensure the image behaves as a block element */
  object-fit: cover; /* Ensure the image covers the space without distortion */
  margin-left: auto; /* Center the image horizontally */
  margin-right: auto; /* Center the image horizontally */
  filter: contrast(100%) sepia(100%) hue-rotate(300deg) saturate(70%) brightness(110%);
    transition: filter 0.3s ease; /* Smooth transition for hover effect */
}

#special-image:hover {
  filter: none;
}

#special-image-quote {
  width: 60%; /* Adjust the width to 60% of the container */
  height: auto; /* Keep the aspect ratio intact */
  margin: 20px 0; /* Add space above and below the image */
  display: block; /* Ensure the image behaves as a block element */
  object-fit: cover; /* Ensure the image covers the space without distortion */
  margin-left: auto; /* Center the image horizontally */
  margin-right: auto; /* Center the image horizontally */
}

#special-image-quote + figcaption {
  font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
  font-size: 16px; /* Custom font size for this specific caption */
  text-align: left; /* Align caption to the left (or you can change to center) */
  color: #710303; /* Change the text color for this caption */
  margin-top: 12px; /* Add more space above this caption */
  font-style: italic; /* Ensure the text is italic */
}

#special-image-quote + figcaption p {
  font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
  font-weight: normal; /* Optional: Set normal weight for the caption text */
  margin: 0px; /* Remove default margin */
  margin-left: 190px;

}



#footnote-30 {
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/* Style for the footnote links in the text */
sup a {
  color: rgb(255, 0, 0);
  font-size: 10px;
  vertical-align: super;
  text-decoration: none;
}


a {
  color: var(--color-text-link);
  text-decoration: underline;
  font-size: 20px;
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

h1 {
  line-height: 12rem;
  font-family: "oddity-script", sans-serif;
font-weight: 300;
font-style: normal;
    font-size: 320px;
    text-align: center;
    margin-top: -70px;
    position: relative;
    transition: transform 0.4s ease-in-out, color 0.4s;
}


h1:hover {
  transform: translateX(20px) rotate(-3deg);
  color:rgb(255, 0, 0);
}


.chapter-title {
  font-family: 'Aston', italic;
  font-style: normal;
  font-size: 12px; /* Adjust size if needed */
  margin-bottom: 40px; /* Adds space below the title */
}


h2{
  font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
  font-size:80px;
  font-weight: normal;
  color: rgb(124, 0, 0);
}


h3{
  font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
font-weight: bold; /* Optional, if you want the title to stand out more */
  color: rgb(124, 0, 0);
  font-size:12px;
  text-align: left; /* Align the text to the left */
  width: 25%; /* Allow the text to break into a new line if needed */
  padding:1rem;
  box-sizing: border-box;
}

h4, h5, h6{
  /* h4-h5-h6 style */
}



ol, ul{
  /* ordered list and unordered list styles */
}

blockquote{
  /* blockquote element style */
}

hr{
  /* horizontal rule style */
}


/* PAGE STYLES */

/* page structure */

div.page-wrapper {
  /* the element that 'wraps' everything */
  padding: var(--margin);
}

/* navigation */
 
nav{
  font-size: 23px; /* Adjust the value as needed */
}

/* content */

.is-chapter{

  display: flex;
  flex-direction: row;
  width:100%;
  box-sizing: border-box;
  text-align: justify;

}

.is-chapter-text{
  font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal; /* Apply your custom font here */
  width:50%;
  text-align: justify;
  margin-right:50px;
}

.landing-header {
  height: 100vh;
  
}


main{

}

summary{
  
}






/* UTILITY CLASSES */

/* hide desktop mobile etc */

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}



/* WEBSITE MEDIA QUERIES */

/* responsive typeface for various breaking points, sets the default 'rem' value */
@media (max-width: 299px) { 
  :root {
    --font-size: 18px;
  }
  html, body {
    font: var(--font-size) var(--font-text);
  }
}

@media (min-width: 299px) and (max-width: 340px) { 
  :root {
    --font-size: 19px;
  }
  html, body {
    font: var(--font-size) var(--font-text);
  }
}

@media (min-width: 340px) and (max-width: 440px) { 
  :root {
    --font-size: 20px;
  }
  html, body {
    font: var(--font-size) var(--font-text);
  }
}

@media (min-width: 441px) and (max-width: 779px) { 
  :root {
    --font-size: 19px;
  }
  html, body {
    font: var(--font-size) var(--font-text);
  }
}

@media (min-width: 780px) and (max-width: 992px) { 
  :root {
    --font-size: 20px;
  }
  html, body {
    font: var(--font-size) var(--font-text);
  }
}

@media (min-width: 993px) and (max-width: 1200px) { 
  :root {
    --font-size: 21px;
  }
  html, body {
    font: var(--font-size) var(--font-text);
  }
}

@media (min-width: 1201px) and (max-width: 1320px) { 
  :root {
    --font-size: 22px;
  }
  html, body {
    font: var(--font-size) var(--font-text);
  }
}

@media (min-width: 1321px) { 
  :root {
    --font-size: 24px;
  }
  html, body {
    font: var(--font-size) var(--font-text);
  }
}

/* Mobile-specific h1 styling */
@media (max-width: 779px) {

  html, body {
    overflow-x: hidden;  /* Prevent horizontal scrolling */
    overflow-y: auto;    /* Allow vertical scrolling */
  }
  
  h1 {
    font-family: "oddity-script", sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 1.1; /* Adjust this value for tighter spacing */
    font-size: 110px;
    text-align: center;
    margin-top: 120px;
    position: relative;
    transition: transform 0.4s ease-in-out, color 0.4s;
}

  

  h1:hover {
    transform: translateX(20px) rotate(-3deg);
    color: rgb(255, 0, 0);
  }
  
  h2 {
    font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
    width: 100%;
    font-size: 20px;
    font-weight: normal;
    color: rgb(124, 0, 0);
  }

  .landing-subheader {
    margin: 0 auto;
    width: 80%;
    text-align: center;
    padding-top: 40px;
    height: 58vh;
  }

  .quote {
    font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
    font-style: italic;
    font-size: 20px;
    color: #710303;
    text-align: center;
    line-height: 1.2;
    padding-top: 100px;
    transition: all 0.3s ease-in-out;
  }

  .quote small {
    font-style: normal; /* Make the text italic */
    font-size: 12px; /* Makes it 80% of normal text size */
  }

  #special-image-quote {
    width: 90%;
  }

  #special-image-quote + figcaption {
    text-align: center;
  }

  #special-image-quote + figcaption p {
    margin-left: 12px;
  }

  figcaption,
  figcaption p,
  figcaption em,
  figcaption a {
    font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
    font-size: 11px;
    width: 95%;
    text-align: justify;
  }

  .top-right-nav {
    position: sticky; /* Make it sticky */
    top: 0px; /* Stick to the top of the viewport */
    left: 80px; /* Positions it at the left edge */
    width: 230px;
    text-align: center;
    z-index: 1000; /* Ensure the navbar is above other content */
    background-color: #fff; /* Optionally, add a background color */
  }

  .top-right-nav a {
    font-size: 10px;
    font-family: "itc-galliard", serif;
font-weight: 400;
font-style: normal;
    text-decoration: none;
    color: #710303;
    
  }

  .quote-section {
    margin: 0 auto;  /* Center the section on the page */
    width:70%;  /* Ensure the section takes up the full width */
    text-align: center; /* Center the content inside the section */
    height: 100vh;
  }
  .quote {
    font-style: italic; /* Make the text italic */
    font-size: 20px;  /* Adjust font size if needed */
    color: #710303;  /* Adjust the color of the quote text */
    text-align: center;  /* Center the quote */
    line-height: 1.2;
    padding-top: 200px; /* Adjust the value to move the quote down */
    transition: all 0.3s ease-in-out;
  }
  

  summary {
    display: block; /* Ensures it behaves as a block element */
    text-align: center; /* Centers the text */
    font-weight: bold;
    color: #710303;
    font-size: 12px;
    width: 50%; /* Adjust width as needed */
    margin: 0 auto; /* Centers the element itself */
    padding: 1rem;
}

 

  #chapter-1 {
    margin-left: -20px; /* Adjust the value as necessary */
    clear: both; /* Ensures the title breaks cleanly above the text */
    text-align: center; /* Ensures the title aligns to the left */
    font-size: 12px; /* You can adjust the size as needed */
    font-weight: bold; /* Optional, if you want the title to stand out more */
    line-height: 1.5; /* Adjust line height for readability */
    word-break: break-word; /* Break words if they're too long */
  }
  
  #chapter-2 {
    margin-left: -20px; /* Adjust the value as necessary */
    clear: both; /* Ensures the title breaks cleanly above the text */
    text-align: center; /* Ensures the title aligns to the left */
    font-size: 12px; /* You can adjust the size as needed */
    font-weight: bold; /* Optional, if you want the title to stand out more */
    line-height: 1.5; /* Adjust line height for readability */
    word-break: break-word; /* Break words if they're too long */
  }
  
  #chapter-3 {
    visibility: hidden;
    color: #710303;
      font-style: normal;
    font-weight: normal;
    margin-left: -20px;
    margin-right: 10px;
    margin-top: 500px;  /* Adjust this value to move the title down */
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
  }
  

  #chapter-3:hover {
    color: rgb(255, 0, 0);
    text-shadow: 2px 2px 10px rgba(255, 0, 0, 0.5);
  }

  h3 {
    font-weight: bold; /* Optional, if you want the title to stand out more */
  color: rgb(124, 0, 0);
  font-size:12px;
    font-family: "itc-galliard", serif;
font-style: normal;
    width: 100%;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align:center;
  }

  section.is-chapter {
    width: 100%;
    padding-right: 0%;
    flex-direction: column;
    box-sizing: border-box;
  }

  div.is-chapter-text {
    width: 100%;
  }

  figure {
    width: 100%;
    float: left;
    margin: 0;
  }

  figure img {
    margin: 0;
  }

  figure img:hover {
    filter: none;
  }

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }
}

/* Optional styles for smaller smartphone screens */
@media (max-width: 339px) {
  /* Your additional CSS properties for smaller screens */
}

/* Optional styles for mobile landscape */
@media (max-width: 779px) and (orientation: landscape) {
  /* Your overriding CSS properties for landscape mode */
}

/* Optional styles for small desktop screens */
@media (min-width: 780px) and (max-width: 992px) {
  /* Your overriding CSS properties for small desktops */
}