/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');

   
@font-face {
  font-family: "Hattenschweiler"; 
  src: url('./fonts/HATTEN.TTF') format('truetype'),
        url('./fonts/HATTEN.woff') format('woff'),
        url('./fonts/HATTEN.woff2') format('woff2');
    font-weight: normal;
	  font-style: normal; 
	  font-display: swap;
}


.nothing-you-could-do-regular {
  font-family: "Nothing You Could Do", cursive;
  font-weight: 400;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-gap: 10px;
  grid-template:
    "header header"
    "main sidebar"
    "footer footer"
    / 3fr 1fr;
}

header { 
  grid-area: header;
  height: 150px;
  display: flex;
  align-items: center;
}
main {
  grid-area: main;
  background-color: white;
  border-radius: 10px;
  border: 5px solid black;
}
side {
  grid-area: sidebar;
  background-color: white;
  border-radius: 10px;
  border: 5px solid black;
}
footer { grid-area: footer; }

.section {
  padding: 15px;
}

#main {
  padding: 15px;
  display: grid;
  grid-template:
    "top top top"
    "left middle right"
    / 1fr 2fr 1fr;
  justify-items: center;
}

top {
  grid-area: top;
  margin-bottom: 50px;
}
left { grid-area: left; }
middle { grid-area: middle; }
right { grid-area: right; }

.item {
  margin: 0 15px;
}

.box {
  background-color: #DADEDF;
  border-radius: 5px;
  border: 2px solid black;
  padding-left: 5px;
  padding-right: 5px;
  width: fit-content;
}

body {
  
  /*centering page*/
  background: url("/bitmap bw.png");
  min-height: 100vh;
  font-family: Trebuchet MS;
  font-size: 18px;
  max-width: 80%;
  margin: 0 auto;
  /*padding: 0 20px;*/
}

a {
  color: #1CBFE8;
}

      
h1 {
  font-family: "Hattenschweiler", sans-serif;
  font-size: 64px;
  font-weight: normal;
  margin: 0;
  text-align: center;
/* gradient */
  background-image: linear-gradient(#E3170A, #E16036);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
/* stroke */
  -webkit-text-stroke: 1px black;
  filter: drop-shadow(3px 3px 0px #000);
}

#poem {
  max-width: 450px;
  background-color: SeaShell;
  border: 5px solid PeachPuff;
  padding: 15px;
  margin: 10px 0;
}

#main-logo {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.quote {
  font-family: "Nothing You Could Do";
  font-size: 20px;
}



.logo {
  height: 100%;
  max-width: 100%;
  
}

.logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  cursor: pointer;
  /*margin-left: auto;*/
  /*margin-right: auto;*/
}

.doodle {
  max-width: 100%;
  display: flex;
  justify-content: center;
}
  
  
  
  
  
/*manga reader*/
  
.manga-reader { 
  position: relative; 
  display: flex; 
  flex-direction: row-reverse;
  justify-content: center; 
  max-width: 1000px; 
  margin: 0 auto; 
  background-color: white;
  border-radius: 10px;
  border: 5px solid black;
}

.page-img { 
  width: 50%; 
  object-fit: contain; b
}

.zone { 
  position: absolute; 
  top: 0; 
  width: 50%; 
  height: 100%; 
  cursor: pointer; 
  z-index: 10; 
}
.zone.left { left: 0; }
.zone.right { right: 0; }

.mobile-page {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: block;
}
.manga-reader.mobile-mode {
display: flex;
flex-direction: column;
align-items: center;
}

.reader {
  background-attachment: fixed;
  background-repeat: repeat;
  transition: background 0.4s ease;
}

/* Volume Covers Grid */
.volume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.volume-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.volume-card:hover {
  transform: scale(1.03);
}

.volume-cover {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  object-fit: cover;
}

.volume-title {
  margin-top: 8px;
  font-weight: bold;
  text-align: center;
}