body {
                font-family: courier new;
                margin: 0 auto;
                background-color: #08031A;
                background-size: 65px;
                color: #fceaff;
                /*light pink*/
            }

             * {
                box-sizing: border-box;
            }
            
            #marquee {
            color: darkviolet;
            }


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


            #container a {
                color: #ED64F5;
                /*fuschia*/
                font-weight: bold;
            }

            #header {
                width: 100%;
                background-color: black;
                color: darkviolet;
                height: 150px;
		            border-style: dashed;
		            border-width: 2px;
                }
		
            	#title {
		color: #d1ae2f;
            	}
	a:link {
	      text-decoration: none;
	      color: #d1ae2f;
	      /*philsoc yellow*/
	}

	a:visited {
	      text-decoration: none;
              color: #d1ae2f; 
              /*philsoc yellow*/
	}

	a:hover {
	      text-decoration: none;
	}

	a:active {
	      text-decoration: none;
  	}


            #navbar {
                height: 40px;
                background-color: #13092D;
                /* navbar color */
                width: 100%;
            }

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

            #navbar li {
                padding-top: 10px;
            }

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

            #navbar li a:hover {
                color: #a49cba;
                text-decoration: underline;
            }

            #flex {
                display: flex;
            }
            
            button {
              background-color: violet;
              border-radius: 4px;
              color: indigo;
              display: inline-block;
            }

            aside {
                background-color: black;
		            border-style: dashed;
		            border-width: 2px;
                color: darkviolet;
                width: 200px;
                padding: 20px;
                font-size: smaller;
            }

            main {
                background-color: black;
		            border-style: dashed;
		            border-width: 2px;
		            color: violet;
                flex: 1;
                padding: 20px;
                order: 2;
            }


             #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                background-color: #13092D;
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
            }

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

            h1 {
                font-size: 25px;
            }

            strong {
                color: #ED64F5;
            }

            .box {
                background-color: #13092D;
                /*very dark purple*/
                border: 1px solid #ED64F5;
                /*fuschia*/
                padding: 10px;	
            }

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

            @media only screen and (max-width: 800px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

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

	@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;
}
}
 
#wrapper::after {
content: " ";
display: block;
position: absolute;
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;
}
#wrapper::before{
content: " ";
display: block;
position: absolute;
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% 2px, 3px 100%;
pointer-events: none;
}