html {
  scroll-behavior: smooth;
}

@font-face {
  font-family: "courier-std";
  src: url("assets/CourierStd.eot"); /* IE9 Compatibility */
  src: url("assets/CourierStd.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("assets/CourierStd.woff2") format("woff2"), /* Modern Browsers */
       url("assets/CourierStd.woff") format("woff"), /* Older Browsers */
       url("assets/CourierStd.ttf") format("truetype"), /* Safari, Android, iOS */
       url("assets/CourierStd.svg#courier-std") format("svg"); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0px;
  padding: 0px;
  font-family: "courier", serif;
  cursor: url(assets/cursor.png), auto;
}

nav {
  position: fixed;
  z-index: 10;
  inset: auto 7rem 2rem;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10rem, 2vw, 2rem);
  background-color: rgb(245, 231, 216);
  border-radius: 2rem;
  font-family: "tt-rounds-new-bold", sans-serif;
  box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.2);
}

nav a {
  text-decoration: none;
  color: black;
}

nav a:hover {
  color:rgb(214, 148, 182);
  cursor: url(assets/cursor-hover.png), auto;
}

section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slideshow-container {
  width: 100vw; /* Full width of the parent */
  height: 100vh; /* Set a fixed height for the container */
  position: relative; /* Ensure proper positioning for child elements */
  overflow: hidden; /* Prevent content from overflowing */
}

/* Style the button */
.hover-button {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for centering */
  padding: 1rem 2rem; /* Button padding */
  border: none; /* Remove border */
  border-radius: 5px; /* Rounded corners */
  color: black;
  text-decoration: none; /* Remove underline */
  font-size: 3rem; /* Font size */
  font-family: "courier", serif; /* Match your site's font */
  filter: none;
  opacity: 0; /* Initially hidden */
  z-index: 1;
}

.hover-button:hover {
  color: rgb(241, 207, 225);
  cursor: url(assets/cursor-hover.png), auto;
}

/* Show the button on hover */
.slideshow-container:hover .hover-button {
  opacity: 1; /* Make the button visible */
}

#about {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rem;
  background-color: rosybrown;
}

.about-me {
  width: 60%;
  display: flex;
  flex-direction: column;

}

#about-photo {
  width: 50%;
  object-fit: contain;
  padding-left: 120px;
}

#contact{
  background-color: rosybrown;
}

#contact a{
  text-decoration: none;
  color: black;
}

#contact a:hover {
  color: rgb(241, 207, 225);
  cursor: url(assets/cursor-hover.png), auto;
}

.contact-me {
  width: 40%;
  display: flex;
  flex-direction: column;
}

/* .grid-system-generator {
  padding: 40px 80px;
}

.save-button {
  display: flex;
  justify-content: center; 
  align-items: center;
} */

.works {
  width: 60%;
}

#soundstyle, 
#patchwork,
#grid-system,
#harajuku-haven,
#lolita-history,
#second-skin,
#cookie-monsters,
#chiffon-magazine {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}


#soundstyle:hover {
  content: url(assets/soundstyle-cover2.JPG);
  transition: 0.7s ease;
  object-fit: fill;
  width: 100%;
  height: 100%;
}

#patchwork:hover {
  content: url(assets/patchwork-cover.JPG);
  transition: 0.7s ease;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.soundstyle-images,
.patchwork-images,
.harajuku-haven-images,
.second-skin-images,
.chiffon-images,
.harajuku-illust-images {
  width: 60%;
}

#graphics,
#illustrations {
  object-fit: contain;
  width: 100%;
}

.graphics,
.illustrations {
  display: flex; /* Enable Flexbox for the container */
  flex-direction: row; /* Arrange children in a row (side by side) */
  justify-content: space-between; /* Add space between the columns */
  align-items: flex-start; /* Align items at the top */
  gap: 2rem; /* Add spacing between the columns */
}

.return-button {
  width: 10%; /* Set the width of the return button column */
  text-align: left; /* Align text to the left */
}

.works {
  width: 80%; /* Set the width of the works column */
  padding: 1rem;
  font-size: 0.8rem;
}

.soundstyle {
  display: flex; /* Enable Flexbox for the container */
  flex-direction: row; /* Arrange children in a row (side by side) */
  justify-content: space-between; /* Add space between the columns */
  align-items: flex-start; /* Align items at the top */
  gap: 2rem; /* Add spacing between the columns */
}

.soundstyle-images {
  width: 50%; /* Set the width of the return button column */
}

.soundstyle-text {
  width: 50%; /* Set the width of the works column */
  text-align: left; /* Align text to the left */
}

.patchwork {
  display: flex; /* Enable Flexbox for the container */
  flex-direction: row; /* Arrange children in a row (side by side) */
  justify-content: space-between; /* Add space between the columns */
  align-items: flex-start; /* Align items at the top */
  gap: 2rem; /* Add spacing between the columns */
}

.patchwork-images {
  width: 50%; /* Set the width of the return button column */
}

.patchwork-text {
  width: 50%; /* Set the width of the works column */
  text-align: left; /* Align text to the left */
}

.harajuku-haven {
  display: flex; /* Enable Flexbox for the container */
  flex-direction: row; /* Arrange children in a row (side by side) */
  justify-content: space-between; /* Add space between the columns */
  align-items: flex-start; /* Align items at the top */
  gap: 2rem; /* Add spacing between the columns */
}

.harajuku-haven-images {
  width: 50%; /* Set the width of the return button column */
}

.harajuku-haven-text {
  width: 50%; /* Set the width of the works column */
  text-align: left; /* Align text to the left */
}

.second-skin {
  display: flex; /* Enable Flexbox for the container */
  flex-direction: row; /* Arrange children in a row (side by side) */
  justify-content: space-between; /* Add space between the columns */
  align-items: flex-start; /* Align items at the top */
  gap: 2rem; /* Add spacing between the columns */
}

.second-skin-images {
  width: 50%; /* Set the width of the return button column */
}

.second-skin-text {
  width: 50%; /* Set the width of the works column */
  text-align: left; /* Align text to the left */
}

.chiffon-magazine {
  display: flex; /* Enable Flexbox for the container */
  flex-direction: row; /* Arrange children in a row (side by side) */
  justify-content: space-between; /* Add space between the columns */
  align-items: flex-start; /* Align items at the top */
  gap: 2rem; /* Add spacing between the columns */
}

.chiffon-images {
  width: 50%; /* Set the width of the return button column */
}

.chiffon-text {
  width: 50%; /* Set the width of the works column */
  text-align: left; /* Align text to the left */
}