@font-face {
                font-family: Terminus;
                src: url('TerminusTTF-4.49.3.ttf');
            }

            @font-face {
                font-family: Terminus;
                src: url('TerminusTTF-Bold-4.49.3.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Terminus;
                src: url('TerminusTTF-Italic-4.49.3.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Terminus;
                src: url('TerminusTTF-Bold-Italic-4.49.3.ttf');
                font-style: italic;
                font-weight: bold;
            }

            body {
                font-family: 'Terminus', sans-serif;
                margin: 0;
                background-color: #370f23;
                background-size: auto;
                color: #fff;
				letter-spacing: .5px;
				cursor: url("lightcursor.png"), auto;
				
            }

            * {
                box-sizing: border-box;
            }

            #container {
                max-width: 950px;
                margin: 0 auto;
            }

            #container a {
                color: #ff921e;
                text-decoration: none;
				font-weight: bold;
				cursor: url("linkcursor.png"), auto;

            }

            #header {
                width: 100%;
                background-color: #5e4e8c;
                height: 150px;
                background-image: url('refuge.jpg');
                background-size: 100%;
				margin-bottom: 20px;
				margin-top: 20px;
				border: 4px solid #ff921e;
				border-radius: 3px;
				outline: 3px solid #b34f1a;		
            }

            #navbar {
                height: 40px;
                background-color: #29122d;
                width: 100%;
				border: 4px solid #ff921e;
				border-radius: 3px;
				outline: 3px solid #b34f1a;		
            }

            #navbar ul {
                display: flex;
                padding: 7px;
                margin: 0;
                list-style-type: none;
                justify-content: space-around;
			
            }

            #navbar li {
			
			}

            #navbar li a {
                color: #fff;
                font-weight: 800;
                text-decoration: none;
            }

            #navbar li a:hover {
                color: #ff921e;
				font-size: 19px;
            }

            #flex {
                display: flex;
            }

            aside {
                background-color: #170b1c;
                width: 200px;
                padding: 20px;
                font-size: smaller;
            }

            main {
                background-color: #170b1c;
                flex: 1;
                padding: 20px;
                order: 2;
				border: 4px solid #ff921e;
				border-radius: 3px;
				outline: 3px solid #b34f1a;	
				overflow-y: auto;
				overflow-x: hidden;
				height: 1100px;
            }

            #leftSidebar {
                order: 1;
				border: 4px solid #ff921e;
				border-radius: 3px;
				outline: 3px solid #b34f1a;				
            }

            #rightSidebar {
                order: 3;
				border: 4px solid #ff921e;
				border-radius: 3px;
				outline: 3px solid #b34f1a;			
            }

            footer {
                background-color: #29122d;
                width: 100%;
                height: 40px;
                padding: 6px;
                text-align: center;
				border: 4px solid #ff921e;
				border-radius: 3px;
				outline: 3px solid #b34f1a;		
				margin-bottom: 20px;
            }

            h1,
            h2,
            h3 {
                color: #fff;
            }

            h1 {
                font-size: 25px;
            }

            strong {
                color: #ff921e;
            }

            .box {
                background-color: #29122d;
                border: 3px solid #ff921e;
				border-radius: 3px;
                padding: 7px;
				margin: 0px;
            }
			
			.innerbox {
				border: 1px solid white;
				padding: 5px;
				margin: 10px;
				width: 340px;
			}

            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 30px;
                padding: 10px;
                font-size: smaller;
                background-color: #13092D;
            }

			
			/* Width */
			::-webkit-scrollbar {
			  width: 10px;
			}

			/* Track */
			::-webkit-scrollbar-track {
			  background: #170b1c; 
			}
			 
			/* Handle */
			::-webkit-scrollbar-thumb {
			  background: #ff921e; 
			  border-radius: 1px;
			}

			/* Handle on hover */
			::-webkit-scrollbar-thumb:hover {
			  background: #73400a; 
			}
			
			
			/*CRT*/
			@keyframes flicker {
			  0% {
				opacity: 0.27861;
			  }
			  5% {
				opacity: 0.34769;
			  }
			  10% {
				opacity: 0.23604;
			  }
			  15% {
				opacity: 0.90626;
			  }
			  20% {
				opacity: 0.18128;
			  }
			  25% {
				opacity: 0.83891;
			  }
			  30% {
				opacity: 0.65583;
			  }
			  35% {
				opacity: 0.67807;
			  }
			  40% {
				opacity: 0.26559;
			  }
			  45% {
				opacity: 0.84693;
			  }
			  50% {
				opacity: 0.96019;
			  }
			  55% {
				opacity: 0.08594;
			  }
			  60% {
				opacity: 0.20313;
			  }
			  65% {
				opacity: 0.71988;
			  }
			  70% {
				opacity: 0.53455;
			  }
			  75% {
				opacity: 0.37288;
			  }
			  80% {
				opacity: 0.71428;
			  }
			  85% {
				opacity: 0.70419;
			  }
			  90% {
				opacity: 0.7003;
			  }
			  95% {
				opacity: 0.36108;
			  }
			  100% {
				opacity: 0.24387;
			  }
			}
			@keyframes textShadow {
			  0% {
				text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  5% {
				text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  10% {
				text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  15% {
				text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  20% {
				text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  25% {
				text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  30% {
				text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  35% {
				text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  40% {
				text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  45% {
				text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  50% {
				text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  55% {
				text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  60% {
				text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  65% {
				text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  70% {
				text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  75% {
				text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  80% {
				text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  85% {
				text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  90% {
				text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  95% {
				text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			  100% {
				text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
			  }
			}
			.crt::after {
			  content: " ";
			  display: block;
			  position: fixed;
			  top: 0;
			  left: 0;
			  bottom: 0;
			  right: 0;
			  background: rgba(18, 16, 16, 0.1);
			  opacity: 0;
			  z-index: 2;
			  pointer-events: none;
			  animation: flicker 0.15s infinite;
			}
			.crt::before {
			  content: " ";
			  display: block;
			  position: fixed;
			  top: 0;
			  left: 0;
			  bottom: 0;
			  right: 0;
			  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
			  z-index: 2;
			  background-size: 100% 3px, 3px 100%;
			  pointer-events: none;
			}
			.crt {
			  animation: textShadow 1.6s infinite;
			}
			
			/* subtract below by 100px */
            
			@media only screen and (max-width: 850px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }