diff --git a/bookreviews.html b/bookreviews.html
new file mode 100644
index 0000000..ce10d14
--- /dev/null
+++ b/bookreviews.html
@@ -0,0 +1,345 @@
+<body>
+	<div id="container">
+		<div id="header" style="height: 188px"></div>
+		<div id="headerArea">
+			<div id="navbar-container"></div>
+		</div>
+
+		<div id="flex">
+			<!-- left !-->
+			<aside id="leftSidebar" style="margin-right: 10px">
+				<script
+					type="text/javascript"
+					src="https://counter.websiteout.com/js/30/0/0/0"
+				></script>
+				<div id="leftSidebarPlaceholder">
+					<p>This content failed to load, try enabling javascript</p>
+				</div>
+			</aside>
+			<!-- MIDDLE !-->
+			<main>
+				<h1>Reviews!</h1>
+				<p>
+					Obviously, my opinion is important, especially so on the
+					internet, so I'll be sharing my thoughts on all kinds of
+					things.
+				</p>
+				<p>
+					Of course, these are not just opinions, they are facts, and
+					as such, if you disagree, you are wrong. Objectively.
+				</p>
+				<p>
+					Some reviews may be detailed, while others might just have a
+					brief summary and score.
+				</p>
+				<p><strong>Categories</strong></p>
+				<ul>
+					<li>
+						<a href="gamereviews.html">Games</a>
+					</li>
+					<li>
+						<a href="moviereviews.html">Movies</a>
+					</li>
+					<li>
+						<a href="tvreviews.html">TV/Series</a>
+					</li>
+					<li>
+						<a href="bookreviews.html">Books</a>
+					</li>
+					<li>
+						<a href="comicreviews.html">Comics/Manga etc.</a>
+					</li>
+				</ul>
+				<p>
+					I find the modern 0-10 or 0-5 rating systems to be poorly
+					formatted, as people seem to think a 7/10 is okay, and that
+					5/10 is bad. As such, my rating scale will be -5 to 5, with
+					0 being a neutral score.
+				</p>
+				<p>
+					A neutral score? How horrible, everything must either be
+					good or bad!!! No.
+				</p>
+				<p>
+					Some things are just, okay, and nothing special but nothing
+					bad either, and I think it's important to have those in
+					reviews too, I'd go so far as to say that something I rate a
+					0, is still worth consuming if one desires to, it's when we
+					go below 0 that I am already starting to recommend not
+					toucing it.
+				</p>
+			</main>
+			<!-- right !-->
+			<aside id="rightSidebar" style="margin-left: 10px">
+				<div id="rightSidebarPlaceholder">
+					<p>This content failed to load, try enabling javascript</p>
+				</div>
+			</aside>
+		</div>
+
+		<footer id="footer" style="margin-top: 10px"></footer>
+	</div>
+	<!-- THIS IS THE CSS !-->
+	<style>
+		/* user styles */
+
+		/* styles are what change the color and sizes of stuff on your site. */
+
+		/* these are variables that are being used in the code
+    these tended to confuse some people, so I only kept 
+    the images as variables */
+
+		:root {
+			--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
+			--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
+
+			/* colors */
+			--content: #43256e;
+		}
+
+		/* if you have the URL of a font, you can set it below */
+		/* feel free to delete this if it's not your vibe */
+
+		/* this seems like a lot for just one font and I would have to agree 
+    but I wanted to include an example of how to include a custom font.
+    If you download a font file you can upload it onto your Neocities
+    and then link it! Many fonts have separate files for each style
+    (bold, italic, etc. T_T) which is why there are so many!
+    
+    */
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
+			font-weight: bold;
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
+			font-style: italic;
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
+			font-style: italic;
+			font-weight: bold;
+		}
+
+		body {
+			font-family: "Nunito", sans-serif;
+			margin: 0;
+			background-color: #08031a;
+			/* you can delete the line below if you'd prefer to not use an image */
+			background-size: 65px;
+			color: #fceaff;
+			background-image: var(--body-bg-image);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		/* below this line is CSS for the layout */
+
+		/* this is a CSS comment
+    to uncomment a line of CSS, remove the * and the /
+    before and after the text */
+
+		/* the "container" is what wraps your entire website */
+		/* if you want something (like the header) to be Wider than
+    the other elements, you will need to move that div outside
+    of the container */
+		#container {
+			max-width: 900px;
+			/* this is the width of your layout! */
+			/* if you change the above value, scroll to the bottom
+      and change the media query according to the comment! */
+			margin: 0 auto;
+			/* this centers the entire page */
+		}
+
+		/* the area below is for all links on your page
+    EXCEPT for the navigation */
+		#container a {
+			color: #fcc3ff;
+			font-weight: bold;
+			/* if you want to remove the underline
+      you can add a line below here that says:
+      text-decoration:none; */
+		}
+
+		#header {
+			width: 100%;
+			background-color: #ffa6da;
+			/* header color here! */
+			height: 150px;
+			/* this is only for a background image! */
+			/* if you want to put images IN the header, 
+      you can add them directly to the <div id="header"></div> element! */
+			background-image: var(--header-image);
+			background-size: 100%;
+		}
+
+		/* navigation section!! */
+		#navbar {
+			height: 40px;
+			background-color: #a0006b;
+			/* navbar color */
+			width: 100%;
+		}
+
+		#navbar ul {
+			display: flex;
+			padding: 0;
+			margin: 0;
+			list-style-type: none;
+			justify-content: space-evenly;
+		}
+
+		#navbar li {
+			padding-top: 10px;
+		}
+
+		/* navigation links*/
+		#navbar li a {
+			color: #ed64f5;
+			/* navbar text color */
+			font-weight: 800;
+			text-decoration: none;
+			/* this removes the underline */
+		}
+
+		/* navigation link when a link is hovered over */
+		#navbar li a:hover {
+			color: #a49cba;
+			text-decoration: underline;
+		}
+
+		#flex {
+			display: flex;
+		}
+
+		/* this colors BOTH sidebars
+    if you want to style them separately,
+    create styles for #leftSidebar and #rightSidebar */
+		aside {
+			background-color: #a0006b;
+			width: 200px;
+			padding: 20px;
+			font-size: smaller;
+			/* this makes the sidebar text slightly smaller */
+		}
+
+		/* this is the color of the main content area,
+    between the sidebars! */
+		main {
+			background-color: #bd2289;
+			flex: 1;
+			padding: 20px;
+			order: 2;
+		}
+
+		/* what's this "order" stuff about??
+    allow me to explain!
+    if you're using both sidebars, the "order" value
+    tells the CSS the order in which to display them.
+    left sidebar is 1, content is 2, and right sidebar is 3! */
+
+		#leftSidebar {
+			order: 1;
+		}
+
+		#rightSidebar {
+			order: 3;
+		}
+
+		footer {
+			background-color: #13092d;
+			/* background color for footer */
+			width: 100%;
+			height: 40px;
+			padding: 10px;
+			text-align: center;
+			/* this centers the footer text */
+		}
+
+		h1,
+		h2,
+		h3 {
+			color: #ed64f5;
+		}
+
+		h1 {
+			font-size: 25px;
+		}
+
+		strong {
+			/* this styles bold text */
+			color: #ed64f5;
+		}
+
+		/* this is just a cool box, it's the darker colored one */
+		.box {
+			background-color: #13092d;
+			border: 1px solid #ed64f5;
+			padding: 10px;
+		}
+
+		/* CSS for extras */
+
+		#topBar {
+			width: 100%;
+			height: 30px;
+			padding: 10px;
+			font-size: smaller;
+			background-color: #13092d;
+		}
+
+		/* BELOW THIS POINT IS MEDIA QUERY */
+
+		/* so you wanna change the width of your page? 
+    by default, the container width is 900px.
+    in order to keep things responsive, take your new height,
+    and then subtrack it by 100. use this new number as the 
+    "max-width" value below
+    */
+
+		@media only screen and (max-width: 800px) {
+			#flex {
+				flex-wrap: wrap;
+			}
+
+			aside {
+				width: 100%;
+			}
+
+			/* the order of the items is adjusted here for responsiveness!
+      since the sidebars would be too small on a mobile device.
+      feel free to play around with the order!
+      */
+			main {
+				order: 1;
+			}
+
+			#leftSidebar {
+				order: 2;
+			}
+
+			#rightSidebar {
+				order: 3;
+			}
+
+			#navbar ul {
+				flex-wrap: wrap;
+			}
+		}
+	</style>
+	<script src="components.js"></script>
+</body>
diff --git a/comicreviews.html b/comicreviews.html
new file mode 100644
index 0000000..ce10d14
--- /dev/null
+++ b/comicreviews.html
@@ -0,0 +1,345 @@
+<body>
+	<div id="container">
+		<div id="header" style="height: 188px"></div>
+		<div id="headerArea">
+			<div id="navbar-container"></div>
+		</div>
+
+		<div id="flex">
+			<!-- left !-->
+			<aside id="leftSidebar" style="margin-right: 10px">
+				<script
+					type="text/javascript"
+					src="https://counter.websiteout.com/js/30/0/0/0"
+				></script>
+				<div id="leftSidebarPlaceholder">
+					<p>This content failed to load, try enabling javascript</p>
+				</div>
+			</aside>
+			<!-- MIDDLE !-->
+			<main>
+				<h1>Reviews!</h1>
+				<p>
+					Obviously, my opinion is important, especially so on the
+					internet, so I'll be sharing my thoughts on all kinds of
+					things.
+				</p>
+				<p>
+					Of course, these are not just opinions, they are facts, and
+					as such, if you disagree, you are wrong. Objectively.
+				</p>
+				<p>
+					Some reviews may be detailed, while others might just have a
+					brief summary and score.
+				</p>
+				<p><strong>Categories</strong></p>
+				<ul>
+					<li>
+						<a href="gamereviews.html">Games</a>
+					</li>
+					<li>
+						<a href="moviereviews.html">Movies</a>
+					</li>
+					<li>
+						<a href="tvreviews.html">TV/Series</a>
+					</li>
+					<li>
+						<a href="bookreviews.html">Books</a>
+					</li>
+					<li>
+						<a href="comicreviews.html">Comics/Manga etc.</a>
+					</li>
+				</ul>
+				<p>
+					I find the modern 0-10 or 0-5 rating systems to be poorly
+					formatted, as people seem to think a 7/10 is okay, and that
+					5/10 is bad. As such, my rating scale will be -5 to 5, with
+					0 being a neutral score.
+				</p>
+				<p>
+					A neutral score? How horrible, everything must either be
+					good or bad!!! No.
+				</p>
+				<p>
+					Some things are just, okay, and nothing special but nothing
+					bad either, and I think it's important to have those in
+					reviews too, I'd go so far as to say that something I rate a
+					0, is still worth consuming if one desires to, it's when we
+					go below 0 that I am already starting to recommend not
+					toucing it.
+				</p>
+			</main>
+			<!-- right !-->
+			<aside id="rightSidebar" style="margin-left: 10px">
+				<div id="rightSidebarPlaceholder">
+					<p>This content failed to load, try enabling javascript</p>
+				</div>
+			</aside>
+		</div>
+
+		<footer id="footer" style="margin-top: 10px"></footer>
+	</div>
+	<!-- THIS IS THE CSS !-->
+	<style>
+		/* user styles */
+
+		/* styles are what change the color and sizes of stuff on your site. */
+
+		/* these are variables that are being used in the code
+    these tended to confuse some people, so I only kept 
+    the images as variables */
+
+		:root {
+			--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
+			--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
+
+			/* colors */
+			--content: #43256e;
+		}
+
+		/* if you have the URL of a font, you can set it below */
+		/* feel free to delete this if it's not your vibe */
+
+		/* this seems like a lot for just one font and I would have to agree 
+    but I wanted to include an example of how to include a custom font.
+    If you download a font file you can upload it onto your Neocities
+    and then link it! Many fonts have separate files for each style
+    (bold, italic, etc. T_T) which is why there are so many!
+    
+    */
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
+			font-weight: bold;
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
+			font-style: italic;
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
+			font-style: italic;
+			font-weight: bold;
+		}
+
+		body {
+			font-family: "Nunito", sans-serif;
+			margin: 0;
+			background-color: #08031a;
+			/* you can delete the line below if you'd prefer to not use an image */
+			background-size: 65px;
+			color: #fceaff;
+			background-image: var(--body-bg-image);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		/* below this line is CSS for the layout */
+
+		/* this is a CSS comment
+    to uncomment a line of CSS, remove the * and the /
+    before and after the text */
+
+		/* the "container" is what wraps your entire website */
+		/* if you want something (like the header) to be Wider than
+    the other elements, you will need to move that div outside
+    of the container */
+		#container {
+			max-width: 900px;
+			/* this is the width of your layout! */
+			/* if you change the above value, scroll to the bottom
+      and change the media query according to the comment! */
+			margin: 0 auto;
+			/* this centers the entire page */
+		}
+
+		/* the area below is for all links on your page
+    EXCEPT for the navigation */
+		#container a {
+			color: #fcc3ff;
+			font-weight: bold;
+			/* if you want to remove the underline
+      you can add a line below here that says:
+      text-decoration:none; */
+		}
+
+		#header {
+			width: 100%;
+			background-color: #ffa6da;
+			/* header color here! */
+			height: 150px;
+			/* this is only for a background image! */
+			/* if you want to put images IN the header, 
+      you can add them directly to the <div id="header"></div> element! */
+			background-image: var(--header-image);
+			background-size: 100%;
+		}
+
+		/* navigation section!! */
+		#navbar {
+			height: 40px;
+			background-color: #a0006b;
+			/* navbar color */
+			width: 100%;
+		}
+
+		#navbar ul {
+			display: flex;
+			padding: 0;
+			margin: 0;
+			list-style-type: none;
+			justify-content: space-evenly;
+		}
+
+		#navbar li {
+			padding-top: 10px;
+		}
+
+		/* navigation links*/
+		#navbar li a {
+			color: #ed64f5;
+			/* navbar text color */
+			font-weight: 800;
+			text-decoration: none;
+			/* this removes the underline */
+		}
+
+		/* navigation link when a link is hovered over */
+		#navbar li a:hover {
+			color: #a49cba;
+			text-decoration: underline;
+		}
+
+		#flex {
+			display: flex;
+		}
+
+		/* this colors BOTH sidebars
+    if you want to style them separately,
+    create styles for #leftSidebar and #rightSidebar */
+		aside {
+			background-color: #a0006b;
+			width: 200px;
+			padding: 20px;
+			font-size: smaller;
+			/* this makes the sidebar text slightly smaller */
+		}
+
+		/* this is the color of the main content area,
+    between the sidebars! */
+		main {
+			background-color: #bd2289;
+			flex: 1;
+			padding: 20px;
+			order: 2;
+		}
+
+		/* what's this "order" stuff about??
+    allow me to explain!
+    if you're using both sidebars, the "order" value
+    tells the CSS the order in which to display them.
+    left sidebar is 1, content is 2, and right sidebar is 3! */
+
+		#leftSidebar {
+			order: 1;
+		}
+
+		#rightSidebar {
+			order: 3;
+		}
+
+		footer {
+			background-color: #13092d;
+			/* background color for footer */
+			width: 100%;
+			height: 40px;
+			padding: 10px;
+			text-align: center;
+			/* this centers the footer text */
+		}
+
+		h1,
+		h2,
+		h3 {
+			color: #ed64f5;
+		}
+
+		h1 {
+			font-size: 25px;
+		}
+
+		strong {
+			/* this styles bold text */
+			color: #ed64f5;
+		}
+
+		/* this is just a cool box, it's the darker colored one */
+		.box {
+			background-color: #13092d;
+			border: 1px solid #ed64f5;
+			padding: 10px;
+		}
+
+		/* CSS for extras */
+
+		#topBar {
+			width: 100%;
+			height: 30px;
+			padding: 10px;
+			font-size: smaller;
+			background-color: #13092d;
+		}
+
+		/* BELOW THIS POINT IS MEDIA QUERY */
+
+		/* so you wanna change the width of your page? 
+    by default, the container width is 900px.
+    in order to keep things responsive, take your new height,
+    and then subtrack it by 100. use this new number as the 
+    "max-width" value below
+    */
+
+		@media only screen and (max-width: 800px) {
+			#flex {
+				flex-wrap: wrap;
+			}
+
+			aside {
+				width: 100%;
+			}
+
+			/* the order of the items is adjusted here for responsiveness!
+      since the sidebars would be too small on a mobile device.
+      feel free to play around with the order!
+      */
+			main {
+				order: 1;
+			}
+
+			#leftSidebar {
+				order: 2;
+			}
+
+			#rightSidebar {
+				order: 3;
+			}
+
+			#navbar ul {
+				flex-wrap: wrap;
+			}
+		}
+	</style>
+	<script src="components.js"></script>
+</body>
diff --git a/gamereviews.html b/gamereviews.html
new file mode 100644
index 0000000..db88673
--- /dev/null
+++ b/gamereviews.html
@@ -0,0 +1,337 @@
+<body>
+	<div id="container">
+		<div id="header" style="height: 188px"></div>
+		<div id="headerArea">
+			<div id="navbar-container"></div>
+		</div>
+
+		<div id="flex">
+			<!-- left !-->
+			<aside id="leftSidebar" style="margin-right: 10px">
+				<script
+					type="text/javascript"
+					src="https://counter.websiteout.com/js/30/0/0/0"
+				></script>
+				<div id="leftSidebarPlaceholder">
+					<p>This content failed to load, try enabling javascript</p>
+				</div>
+			</aside>
+			<!-- MIDDLE !-->
+			<main>
+				<p><a href="reviews.html">← Back to all reviews</a></p>
+
+				<h1>Game Reviews!</h1>
+				<p>
+					Obviously, my opinion is important, especially so on the
+					internet, so I'll be sharing my thoughts on all kinds of
+					things.
+				</p>
+				<p>
+					Of course, these are not just opinions, they are facts, and
+					as such, if you disagree, you are wrong. Objectively.
+				</p>
+				<p>
+					Some reviews may be detailed, while others might just have a
+					brief summary and score.
+				</p>
+				<p><strong>List of reviews</strong></p>
+				<ul>
+					<li>
+						<a href="reviews/world-of-warcraft.html"
+							>World of Warcraft</a
+						>
+					</li>
+				</ul>
+				<p>
+					I find the modern 0-10 or 0-5 rating systems to be poorly
+					formatted, as people seem to think a 7/10 is okay, and that
+					5/10 is bad. As such, my rating scale will be -5 to 5, with
+					0 being a neutral score.
+				</p>
+				<p>
+					A neutral score? How horrible, everything must either be
+					good or bad!!! No.
+				</p>
+				<p>
+					Some things are just, okay, and nothing special but nothing
+					bad either, and I think it's important to have those in
+					reviews too, I'd go so far as to say that something I rate a
+					0, is still worth consuming if one desires to, it's when we
+					go below 0 that I am already starting to recommend not
+					toucing it.
+				</p>
+			</main>
+			<!-- right !-->
+			<aside id="rightSidebar" style="margin-left: 10px">
+				<div id="rightSidebarPlaceholder">
+					<p>This content failed to load, try enabling javascript</p>
+				</div>
+			</aside>
+		</div>
+
+		<footer id="footer" style="margin-top: 10px"></footer>
+	</div>
+	<!-- THIS IS THE CSS !-->
+	<style>
+		/* user styles */
+
+		/* styles are what change the color and sizes of stuff on your site. */
+
+		/* these are variables that are being used in the code
+    these tended to confuse some people, so I only kept 
+    the images as variables */
+
+		:root {
+			--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
+			--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
+
+			/* colors */
+			--content: #43256e;
+		}
+
+		/* if you have the URL of a font, you can set it below */
+		/* feel free to delete this if it's not your vibe */
+
+		/* this seems like a lot for just one font and I would have to agree 
+    but I wanted to include an example of how to include a custom font.
+    If you download a font file you can upload it onto your Neocities
+    and then link it! Many fonts have separate files for each style
+    (bold, italic, etc. T_T) which is why there are so many!
+    
+    */
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
+			font-weight: bold;
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
+			font-style: italic;
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
+			font-style: italic;
+			font-weight: bold;
+		}
+
+		body {
+			font-family: "Nunito", sans-serif;
+			margin: 0;
+			background-color: #08031a;
+			/* you can delete the line below if you'd prefer to not use an image */
+			background-size: 65px;
+			color: #fceaff;
+			background-image: var(--body-bg-image);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		/* below this line is CSS for the layout */
+
+		/* this is a CSS comment
+    to uncomment a line of CSS, remove the * and the /
+    before and after the text */
+
+		/* the "container" is what wraps your entire website */
+		/* if you want something (like the header) to be Wider than
+    the other elements, you will need to move that div outside
+    of the container */
+		#container {
+			max-width: 900px;
+			/* this is the width of your layout! */
+			/* if you change the above value, scroll to the bottom
+      and change the media query according to the comment! */
+			margin: 0 auto;
+			/* this centers the entire page */
+		}
+
+		/* the area below is for all links on your page
+    EXCEPT for the navigation */
+		#container a {
+			color: #fcc3ff;
+			font-weight: bold;
+			/* if you want to remove the underline
+      you can add a line below here that says:
+      text-decoration:none; */
+		}
+
+		#header {
+			width: 100%;
+			background-color: #ffa6da;
+			/* header color here! */
+			height: 150px;
+			/* this is only for a background image! */
+			/* if you want to put images IN the header, 
+      you can add them directly to the <div id="header"></div> element! */
+			background-image: var(--header-image);
+			background-size: 100%;
+		}
+
+		/* navigation section!! */
+		#navbar {
+			height: 40px;
+			background-color: #a0006b;
+			/* navbar color */
+			width: 100%;
+		}
+
+		#navbar ul {
+			display: flex;
+			padding: 0;
+			margin: 0;
+			list-style-type: none;
+			justify-content: space-evenly;
+		}
+
+		#navbar li {
+			padding-top: 10px;
+		}
+
+		/* navigation links*/
+		#navbar li a {
+			color: #ed64f5;
+			/* navbar text color */
+			font-weight: 800;
+			text-decoration: none;
+			/* this removes the underline */
+		}
+
+		/* navigation link when a link is hovered over */
+		#navbar li a:hover {
+			color: #a49cba;
+			text-decoration: underline;
+		}
+
+		#flex {
+			display: flex;
+		}
+
+		/* this colors BOTH sidebars
+    if you want to style them separately,
+    create styles for #leftSidebar and #rightSidebar */
+		aside {
+			background-color: #a0006b;
+			width: 200px;
+			padding: 20px;
+			font-size: smaller;
+			/* this makes the sidebar text slightly smaller */
+		}
+
+		/* this is the color of the main content area,
+    between the sidebars! */
+		main {
+			background-color: #bd2289;
+			flex: 1;
+			padding: 20px;
+			order: 2;
+		}
+
+		/* what's this "order" stuff about??
+    allow me to explain!
+    if you're using both sidebars, the "order" value
+    tells the CSS the order in which to display them.
+    left sidebar is 1, content is 2, and right sidebar is 3! */
+
+		#leftSidebar {
+			order: 1;
+		}
+
+		#rightSidebar {
+			order: 3;
+		}
+
+		footer {
+			background-color: #13092d;
+			/* background color for footer */
+			width: 100%;
+			height: 40px;
+			padding: 10px;
+			text-align: center;
+			/* this centers the footer text */
+		}
+
+		h1,
+		h2,
+		h3 {
+			color: #ed64f5;
+		}
+
+		h1 {
+			font-size: 25px;
+		}
+
+		strong {
+			/* this styles bold text */
+			color: #ed64f5;
+		}
+
+		/* this is just a cool box, it's the darker colored one */
+		.box {
+			background-color: #13092d;
+			border: 1px solid #ed64f5;
+			padding: 10px;
+		}
+
+		/* CSS for extras */
+
+		#topBar {
+			width: 100%;
+			height: 30px;
+			padding: 10px;
+			font-size: smaller;
+			background-color: #13092d;
+		}
+
+		/* BELOW THIS POINT IS MEDIA QUERY */
+
+		/* so you wanna change the width of your page? 
+    by default, the container width is 900px.
+    in order to keep things responsive, take your new height,
+    and then subtrack it by 100. use this new number as the 
+    "max-width" value below
+    */
+
+		@media only screen and (max-width: 800px) {
+			#flex {
+				flex-wrap: wrap;
+			}
+
+			aside {
+				width: 100%;
+			}
+
+			/* the order of the items is adjusted here for responsiveness!
+      since the sidebars would be too small on a mobile device.
+      feel free to play around with the order!
+      */
+			main {
+				order: 1;
+			}
+
+			#leftSidebar {
+				order: 2;
+			}
+
+			#rightSidebar {
+				order: 3;
+			}
+
+			#navbar ul {
+				flex-wrap: wrap;
+			}
+		}
+	</style>
+	<script src="components.js"></script>
+</body>
diff --git a/moviereviews.html b/moviereviews.html
new file mode 100644
index 0000000..ce10d14
--- /dev/null
+++ b/moviereviews.html
@@ -0,0 +1,345 @@
+<body>
+	<div id="container">
+		<div id="header" style="height: 188px"></div>
+		<div id="headerArea">
+			<div id="navbar-container"></div>
+		</div>
+
+		<div id="flex">
+			<!-- left !-->
+			<aside id="leftSidebar" style="margin-right: 10px">
+				<script
+					type="text/javascript"
+					src="https://counter.websiteout.com/js/30/0/0/0"
+				></script>
+				<div id="leftSidebarPlaceholder">
+					<p>This content failed to load, try enabling javascript</p>
+				</div>
+			</aside>
+			<!-- MIDDLE !-->
+			<main>
+				<h1>Reviews!</h1>
+				<p>
+					Obviously, my opinion is important, especially so on the
+					internet, so I'll be sharing my thoughts on all kinds of
+					things.
+				</p>
+				<p>
+					Of course, these are not just opinions, they are facts, and
+					as such, if you disagree, you are wrong. Objectively.
+				</p>
+				<p>
+					Some reviews may be detailed, while others might just have a
+					brief summary and score.
+				</p>
+				<p><strong>Categories</strong></p>
+				<ul>
+					<li>
+						<a href="gamereviews.html">Games</a>
+					</li>
+					<li>
+						<a href="moviereviews.html">Movies</a>
+					</li>
+					<li>
+						<a href="tvreviews.html">TV/Series</a>
+					</li>
+					<li>
+						<a href="bookreviews.html">Books</a>
+					</li>
+					<li>
+						<a href="comicreviews.html">Comics/Manga etc.</a>
+					</li>
+				</ul>
+				<p>
+					I find the modern 0-10 or 0-5 rating systems to be poorly
+					formatted, as people seem to think a 7/10 is okay, and that
+					5/10 is bad. As such, my rating scale will be -5 to 5, with
+					0 being a neutral score.
+				</p>
+				<p>
+					A neutral score? How horrible, everything must either be
+					good or bad!!! No.
+				</p>
+				<p>
+					Some things are just, okay, and nothing special but nothing
+					bad either, and I think it's important to have those in
+					reviews too, I'd go so far as to say that something I rate a
+					0, is still worth consuming if one desires to, it's when we
+					go below 0 that I am already starting to recommend not
+					toucing it.
+				</p>
+			</main>
+			<!-- right !-->
+			<aside id="rightSidebar" style="margin-left: 10px">
+				<div id="rightSidebarPlaceholder">
+					<p>This content failed to load, try enabling javascript</p>
+				</div>
+			</aside>
+		</div>
+
+		<footer id="footer" style="margin-top: 10px"></footer>
+	</div>
+	<!-- THIS IS THE CSS !-->
+	<style>
+		/* user styles */
+
+		/* styles are what change the color and sizes of stuff on your site. */
+
+		/* these are variables that are being used in the code
+    these tended to confuse some people, so I only kept 
+    the images as variables */
+
+		:root {
+			--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
+			--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
+
+			/* colors */
+			--content: #43256e;
+		}
+
+		/* if you have the URL of a font, you can set it below */
+		/* feel free to delete this if it's not your vibe */
+
+		/* this seems like a lot for just one font and I would have to agree 
+    but I wanted to include an example of how to include a custom font.
+    If you download a font file you can upload it onto your Neocities
+    and then link it! Many fonts have separate files for each style
+    (bold, italic, etc. T_T) which is why there are so many!
+    
+    */
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
+			font-weight: bold;
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
+			font-style: italic;
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
+			font-style: italic;
+			font-weight: bold;
+		}
+
+		body {
+			font-family: "Nunito", sans-serif;
+			margin: 0;
+			background-color: #08031a;
+			/* you can delete the line below if you'd prefer to not use an image */
+			background-size: 65px;
+			color: #fceaff;
+			background-image: var(--body-bg-image);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		/* below this line is CSS for the layout */
+
+		/* this is a CSS comment
+    to uncomment a line of CSS, remove the * and the /
+    before and after the text */
+
+		/* the "container" is what wraps your entire website */
+		/* if you want something (like the header) to be Wider than
+    the other elements, you will need to move that div outside
+    of the container */
+		#container {
+			max-width: 900px;
+			/* this is the width of your layout! */
+			/* if you change the above value, scroll to the bottom
+      and change the media query according to the comment! */
+			margin: 0 auto;
+			/* this centers the entire page */
+		}
+
+		/* the area below is for all links on your page
+    EXCEPT for the navigation */
+		#container a {
+			color: #fcc3ff;
+			font-weight: bold;
+			/* if you want to remove the underline
+      you can add a line below here that says:
+      text-decoration:none; */
+		}
+
+		#header {
+			width: 100%;
+			background-color: #ffa6da;
+			/* header color here! */
+			height: 150px;
+			/* this is only for a background image! */
+			/* if you want to put images IN the header, 
+      you can add them directly to the <div id="header"></div> element! */
+			background-image: var(--header-image);
+			background-size: 100%;
+		}
+
+		/* navigation section!! */
+		#navbar {
+			height: 40px;
+			background-color: #a0006b;
+			/* navbar color */
+			width: 100%;
+		}
+
+		#navbar ul {
+			display: flex;
+			padding: 0;
+			margin: 0;
+			list-style-type: none;
+			justify-content: space-evenly;
+		}
+
+		#navbar li {
+			padding-top: 10px;
+		}
+
+		/* navigation links*/
+		#navbar li a {
+			color: #ed64f5;
+			/* navbar text color */
+			font-weight: 800;
+			text-decoration: none;
+			/* this removes the underline */
+		}
+
+		/* navigation link when a link is hovered over */
+		#navbar li a:hover {
+			color: #a49cba;
+			text-decoration: underline;
+		}
+
+		#flex {
+			display: flex;
+		}
+
+		/* this colors BOTH sidebars
+    if you want to style them separately,
+    create styles for #leftSidebar and #rightSidebar */
+		aside {
+			background-color: #a0006b;
+			width: 200px;
+			padding: 20px;
+			font-size: smaller;
+			/* this makes the sidebar text slightly smaller */
+		}
+
+		/* this is the color of the main content area,
+    between the sidebars! */
+		main {
+			background-color: #bd2289;
+			flex: 1;
+			padding: 20px;
+			order: 2;
+		}
+
+		/* what's this "order" stuff about??
+    allow me to explain!
+    if you're using both sidebars, the "order" value
+    tells the CSS the order in which to display them.
+    left sidebar is 1, content is 2, and right sidebar is 3! */
+
+		#leftSidebar {
+			order: 1;
+		}
+
+		#rightSidebar {
+			order: 3;
+		}
+
+		footer {
+			background-color: #13092d;
+			/* background color for footer */
+			width: 100%;
+			height: 40px;
+			padding: 10px;
+			text-align: center;
+			/* this centers the footer text */
+		}
+
+		h1,
+		h2,
+		h3 {
+			color: #ed64f5;
+		}
+
+		h1 {
+			font-size: 25px;
+		}
+
+		strong {
+			/* this styles bold text */
+			color: #ed64f5;
+		}
+
+		/* this is just a cool box, it's the darker colored one */
+		.box {
+			background-color: #13092d;
+			border: 1px solid #ed64f5;
+			padding: 10px;
+		}
+
+		/* CSS for extras */
+
+		#topBar {
+			width: 100%;
+			height: 30px;
+			padding: 10px;
+			font-size: smaller;
+			background-color: #13092d;
+		}
+
+		/* BELOW THIS POINT IS MEDIA QUERY */
+
+		/* so you wanna change the width of your page? 
+    by default, the container width is 900px.
+    in order to keep things responsive, take your new height,
+    and then subtrack it by 100. use this new number as the 
+    "max-width" value below
+    */
+
+		@media only screen and (max-width: 800px) {
+			#flex {
+				flex-wrap: wrap;
+			}
+
+			aside {
+				width: 100%;
+			}
+
+			/* the order of the items is adjusted here for responsiveness!
+      since the sidebars would be too small on a mobile device.
+      feel free to play around with the order!
+      */
+			main {
+				order: 1;
+			}
+
+			#leftSidebar {
+				order: 2;
+			}
+
+			#rightSidebar {
+				order: 3;
+			}
+
+			#navbar ul {
+				flex-wrap: wrap;
+			}
+		}
+	</style>
+	<script src="components.js"></script>
+</body>
diff --git a/reviews.html b/reviews.html
index da47983..ce10d14 100644
--- a/reviews.html
+++ b/reviews.html
@@ -19,24 +19,55 @@
 			<!-- MIDDLE !-->
 			<main>
 				<h1>Reviews!</h1>
