<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="components/footer_main.js" type="text/javascript" defer></script>
  </head>
<body>

          <div class="BoxCenter"><font-weight="50">
	ⵚ = Unfinished/Abandonned
	<br>⌬ = Modern AU
	<br>⭮ = Reversable Ship
	<br>[AC] = Actor AU
	<br>[AS] = Age Swap
	<br>[HE] = Heian Era
	<br>[HI] = Historial AU
	<br>[JE] = JockEmo
	<br>[MA] = Mafia
	<br>[NC] = No Curse
	<br>[Ω] = Omegaverse
	<br>[=A] = Same Age
	<br>[S/K] = Senpai/Kohai
          </font></div></br>

<!-- =============== THIS IS THE CSS ===============!-->

        <style>

/* ==BACKGROUND PICTURE AND COLOUR== */

                :root {
	 background-color: #111111;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%232c2822' fill-opacity='1'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
                }

/* ==FONTS== */

                @font-face {
	font-family: Archivo;
	src: url('https://truly-morgan.neocities.org/Sources/Fonts/Archivo-Regular.ttf');
                }

                @font-face {
	font-family: Archivo;
	src: url('https://truly-morgan.neocities.org/Sources/Fonts/Archivo-Bold.ttf');
	font-weight: bold;
                }

                @font-face {
	font-family: Archivo;
	src: url('https://truly-morgan.neocities.org/Sources/Fonts/Archivo-Italic.ttf');
	font-style: italic;
                }

                @font-face {
	font-family: Archivo;
	src: url('https://truly-morgan.neocities.org/Sources/Fonts/Archivo-BoldItalic.ttf');
	font-style: italic;
	font-weight: bold;
                }

                body {
	font-family: 'Archivo', sans-serif;
	margin: 0;
	color: #694325;
                }

                * {
	box-sizing: border-box;
                }

/* ==LAYOUT SIZE== */
    
                #container {
	max-width: 800px;
	/* if changed => change the media query */
	margin: 0 auto;
	 margin-top: 15px;
                }

/* ==BOX CENTER FOR AUs== */

                .BoxCenter {
	text-align: left;
	border: dashed 2px #927040;
	margin: auto;
	width: 50%;
	padding: 10px;
                }

/* ==TOP PICTURE PRESENTATION== */

                .TopPic {
	text-align: center;
	margin: auto;
	width: 600px;
	padding-bottom: 10px;
                }

/* ==LINKS== */
/* excludes navigation */

                #container a {
	color: #264653;
	font-weight: bold;
                }

                #container a:hover {
	color: #2A9D8F;
                }

/* ==HOME BUTTON IN THE ARCHIVE SECTION== */

/* shaping a placement */

	#homenav {
	margin-top: -5px;
	margin-left: -25px;
                }

	#homenav a {
	color: #694325;
	text-decoration: none;
                }

	#homenav a:hover  {
	color: #ac7b54;
	text-decoration: none;
                }

/* navigation home button */

                .homebutton {
	font-size: 10px;
	border: 2px solid  #694325;
	display: block;
	width: 75px;
	height: 25px;
	text-align: center;
	padding-top: 5px;
                }

                .homebutton:hover {border:2px solid #ac7b54;}
                .button5 {border-radius: 05px 30px 05px 30px;}

/* ==NAVIGATION BAR== */

                #navbar {
	height: 65px;
	border-radius: 20px 20px 0px 0px;
	background-color: #d8ae71;
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	box-sizing: container;
	height: 100%;
                }

                #navbar ul {
	display: flex;
	padding: 0;
	margin: 0;
	list-style-type: none;
	justify-content: space-evenly;
                }

                #navbar li {
	padding-top: 15px;
                }
                
/* navigation links */

                #navbar li a {
	color: #694325;
	text-decoration: none;
                }

                #navbar li a:hover  {
	color: #ac7b54;
	text-decoration: none;
                }

                #flex {
	display: flex;
                }

/* navigation buttons */

                .button {
	border: 2px solid  #694325;
	display: block;
	width: 135px;
	height: 35px;
	text-align: center;
	padding-top: 7px;
                }

                .button:hover {border:2px solid #ac7b54;}
                .button1 {border-radius: 05px 30px 05px 30px;}
                .button2 {border-radius: 30px 05px 30px 05px;}
                .button3 {border-radius: 05px 30px 05px 30px;}
                .button4 {border-radius: 30px 05px 30px 05px;}

/* thread-fic navigation buttons */

                .ThreadBut {
	border: 2px solid  #694325;
	display: block;
	width: 200px;
	height: 35px;
	text-align: center;
	padding-top: 7px;
                }

                .ThreadBut:hover {border:2px solid #ac7b54;}

/* ==SEPARATOR== */

                #separator {
	background-color: #d8ae71;
	color: #927040;
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	max-size: 5px;
                }

                #separator ul {
	display: flex;
	padding: 0;
	margin: 0;
	list-style-type: none;
	justify-content: space-evenly;
                }

                #separator {
	font-size: 2.9vw;
                }
                @media screen and (min-width: 500px) {
                #separator {
	font-size: 16px;
                }
              }

/* ==SOCIALS BUTTONS== */

                #Socials {
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
                }

/* Socials links */

                #Socials li a {
	color: #d8ae71;
	text-decoration: none;
	margin-bottom: 10px;
                }

                #Socials li a:hover  {
	color: #d8ae71;
	text-decoration: underline;
                }

                #Socials ul {
	display: flex;
	padding: 0;
	margin: 0;
	list-style-type: none;
	justify-content: space-evenly;
                }

                #flex {
	display: flex;
                }

/* Button Design */

                .SocButt {
	background-color: #264653;
	border-radius: 30px 30px 30px 30px;
	display: block;
	width: 200px;
	height: 35px;
	text-align: left;
	padding-left: 15px;
	padding-top: 10px;
                }

                .SocButt:hover {background-color: #2A9D8F;}

/* Buttons Boxing */

                #Box1 {
	width:50%;
	float:left;
                }
                #Box2 {
	width:50%;
	float:right;
                }

/* ==MIDDLE SECTION== */

                main {
	background-color: #d8ae71;
	border-radius: 5px 5px 5px 5px;
	flex: 1;
	padding-top: 10px;
	padding-bottom: 35px;
	padding-left: 30px;
	padding-right: 30px;
	  list-style-type: none;
                }

/* ==FOOTER SECTION== */

                footer {
	width: 100%;
	height: 40px;
	padding: 25px;
	margin-bottom: 25px;
	text-align: center;
                }
                
                .Domain img {
	width: 25px;
                }

/* ==DELETING THE SCROLL BAR== */

::-webkit-scrollbar {
  display: none;
}

/* ==IMAGES MOBILE CORRECTION== */

                img {
	max-width: 100%;
	min-width: 10px;
	height: auto;
                }

/* ==MEDIA QUERY== */
/* changed max-width => max-width minus 100 in @media*/

                @media only screen and (max-width: 700px) {
                #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;
                }

                #navbar ul {
	flex-wrap: wrap;
                }
                
                #Socials ul {
	flex-wrap: wrap;
                }
}

        </style>
</body>
</html>