TMDND2 REquest

<!DOCTYPE html>
<html lang="en">
<head>
<title>Further Than Fillory</title>
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Dancing+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color:#aeae8a;

}

/* Style the side navigation */
.sidenav {
    height: 100%;
    width: 300px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #75744b;
    overflow-x: hidden;
    color:#aeae8a;


}

.sidenav h1{
    text-align:center;
    color:White;
    font-family: 'Dancing Script', cursive;
}


/* Side navigation links */
.sidenav a {
   font-family: 'Amatic SC', cursive;
    color: white;
    padding: 16px;
    text-decoration: none;
    display: block;
}

/* Change color on hover */
.sidenav a:hover {
    background-color:#b6b46c;
    color: black;
}

.content{
    padding-left:350px;
}

/* Style the side navigation */
.sidenavright {
    height: 100%;
    width: 300px;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #75744b;
    color:#aeae8a;
    font-size:20px;
    text-align:justify;

}


.sidenavright a{
    color:#b6b46c;
    font-size:16px;
}

.sidenavright h1{

font-size:30px;
    color:White;
     font-family: 'Arvo', serif;
font-family: center;

}

#kofi{
    padding-left:10px;
}


.thanks{
    overflow:scroll;
    max-height:360px;
    overflow-x:hidden;

}

 ::-webkit-scrollbar {
width: 20px; /** width of total scrollbar **/
background: #75744b; /** background of scrollbar **/
border: 1px solid #000; /** border around whole scrollbar **/
}

::-webkit-scrollbar-thumb {
background: #b6b46c; /** color of the moving part of the scrollbar (thumb) **/
border: 1px solid #000; /** border around moving part of scrollbar (overlaps with border of total scrollbar) **/
}
#rank{
      font-family: 'Dancing Script', cursive;
    color:#b6b46c
}
#names{
    font-size: 18px;
    font-family: 'Amatic SC', cursive;
}

</style>
</head>
<body>

<div class="sidenav">
<h1>Further Than Fillory</h1>
An unofficial <i>The Magicians</i> tabletop roleplaying book
  <a href="#">Download the book here (PDF)</a>
  <a href="/ask">Questions/Comments</a>
 <br>
 <div id="kofi"><script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support the autor on Ko-fi', '#b6b46c', 'X7X39P6J');kofiwidget2.draw();</script> </div>
</div>

</div>

<div class="content">
  <img src="https://78.media.tumblr.com/9447dd98501250568aae7608d1e103cd/tumblr_pcygd9u9KM1xy5c7zo1_500.png">
</div>


<div class="sidenavright">

Author: <a href="highkingfen.tumblr.com">Catherine Gilbert </a><br>
Editor: <a href="https://www.linkedin.com/in/léa-hamelin-couture-2b48baa9">Lea Hamelin-Couture</a><br>
Artists: <a href="http://jlsdrawings.tumblr.com/">JLSDrawings</a>, <a href="">Timeline40</a> and <a href="">That one guy</a>

 <h1>This project couldn't have existed without the contribution of these patrons!</h1>
<div class="thanks">
<div id="rank">Librarins</div>
<div id="names">
    <ul>
        <li>Elliott Waugh</li>
        <li>Taylor Tomlinson</li>
        <li>Rachel Sire</li>
    </ul>
</div>

<div id="rank">Fillorians</div>
<div id="names">
    <ul>
    <li>Melissa Potopa</li>
    <li>Brendan Schonberg</li>
    <li>OneEyedDestroyer (Sp00kySpice)</li>
          </ul></div>


<div id="rank">Child of Earth</div>
<div id="names">
    <ul>
         <li>Lexi</li>
        <li>Quinten Grimm</li>
        <li>Amara</li>
        <li>DwarvenBeardSpores</li>
        <li>Jasper Price</li>
        <li>Jessa Taylor</li>
        <li>Katie Prock</li>
        <li>S-Netchem Hetep</li>
         <li>Paul Hollingdrake</li>
    </ul>
</div>

</div>
</div></div>


</body>
</html>