+				<p>
+					Obviously, my opinion is important, especially so on the
+					internet, so I'll be sharing my thoughts on all kinds of
+					things.
+				</p>
+				<p>
+					Of course, these are not just opinions, they are facts, and
+					as such, if you disagree, you are wrong. Objectively.
+				</p>
+				<p>
+					Some reviews may be detailed, while others might just have a
+					brief summary and score.
+				</p>
 				<p><strong>Categories</strong></p>
 				<ul>
 					<li>
-						<a href="">Games</a>
+						<a href="gamereviews.html">Games</a>
 					</li>
 					<li>
-						<a href="">Movies</a>
+						<a href="moviereviews.html">Movies</a>
 					</li>
 					<li>
-						<a href="">TV/Series</a>
+						<a href="tvreviews.html">TV/Series</a>
 					</li>
 					<li>
-						<a href="">Books</a>
+						<a href="bookreviews.html">Books</a>
 					</li>
 					<li>
-						<a href="">Comics/Manga etc.</a>
+						<a href="comicreviews.html">Comics/Manga etc.</a>
 					</li>
 				</ul>
+				<p>
+					I find the modern 0-10 or 0-5 rating systems to be poorly
+					formatted, as people seem to think a 7/10 is okay, and that
+					5/10 is bad. As such, my rating scale will be -5 to 5, with
+					0 being a neutral score.
+				</p>
+				<p>
+					A neutral score? How horrible, everything must either be
+					good or bad!!! No.
+				</p>
+				<p>
+					Some things are just, okay, and nothing special but nothing
+					bad either, and I think it's important to have those in
+					reviews too, I'd go so far as to say that something I rate a
+					0, is still worth consuming if one desires to, it's when we
+					go below 0 that I am already starting to recommend not
+					toucing it.
+				</p>
 			</main>
 			<!-- right !-->
 			<aside id="rightSidebar" style="margin-left: 10px">
