<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Truly Morgan</title>
</head>
<body>

<!-- =============== 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='%23283127' 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");

                /* colors */
                --content: #171a17;
                }

/* ==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: #b9e4b9;
                }

                * {
                    box-sizing: border-box;
                }

/* ==PICTURE IN TEXT== */

.float-img {
  float: left; /* Pushes image to the left */
  margin-right: 7px; /* Prevents text from touching the image */
  margin-bottom: 5px;
}

/* ==LAYOUT SIZE== */
    
                #container {
                    max-width: 800px;
                    /* if changed => change the media query */
                    margin: 0 auto;
	 margin-top: 15px;
                }

/* ==TOP PICTURE PRESENTATION== */

                .TopPic {
                    text-align: center;
                    margin: auto;
	 padding-top: 10px;
                    width: 700px;
                }

/* ==LINKS== */
/* excludes navigation */

                #container a {
                    color: #c7d3a1;
                    font-weight: bold;
                }

                #container a:hover {
                    color: #c8b39e;
                }

/* ==NAVIGATION BAR== */

                #navbar {
                    height: 65px;
                    border-radius: 20px 20px 0px 0px;
                    background-color: #557454;
                    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: #a4d6a3;
                    text-decoration: none;
                }

                #navbar li a:hover  {
                    color: #3d543c;
                    text-decoration: none;
                }

                #flex {
                    display: flex;
                }

/* navigation buttons */

                .button {
                    border: 2px solid  #a4d6a3;
                    display: block;
                    width: 135px;
                    height: 35px;
                    text-align: center;
                    padding-top: 7px;
                }

                .button:hover {border:2px solid #3d543c;}
                .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  #a4d6a3;
                    display: block;
                    width: 200px;
                    height: 35px;
                    text-align: center;
                    padding-top: 7px;
                }

                .ThreadBut:hover {border:2px solid #3d543c;}

/* ==SOCIALS BUTTONS== */

                #Socials {
                    width: 100%;
                    padding-left: 70px;
                    padding-right: 70px;
                    padding-bottom: 10px;
                }

/* Socials links */

                #Socials li a {
                    color: #557454;
                    text-decoration: none;
                    margin-bottom: 10px;
                }

                #Socials li a:hover  {
                    color: #557454;
                    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: #a4d6a3;
                    border-radius: 10px 10px 10px 10px;
                    display: block;
                    width: 250px;
                    height: 35px;
                    text-align: left;
                    padding-left: 20px;
                    padding-top: 8px;
                }

                .SocButt:hover {background-color: #759e73;}

/* Buttons Boxing */

                #Box1 {
                    width: 50%;
                    float:left;
                }
                #Box2 {
                    width: 50%;
                    float:right;
                }

/* ==SEPARATOR== */

                #separator {
                    background-color: #557454;
                    color: #2b4026;
                    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;
                }
              }

/* ==MIDDLE SECTION== */

                main {
                    background-color: #557454;
                    border-radius: 5px 5px 5px 5px;
                    flex: 1;
                    padding-top: 10px;
                    padding-bottom: 35px;
                }

/* ==FOOTER SECTION== */

                footer {
                    width: 100%;
                    height: 40px;
                    padding: 25px;
                    margin-bottom: 25px;
                    text-align: center;
                }
                
                .Domain img {
                    width: 25px;
                }

/* ==LOG BOOK BUTTON== */

/* log but */

                .LogBut {
	 background-color: #232C22;
	 position:absolute;
                    top: 10px;
                    Right: 10px;
                    border-radius: 5px;
                    display: block;
                    width: 70px;
                    height: 25px;
                    text-align: center;
                    padding-top: 5px;
                    font-size: 12px;
                }

                .LogBut:hover {
                background-color: #50614E;
                }
                 
/* log but links */

	#LogBut a{
                color: #50614E;
	font-weight: bold;
                text-decoration: none;
                }
                
                #LogBut a:hover{
                color: #232C22;
	font-weight: bold;
                text-decoration: none;
                }

/* ==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>