@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto|Poppins|Charm');
            
            * {
                margin: 0;
                padding: 0;
            }
            
            @font-face {
                font-family: sansThin;
                src: url("/the-archives/res/fonts/Sans-Thin.otf");                    
            }
            
            @font-face {
                font-family: gothamBold;
                src: url("/the-archives/res/fonts/Gotham-Bold.otf");
            }
            
            @font-face {
                font-family: futuraLight;
                src: url("/css/fonts/futura-pt-light.otf");
            }
            
            body {
                background-image: url("/the-archives/res/backgrounds/background.png");
            }
            
                  
          ::-webkit-scrollbar {
            width: 10px;
          }

          ::-webkit-scrollbar-track {
            background-image: #f1f1f1; 
          }

          ::-webkit-scrollbar-thumb {
            background-image: linear-gradient(#0f2027, #203a43, #2c5364);
          }
                  
          ::-webkit-scrollbar-thumb:hover {
            background: #555; 
          }               
                  
            #navbar {
                background-color: black;
                margin: 0 0;
                text-align: center;
            }
            nav {
                color: #0d0d0d;
            }

            #navbarLogo {
                font-family: courier;
                padding: 8px;
                color: white;
                display: inline-block;
                border: 2px solid white;
                margin-top: 8px;
                cursor: default;
            }
            
            nav li {
                list-style: none;
                display: inline-block;
                margin: 20px 60px;    
            }

            nav a {
                color: #FFFFFF;
                text-decoration: none;
                text-transform: uppercase;
                font-family: sansThin;
                letter-spacing: 1px;
                font-weight: 500;
                font-size: 150%;
                cursor: pointer;
                text-align: center;
                padding:8px;
                outline: 1px solid black;
                transition: outline 2s;
                -webkit-transition: outline 2s;

            }

            nav a:hover {
                outline: 1px solid white;
            }
            
            .container {
                background-color: #fff;
                width: 80%;
                height: 100%;
                margin: 0 auto;
                border: 3px dashed #000;
                overflow: hidden;
            }
            
            .post-title {
                text-align: center;
                font-family: gothamBold, arial;
                margin: 30px;
                font-size: 300%;
                color: #fff;
            }
            
            .title-container {

                padding: 8px;
            }
            
            .header-img {
                background-color: #CDCDCD;
                margin: 0 auto;
                width: 80%;
                height: 500px;
                border: 3px dotted #CDCDCD;
            }
            
            .caption {
                margin: 10px 0;
                text-align: center;
                font-size: 150%;
                font-family: 'Charm';
            }
            
            .author-row {
                margin: 10px auto;
                padding-bottom: 10px;
                width: 75%;
                height: 75px;
                border-bottom: 2px #CDCDCD solid;
            }
            
            .author-avatar {
                position: relative;
                float: left;
                width: 75px;
                height: inherit;
                border-radius: 100%;
                background: #eee no-repeat center;
                background-size: cover;
            }
            
            .author-info {
                float: left;
                position: relative;
                padding: 28px;
                font-family: Poppins, gothamBold, arial;
                letter-spacing: 1px;
                
            }
            
            .post-col {
                width: 70%;
                margin: 50px auto;
            }
            
            .post-content {
                line-height: 150%;
                font-family: Roboto;
            }
            
            .post-link {
                color: inherit;
                text-decoration: none;
            }
            
            .post-link:hover {
                text-decoration: underline;
            }
            
            p {
                text-indent: 40px;
            }
            
            footer {
                height: 200px;
                background-color: #414141;
                padding-left:200px;
                padding-right: 200px;
            }

            #hr-footer {
                margin-top:3rem;
                margin-bottom: 3rem;
                background-color: pink;
            }

            .icons {
                display: block;
                top:-50%;
                transform: translateY(-50%);
                width: 50px;
                height: 50px;
                background-size: 50px 50px;
                margin-right: 20px;
                float: left;
            }

            .copyright {
                color: #E5E5E5;
                font-family: futuraLight, Roboto, arial;
            }

            #footer-name-link {
                color:inherit;
                text-decoration: none;
                transition: color .5s;
            }

            #footer-name-link:hover {
                color: #F7CAD5;
            }