diff --git a/reviews/world-of-warcraft.html b/reviews/world-of-warcraft.html
new file mode 100644
index 0000000..c8bb53b
--- /dev/null
+++ b/reviews/world-of-warcraft.html
@@ -0,0 +1,527 @@
+<body>
+	<div id="container">
+		<div id="header" style="height: 188px"></div>
+		<div id="headerArea">
+			<div id="navbar-container"></div>
+		</div>
+
+		<div id="flex">
+			<!-- left !-->
+			<aside id="leftSidebar" style="margin-right: 10px">
+				<script
+					type="text/javascript"
+					src="https://counter.websiteout.com/js/30/0/0/0"
+				></script>
+				<div id="leftSidebarPlaceholder">
+					<p>This content failed to load, try enabling javascript</p>
+				</div>
+			</aside>
+			<!-- MIDDLE !-->
+			<main>
+				<p><a href="../gamereviews.html">← Back to game reviews</a></p>
+
+				<h1>World of Warcraft</h1>
+				<p><em>Last updated on: March 7, 2026</em></p>
+				<strong>Overall Rating: </strong>
+				<p>
+					<span style="color: lightcoral; font-size: small">
+						-5 -4 -3 -2 -1
+					</span>
+					<span style="color: white; font-size: small">0</span>
+					<span style="color: lightgreen; font-size: small"
+						>1 2 3
+						<span style="color: rgb(0, 255, 0); font-size: large"
+							>4</span
+						>
+						5
+					</span>
+				</p>
+				<h2>Initial Thoughts</h2>
+				<p>
+					World of Warcraft is a complex game to review, as it has
+					many aspects, multiple versions and a long history of
+					expansions. In this review, there will be thoughts on
+					multiple versions of the game, as well as different ratings
+					for each one, above is the overall rating for the game as a
+					whole, but depending on the expansion, it may differ
+					greatly. The reviews are also separated into different
+					sections, depending on the era of the game, to which each
+					expansion has been categorized based on both how I
+					personally think they fit, and how Blizzard seems to treat
+					them. Expansions colored in grey are ones I do not consider
+					as part of any era, but have been placed to the closest one,
+					but will not contribute to the rating of the era. Each era
+					will also have an expansion considered as the "peak" of the
+					era, and if it was possible to play any expansion from that
+					era as it was during then, that expansion would be the one I
+					recommend playing. Things related to expansions, but not
+					part of the review, will be at the bottom of the page.
+				</p>
+				<h2 style="color: white">The Classic Era</h2>
+				<p>
+					<em style="font-size: small">
+						Disclaimer: I did not play these expansions as they came
+						out, I have only played them through the WoW Classic
+						releases, and I cannot speak to their original
+						experience.
+					</em>
+				</p>
+				<strong>Era Rating: </strong>
+				<p>
+					<span style="color: lightcoral; font-size: small">
+						-5 -4 -3 -2 -1
+					</span>
+					<span style="color: white; font-size: small">0</span>
+					<span style="color: lightgreen; font-size: small"
+						>1 2 3
+						<span style="color: rgb(0, 255, 0); font-size: large"
+							>4</span
+						>
+						5
+					</span>
+				</p>
+				<p>
+					The Classic Era, what I consider to be the Warcraft 4
+					experience, it finishes storylines set in the Warcraft
+					games, and culminates to it's peak in Wrath of the Lich
+					King, where the story of Arthas is concluded. This was the
+					point where the game was at it's most popular, as it was the
+					most polished and new-player friendly MMO at the time, and
+					people wanted to finish the Warcraft story. This is the era
+					in which the game was at it's social peak, as it had more
+					focus on group content, but was still playable solo for the
+					most part. For players just getting into the game, Classic
+					is where I would recommend starting, as the slow leveling
+					system allows new players to learn the game and experience
+					the world at a good pace, and have the social interactions
+					you would expect from an MMO, without having to go out of
+					your way to find them. I strongly recommend joining a
+					leveling guild, to both ask for help and make some friends
+					along the way.
+				</p>
+				<h3>Vanilla</h3>
+				<strong>Rating:</strong>
+				<p>3</p>
+				<p>
+					Some consider Vanilla to be the best version of the game,
+					and while I do think it has a certain charm, it is not
+					something I would keep playing after reaching max level,
+					without knowing that new content was coming, such as TBC.
+				</p>
+				<h3>The Burning Crusade</h3>
+				<p><strong>Rating:</strong></p>
+				<p>3</p>
+				<p>
+					I doubt there are many who consider TBC to be the best
+					expansion, but I do think everyone agrees on it being a good
+					expansion, it added a lot of quality of life improvements
+					and new content to the game. It also continued Illidan's
+					story, and helped refine WoW as a game, while staying close
+					to the Vanilla experience.
+				</p>
+				<h3>Wrath of the Lich King</h3>
+				<p><strong>Rating:</strong></p>
+				<p>5</p>
+				<p>
+					I think everyone knew this was going to be the best rated
+					expansion from the Classic Era, and arguing against it is
+					not easy. From finishing the story of Arthas, to improving
+					things like quest loot drop rates, and adding the first hero
+					class to the game with the Death Knight, WotLK is the
+					finishing touch to the Warcraft 4 experience, to the Classic
+					Era, and had a major influence to the game as a whole,
+					though some of that influence was not for the better, but
+					I'll talk on that more at the bottom of the page.
+				</p>
+				<h2 style="color: white">The Modern Era</h2>
+				<strong>Era Rating: </strong>
+				<p>
+					<span style="color: lightcoral; font-size: small">
+						-5 -4 -3 -2 -1
+					</span>
+					<span style="color: white; font-size: small">0</span>
+					<span style="color: lightgreen; font-size: small"
+						>1 2 3 4 5
+					</span>
+				</p>
+				<h3><span style="color: grey">Cataclysm</span></h3>
+				<p>
+					Cataclysm feels much more like an update than an expansion,
+					it overhauled a lot, and while it did bring new content,
+					when most people hear "Cataclysm", they think about how the
+					world changed and systems were modernized. It's hard to
+					review, as it'd be reviewing changes to the core game,
+					rather than the expansion content. If you must have a number
+					to represent it, it'd have to be a 2.
+				</p>
+				<h3>Mists of Pandaria</h3>
+				<h3>Warlords of Draenor</h3>
+				<h3>Legion</h3>
+				<p><strong>Rating:</strong></p>
+				<p>5</p>
+				<p>
+					Legion was the peak of the Modern Era, it did for Illidan
+					what WotLK did for Arthas, concluding the story of him and
+					The Burning Legion, focusing a lot on class fantasy with
+					order halls and artifact weapons, and was overall a very
+					satisfying expansion to play, with a lot of great quality
+					content and quality of life improvements. While some
+					consider systems it brought in, such as the artifact weapons
+					which were a grind for people at the top level, to be a bad
+					thing, I believe for the average player, Legion did nothing
+					but good. It was the best expansion since WotLK and if one
+					doesn't consider how WotLK closed the Warcraft story, then
+					as a way more modern experience of World of Warcraft, Legion
+					may be considered the best expansion in the game.
+				</p>
+				<h3>Battle for Azeroth</h3>
+				<h2 style="color: white">Current Era</h2>
+				<strong>Era Rating: </strong>
+				<p>
+					<span style="color: lightcoral; font-size: small">
+						-5 -4 -3 -2 -1
+					</span>
+					<span style="color: white; font-size: small">0</span>
+					<span style="color: lightgreen; font-size: small"
+						>1
+						<span style="color: rgb(0, 255, 0); font-size: large"
+							>2</span
+						>
+						3 4 5
+					</span>
+				</p>
+				<h3><span style="color: grey">Shadowlands</span></h3>
+				<p>
+					Shadowlands, considered by many as the worst expansion, also
+					didn't feel like it fit into the Modern Era, it also isn't
+					treated as part of the Current Era by Blizzard, so it's not
+					considered as part of either. It is story-wise a bad
+					expansion, as Jailer came out of nowhere, and a lot of
+					characters felt like they did not match their previous
+					iterations, but gameplay-wise and content-wise, such as
+					cosmetics, and zones, it wasn't bad and shouldn't be blindly
+					hated, but rather criticized for its major flaws in story.
+					I'd give it a -5 for people who are interested in the story
+					of WoW, a 0 for people who aren't as caught up with the
+					story and don't know about why certain things about it are
+					bad, and 2 for just gameplay and content.
+				</p>
+				<h3>Dragonflight</h3>
+				<p><strong>Rating:</strong></p>
+				<p>2</p>
+				<p>
+					Dragonflight, a return to form for Wow, it definitely was a
+					major improvement after Shadowlands, but it felt like a safe
+					expansion right after the major fail, where it might have
+					benefited from taking more of a risk. It felt like an
+					expansion on the level of BfA, but right after Shadowlands,
+					whereas BfA was after Legion, which was an incredible
+					expansion, so while it was an improvement, it didn't feel
+					like WoW had returned to what it should be at, though
+					objectively, it did.
+				</p>
+				<h3>The War Within</h3>
+				<p><strong>Rating:</strong></p>
+				<p>3</p>
+				<p>
+					The beginning of the Worldsoul Saga, The War Within is a
+					good expansion, the story is good, zones are nice and
+					gameplay is solid. It's an improvement to Dragonflight, but
+					as it's just the start of a larger story, it's doing a lot
+					of the foundational building, which doesn't make it as
+					exciting as previous one-expansion stories, but the buildup
+					it has is great and gives promise to WoW returning to its
+					former glory.
+				</p>
+				<h3>Midnight</h3>
+				<p><strong>Rating:</strong></p>
+				<p>3</p>
+				<p>
+					The current expansion at the time of writing, Midnight just
+					launched a few days ago. Dungeons are out, but most of the
+					content is yet to come, so I can't give a full review, but
+					so far, the leveling campaigns were fun, the reworks classes
+					got in order to fit their fantasies better are amazing, and
+					overall, Midnight seems like it will improve upon what The
+					War Within started.
+				</p>
+			</main>
+			<!-- right !-->
+			<aside id="rightSidebar" style="margin-left: 10px">
+				<div id="rightSidebarPlaceholder">
+					<p>This content failed to load, try enabling javascript</p>
+				</div>
+			</aside>
+		</div>
+
+		<footer id="footer" style="margin-top: 10px"></footer>
+	</div>
+	<!-- THIS IS THE CSS !-->
+	<style>
+		/* user styles */
+
+		/* styles are what change the color and sizes of stuff on your site. */
+
+		/* these are variables that are being used in the code
+    these tended to confuse some people, so I only kept 
+    the images as variables */
+
+		:root {
+			--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
+			--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
+
+			/* colors */
+			--content: #43256e;
+		}
+
+		/* if you have the URL of a font, you can set it below */
+		/* feel free to delete this if it's not your vibe */
+
+		/* this seems like a lot for just one font and I would have to agree 
+    but I wanted to include an example of how to include a custom font.
+    If you download a font file you can upload it onto your Neocities
+    and then link it! Many fonts have separate files for each style
+    (bold, italic, etc. T_T) which is why there are so many!
+    
+    */
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
+			font-weight: bold;
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
+			font-style: italic;
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
+			font-style: italic;
+			font-weight: bold;
+		}
+
+		body {
+			font-family: "Nunito", sans-serif;
+			margin: 0;
+			background-color: #08031a;
+			/* you can delete the line below if you'd prefer to not use an image */
+			background-size: 65px;
+			color: #fceaff;
+			background-image: var(--body-bg-image);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		/* below this line is CSS for the layout */
+
+		/* this is a CSS comment
+    to uncomment a line of CSS, remove the * and the /
+    before and after the text */
+
+		/* the "container" is what wraps your entire website */
+		/* if you want something (like the header) to be Wider than
+    the other elements, you will need to move that div outside
+    of the container */
+		#container {
+			max-width: 900px;
+			/* this is the width of your layout! */
+			/* if you change the above value, scroll to the bottom
+      and change the media query according to the comment! */
+			margin: 0 auto;
+			/* this centers the entire page */
+		}
+
+		/* the area below is for all links on your page
+    EXCEPT for the navigation */
+		#container a {
+			color: #fcc3ff;
+			font-weight: bold;
+			/* if you want to remove the underline
+      you can add a line below here that says:
+      text-decoration:none; */
+		}
+
+		#header {
+			width: 100%;
+			background-color: #ffa6da;
+			/* header color here! */
+			height: 150px;
+			/* this is only for a background image! */
+			/* if you want to put images IN the header, 
+      you can add them directly to the <div id="header"></div> element! */
+			background-image: var(--header-image);
+			background-size: 100%;
+		}
+
+		/* navigation section!! */
+		#navbar {
+			height: 40px;
+			background-color: #a0006b;
+			/* navbar color */
+			width: 100%;
+		}
+
+		#navbar ul {
+			display: flex;
+			padding: 0;
+			margin: 0;
+			list-style-type: none;
+			justify-content: space-evenly;
+		}
+
+		#navbar li {
+			padding-top: 10px;
+		}
+
+		/* navigation links*/
+		#navbar li a {
+			color: #ed64f5;
+			/* navbar text color */
+			font-weight: 800;
+			text-decoration: none;
+			/* this removes the underline */
+		}
+
+		/* navigation link when a link is hovered over */
+		#navbar li a:hover {
+			color: #a49cba;
+			text-decoration: underline;
+		}
+
+		#flex {
+			display: flex;
+		}
+
+		/* this colors BOTH sidebars
+    if you want to style them separately,
+    create styles for #leftSidebar and #rightSidebar */
+		aside {
+			background-color: #a0006b;
+			width: 200px;
+			padding: 20px;
+			font-size: smaller;
+			/* this makes the sidebar text slightly smaller */
+		}
+
+		/* this is the color of the main content area,
+    between the sidebars! */
+		main {
+			background-color: #bd2289;
+			flex: 1;
+			padding: 20px;
+			order: 2;
+		}
+
+		/* what's this "order" stuff about??
+    allow me to explain!
+    if you're using both sidebars, the "order" value
+    tells the CSS the order in which to display them.
+    left sidebar is 1, content is 2, and right sidebar is 3! */
+
+		#leftSidebar {
+			order: 1;
+		}
+
+		#rightSidebar {
+			order: 3;
+		}
+
+		footer {
+			background-color: #13092d;
+			/* background color for footer */
+			width: 100%;
+			height: 40px;
+			padding: 10px;
+			text-align: center;
+			/* this centers the footer text */
+		}
+
+		h1,
+		h2,
+		h3 {
+			color: #ed64f5;
+		}
+
+		p {
+			font-size: 15px;
+			color: #fadeff;
+		}
+
+		h1 {
+			font-size: 25px;
+		}
+
+		strong {
+			/* this styles bold text */
+			color: #ed64f5;
+		}
+
+		/* this is just a cool box, it's the darker colored one */
+		.box {
+			background-color: #13092d;
+			border: 1px solid #ed64f5;
+			padding: 10px;
+		}
+
+		/* CSS for extras */
+
+		#topBar {
+			width: 100%;
+			height: 30px;
+			padding: 10px;
+			font-size: smaller;
+			background-color: #13092d;
+		}
+
+		/* BELOW THIS POINT IS MEDIA QUERY */
+
+		/* so you wanna change the width of your page? 
+    by default, the container width is 900px.
+    in order to keep things responsive, take your new height,
+    and then subtrack it by 100. use this new number as the 
+    "max-width" value below
+    */
+
+		@media only screen and (max-width: 800px) {
+			#flex {
+				flex-wrap: wrap;
+			}
+
+			aside {
+				width: 100%;
+			}
+
+			/* the order of the items is adjusted here for responsiveness!
+      since the sidebars would be too small on a mobile device.
+      feel free to play around with the order!
+      */
+			main {
+				order: 1;
+			}
+
+			#leftSidebar {
+				order: 2;
+			}
+
+			#rightSidebar {
+				order: 3;
+			}
+
+			#navbar ul {
+				flex-wrap: wrap;
+			}
+		}
+	</style>
+	<script src="../components.js"></script>
+</body>
diff --git a/seriesreviews.html b/seriesreviews.html
new file mode 100644
index 0000000..ce10d14
--- /dev/null
+++ b/seriesreviews.html
@@ -0,0 +1,345 @@
+<body>
+	<div id="container">
+		<div id="header" style="height: 188px"></div>
+		<div id="headerArea">
+			<div id="navbar-container"></div>
+		</div>
+
+		<div id="flex">
+			<!-- left !-->
+			<aside id="leftSidebar" style="margin-right: 10px">
+				<script
+					type="text/javascript"
+					src="https://counter.websiteout.com/js/30/0/0/0"
+				></script>
+				<div id="leftSidebarPlaceholder">
+					<p>This content failed to load, try enabling javascript</p>
+				</div>
+			</aside>
+			<!-- MIDDLE !-->
+			<main>
+				<h1>Reviews!</h1>
+				<p>
+					Obviously, my opinion is important, especially so on the
+					internet, so I'll be sharing my thoughts on all kinds of
+					things.
+				</p>
+				<p>
+					Of course, these are not just opinions, they are facts, and
+					as such, if you disagree, you are wrong. Objectively.
+				</p>
+				<p>
+					Some reviews may be detailed, while others might just have a
+					brief summary and score.
+				</p>
+				<p><strong>Categories</strong></p>
+				<ul>
+					<li>
+						<a href="gamereviews.html">Games</a>
+					</li>
+					<li>
+						<a href="moviereviews.html">Movies</a>
+					</li>
+					<li>
+						<a href="tvreviews.html">TV/Series</a>
+					</li>
+					<li>
+						<a href="bookreviews.html">Books</a>
+					</li>
+					<li>
+						<a href="comicreviews.html">Comics/Manga etc.</a>
+					</li>
+				</ul>
+				<p>
+					I find the modern 0-10 or 0-5 rating systems to be poorly
+					formatted, as people seem to think a 7/10 is okay, and that
+					5/10 is bad. As such, my rating scale will be -5 to 5, with
+					0 being a neutral score.
+				</p>
+				<p>
+					A neutral score? How horrible, everything must either be
+					good or bad!!! No.
+				</p>
+				<p>
+					Some things are just, okay, and nothing special but nothing
+					bad either, and I think it's important to have those in
+					reviews too, I'd go so far as to say that something I rate a
+					0, is still worth consuming if one desires to, it's when we
+					go below 0 that I am already starting to recommend not
+					toucing it.
+				</p>
+			</main>
+			<!-- right !-->
+			<aside id="rightSidebar" style="margin-left: 10px">
+				<div id="rightSidebarPlaceholder">
+					<p>This content failed to load, try enabling javascript</p>
+				</div>
+			</aside>
+		</div>
+
+		<footer id="footer" style="margin-top: 10px"></footer>
+	</div>
+	<!-- THIS IS THE CSS !-->
+	<style>
+		/* user styles */
+
+		/* styles are what change the color and sizes of stuff on your site. */
+
+		/* these are variables that are being used in the code
+    these tended to confuse some people, so I only kept 
+    the images as variables */
+
+		:root {
+			--header-image: url("https://sadhost.neocities.org/images/layouts/wp.jpeg");
+			--body-bg-image: url("https://sadhost.neocities.org/images/tiles/heartstring.gif");
+
+			/* colors */
+			--content: #43256e;
+		}
+
+		/* if you have the URL of a font, you can set it below */
+		/* feel free to delete this if it's not your vibe */
+
+		/* this seems like a lot for just one font and I would have to agree 
+    but I wanted to include an example of how to include a custom font.
+    If you download a font file you can upload it onto your Neocities
+    and then link it! Many fonts have separate files for each style
+    (bold, italic, etc. T_T) which is why there are so many!
+    
+    */
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Regular.ttf");
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Bold.ttf");
+			font-weight: bold;
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-Italic.ttf");
+			font-style: italic;
+		}
+
+		@font-face {
+			font-family: Nunito;
+			src: url("https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf");
+			font-style: italic;
+			font-weight: bold;
+		}
+
+		body {
+			font-family: "Nunito", sans-serif;
+			margin: 0;
+			background-color: #08031a;
+			/* you can delete the line below if you'd prefer to not use an image */
+			background-size: 65px;
+			color: #fceaff;
+			background-image: var(--body-bg-image);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		/* below this line is CSS for the layout */
+
+		/* this is a CSS comment
+    to uncomment a line of CSS, remove the * and the /
+    before and after the text */
+
+		/* the "container" is what wraps your entire website */
+		/* if you want something (like the header) to be Wider than
+    the other elements, you will need to move that div outside
+    of the container */
+		#container {
+			max-width: 900px;
+			/* this is the width of your layout! */
+			/* if you change the above value, scroll to the bottom
+      and change the media query according to the comment! */
+			margin: 0 auto;
+			/* this centers the entire page */
+		}
+
+		/* the area below is for all links on your page
+    EXCEPT for the navigation */
+		#container a {
+			color: #fcc3ff;
+			font-weight: bold;
+			/* if you want to remove the underline
+      you can add a line below here that says:
+      text-decoration:none; */
+		}
+
+		#header {
+			width: 100%;
+			background-color: #ffa6da;
+			/* header color here! */
+			height: 150px;
+			/* this is only for a background image! */
+			/* if you want to put images IN the header, 
+      you can add them directly to the <div id="header"></div> element! */
+			background-image: var(--header-image);
+			background-size: 100%;
+		}
+
+		/* navigation section!! */
+		#navbar {
+			height: 40px;
+			background-color: #a0006b;
+			/* navbar color */
+			width: 100%;
+		}
+
+		#navbar ul {
+			display: flex;
+			padding: 0;
+			margin: 0;
+			list-style-type: none;
+			justify-content: space-evenly;
+		}
+
+		#navbar li {
+			padding-top: 10px;
+		}
+
+		/* navigation links*/
+		#navbar li a {
+			color: #ed64f5;
+			/* navbar text color */
+			font-weight: 800;
+			text-decoration: none;
+			/* this removes the underline */
+		}
+
+		/* navigation link when a link is hovered over */
+		#navbar li a:hover {
+			color: #a49cba;
+			text-decoration: underline;
+		}
+
+		#flex {
+			display: flex;
+		}
+
+		/* this colors BOTH sidebars
+    if you want to style them separately,
+    create styles for #leftSidebar and #rightSidebar */
+		aside {
+			background-color: #a0006b;
+			width: 200px;
+			padding: 20px;
+			font-size: smaller;
+			/* this makes the sidebar text slightly smaller */
+		}
+
+		/* this is the color of the main content area,
+    between the sidebars! */
+		main {
+			background-color: #bd2289;
+			flex: 1;
+			padding: 20px;
+			order: 2;
+		}
+
+		/* what's this "order" stuff about??
+    allow me to explain!
+    if you're using both sidebars, the "order" value
+    tells the CSS the order in which to display them.
+    left sidebar is 1, content is 2, and right sidebar is 3! */
+
+		#leftSidebar {
+			order: 1;
+		}
+
+		#rightSidebar {
+			order: 3;
+		}
+
+		footer {
+			background-color: #13092d;
+			/* background color for footer */
+			width: 100%;
+			height: 40px;
+			padding: 10px;
+			text-align: center;
+			/* this centers the footer text */
+		}
+
+		h1,
+		h2,
+		h3 {
+			color: #ed64f5;
+		}
+
+		h1 {
+			font-size: 25px;
+		}
+
+		strong {
+			/* this styles bold text */
+			color: #ed64f5;
+		}
+
+		/* this is just a cool box, it's the darker colored one */
+		.box {
+			background-color: #13092d;
+			border: 1px solid #ed64f5;
+			padding: 10px;
+		}
+
+		/* CSS for extras */
+
+		#topBar {
+			width: 100%;
+			height: 30px;
+			padding: 10px;
+			font-size: smaller;
+			background-color: #13092d;
+		}
+
+		/* BELOW THIS POINT IS MEDIA QUERY */
+
+		/* so you wanna change the width of your page? 
+    by default, the container width is 900px.
+    in order to keep things responsive, take your new height,
+    and then subtrack it by 100. use this new number as the 
+    "max-width" value below
+    */
+
+		@media only screen and (max-width: 800px) {
+			#flex {
+				flex-wrap: wrap;
+			}
+
+			aside {
+				width: 100%;
+			}
+
+			/* the order of the items is adjusted here for responsiveness!
+      since the sidebars would be too small on a mobile device.
+      feel free to play around with the order!
+      */
+			main {
+				order: 1;
+			}
+
+			#leftSidebar {
+				order: 2;
+			}
+
+			#rightSidebar {
+				order: 3;
+			}
+
+			#navbar ul {
+				flex-wrap: wrap;
+			}
+		}
+	</style>
+	<script src="components.js"></script>
+</body>
