@charset "utf-8";
			/* CSS Document */
			/*website background color and selected page text color #c4c4c4
			page text not selected #fdfbfb
			other twxt color #000000
			*/

			/*everything must be this font and background color of every page*/
		body {
  				font-family: "Verdana", sans-serif;
				background-color: #c4c4c4;
				line-height: 1.5;
			}
			/*the following is for home page*/
			/* Style for the logo container */
		.logo-container {
  				margin-left: 5px;
  				display: flex;
  				align-items: center;
 				margin-bottom: 20px;
			}

		.logo-container h1 {
  				margin: 0 0 0 10px;
  				font-size: 24px;
  				color: #fdfbfb;
			}
			/* Style for the logo */
		.logo {
  			margin-right: 5px;
			}

			/* Style for the site title */
		.site-title {
  				font-size: 40px;
  				font-weight: bold;
  				color: #fdfbfb;
			}
			/* side navigation menu*/
		.sidenav {
  				height: 100%;
  				width: 160px;
  				position: fixed;
  				z-index: 1;
  				top: 0;
  				left: 0;
  				background-color: #111;
  				overflow-x: hidden;
  				padding-top: 20px;
			}
			/* side navigation menu*/
		.sidenav a {
  				padding: 6px 6px 6px 32px;
  				text-decoration: none;
  				font-size: 25px;
  				color: #fdfbfb;
  				display: block;
			}
			/* side navigation menu*/
		.sidenav a:hover {
 		 		color: #c4c4c4;
			}

		/* side navigation menu*/
		@media screen and (max-height: 450px) {
  		.sidenav {padding-top: 15px;}
  		.sidenav a {font-size: 18px;}
			}

			/* I am using this class to keep every page center away from side navigation*/
		.content-container {
	 			margin-left: 200px;
  				display: flex;
  				flex-direction: column;
  				align-items: center;
			}

		.image-container {
  				margin-top: 5px;
			}

		.text-container {
  				max-width: 45%;
  				margin-top: 20px;
  				text-align: left;
 				font-size: 16px;
			}

		.current-page {
 				text-decoration: underline !important;
  				color: #c4c4c4 !important;
			}

		footer {
 				padding: 10px;
  				text-align: right;
  				font-size: 11px;
			}

		footer p {
  				margin: 5px;
  				text-align: right;
			}

		* {
  				box-sizing: border-box;
			}
			/*the following is for anime page some class was re used from above likfe side side navigation and content-container*/
			/* Position the image container (needed to position the left and right arrows) */
		.container {
  				position: relative;
			}

			/* Hide the images by default */
		.mySlides {
  				display: flex;
  				flex-direction: column;
  				justify-content: center;
  				align-items: center;
  				text-align: center;
			}

		.mySlides img {
  				display: block;
  				margin-left: auto;
  				margin-right: auto;
			}
			/* Add a pointer when hovering over the thumbnail images */
		.cursor {
  				cursor: pointer;
			}

			/* Next & previous buttons */
		.prev,
		.next {
  				cursor: pointer;
  				position: absolute;
  				top: 50%;
  				width: auto;
  				padding: 16px;
  				margin-top: 50px;
  				color: #fdfbfb;
  				font-weight: bold;
  				font-size: 20px;
 			 	border-radius: 0 3px 3px 0;
  				user-select: none;
  				-webkit-user-select: none;
  				transform: translateY(-50%);
  				z-index: 1;
			}

			/* Position the "next button" to the right */
		.prev {
  				border-radius: 0 3px 3px 0;
    			left: 20px;
			}
		.next {
  				right: 35px;
  				border-radius: 3px 0 0 3px;
			}


			/* On hover, add a black background color with a little bit see-through */
		.prev:hover,
		.next:hover {
  				background-color: #000000;
			}

			/* Container for image text I use this for the anime tittle*/
		.caption-container {
  				text-align: center;
  				padding: 2px 16px;
  				color: #fdfbfb;
			}
		.row {
  				display: flex;
  				justify-content: center;
	
			}
		.row:after {
   				position: "";
  				display: table;
  				clear: both;
			}

			/* columns side by side */
		.column {
  				float: left;
  				width: 5%;
			}

			/* Add a transparency effect for thumnbail images */
		.demo {
 		 		opacity: 0.6;
			}

		.active,
		.demo:hover {
 				opacity: 1;
			}
		#review {
  				width: 40%;
  
}