code for the home page

<div class="image-container">

 <div class="socials">

 <h2><a title="My Discord Server" href="https://discord.gg/2qXr4yMg6Y" target="_blank" rel="noopener"><img src="https://library.naruzkurai.com/uploads/images/gallery/2023-10/scaled-1680-/3532815.png" alt="3532815.png"></a></h2>

 <h2><a href="https://twitch.tv/naruzkurai" target="_blank" rel="noopener"><img src="https://library.naruzkurai.com/uploads/images/gallery/2023-10/scaled-1680-/3532764.png" alt="3532764.png"></a></h2>

 <h2><a title="My git hub organization" href="https://github.com/orgs/naruzkuraittv/repositories" target="_blank" rel="noopener"><img src="https://library.naruzkurai.com/uploads/images/gallery/2023-10/scaled-1680-/3072620.png" alt="3072620.png"></a></h2>

 <h2><a href="https://twitter.com/NaruZkurai" target="_blank" rel="noopener"><img src="https://library.naruzkurai.com/uploads/images/gallery/2023-10/scaled-1680-/3689115.png" alt="3689115.png"></a></h2>

 </div>

 <p class="active-image"><img src="https://library.naruzkurai.com/uploads/images/gallery/2023-10/scaled-1680-/active.png" alt="active.png"></p>

</div>

<style>

.image-container {

 display: flex;

 flex-direction: column;

 align-items: center;

 justify-content: center;

 width: 100%;

}

.socials, .active-image {

 display: flex;

 justify-content: center;

 align-items: center;

}

.socials h2, .active-image {

 margin: 0 10px;

}

@media only screen and (min-width: 769px) {

 .image-container {

 flex-direction: row;

 }

}

</style>

<details id="bkmrk-how-to-use-this-site-1">

<summary>How to use this site.</summary>

<ul>

<li class="null">Click on Shelves on the top right to see what books are here.<br>

<ul>

<li class="null">Click Books on the top right to show all books without the sorting.<br></li>

</ul>

</li>

<li>search words in the search bar and it will give you the most relevent book chapter or pages.

<ul>

<li>im not sure how to enable search bar in mobile mode.<br></li>

</ul>

</li>

<li>when you want to go to the next or previous page of a book, scroll to the bottom of the page and click next page.<br></li>

<li>longer chapters or books have a chapter list on the side. with wider screens</li>

<li>in mobile mode click info to see info about a book or chapter selection.<br></li>

</ul>

</details>

<p id="bkmrk--7" class="align-center"></p>

<div class="actions mb-xl">

<div class="icon-list text-link">

<form action="https://library.naruzkurai.com/preferences/toggle-dark-mode" method="post">

<input type="hidden" name="_token" value="UiFy9oXCPYkKbDfPQzpPhRDJzDf7kjJ78nMi95PN">

<input type="hidden" name="_method" value="patch">

<button class="icon-list-item text-link"><span><svg class="svg-icon" data-icon="dark-mode" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"></path></svg></span><span>Dark Mode</span></button></form></div></div>

<div class="links text-center">

 <a class="hide-over-l" href="https://library.naruzkurai.com/search"><svg class="svg-icon" data-icon="search" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

 <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>

 <path d="M0 0h24v24H0z" fill="none"></path>

</svg>Search</a>

 <a href="https://library.naruzkurai.com/shelves" data-shortcut="shelves_view"><svg class="svg-icon" data-icon="bookshelf" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"></path><path d="M1.088 2.566h17.42v17.42H1.088z" fill="none"></path><path d="M4 20.058h15.892V22H4z"></path><path d="M2.902 1.477h17.42v17.42H2.903z" fill="none"></path><g><path d="M6.658 3.643V18h-2.38V3.643zM11.326 3.643V18H8.947V3.643zM14.722 3.856l5.613 13.214-2.19.93-5.613-13.214z"></path></g></svg>Shelves</a>

 <a href="https://library.naruzkurai.com/books" data-shortcut="books_view"><svg class="svg-icon" data-icon="books" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M19.252 1.708H8.663a1.77 1.77 0 0 0-1.765 1.764v14.12c0 .97.794 1.764 1.765 1.764h10.59a1.77 1.77 0 0 0 1.764-1.765V3.472a1.77 1.77 0 0 0-1.765-1.764zM8.663 3.472h4.412v7.06L10.87 9.208l-2.206 1.324z"></path><path d="M30.61 3.203h24v24h-24z" fill="none"></path><path d="M2.966 6.61v14c0 1.1.9 2 2 2h14v-2h-14v-14z"></path></svg>Books</a>

 

</div>