/******************************************************

    please feel free to copy anything

 ******************************************************/

            :root {
                --header-image: url('xv.png');
				--body-bg-image: url('');
                --content: #43256E;
            }
			
/* FONTIT */

            @font-face {
                font-family: RueRoyale;
                src: url('fonts/RueRoyale.otf');
            }
			
            @font-face {
                font-family: NuniSans;
                src: url('fonts/NunitoSans-Regular.ttf');
            }
			
			@font-face {
                font-family: NuniSans;
                src: url('fonts/NunitoSans-Bold.ttf');
				font-weight: bold;
			}
			
			@font-face {
                font-family: NuniSans;
                src: url('fonts/NunitoSans-Italic.ttf');
                font-style: italic;
            }

/* CORE SITE */	
		
			body {
                font-family:'NuniSans', Arial, sans-serif;
				line-height: 1.6;
                margin: 0;
                background-color: #12100f;
				background-size: 294px;
				color: #fceaff;
				background-image: var(--body-bg-image);
			}
				
			* {
                box-sizing: border-box;
            }
            
/* LAYOUT STYLING */

            #container {
                max-width: 900px;	/* layout width (change the media query too) */
                margin: 0 auto;		/* this centers the entire page */
            }

			/* links (minus navigation) */
            #container a {
                color: #68ecc2;
                font-weight: bold;
				text-decoration: none; /* removes the underline */
            }

            #header {
                width: 100%;
                background-color: #12100f;
                height: 150px;
                background-image: var(--header-image);
                background-size: 294px;
				border-bottom: 2px dotted #a17e5e;
            }

            #navbar {
                height: 40px;
                background-color: #12100f;
                width: 100%;
				border-bottom: 2px dotted #a17e5e;
            }

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

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

            /* nav listed links*/
            #navbar li a {
                color: #d83844;
                font-weight: 800;
                text-decoration: none;
            }

            /* when hovered over */
            #navbar li a:hover {
				transition: 0.6s ease;
                color: #efeef3;
                text-decoration: none;
            }

            #flex {
                display: flex;
            }
			
			/* for both. use #left-/#rightSidebar to separate styles */
            aside {
                background-color: #12100f;
				background: linear-gradient(156deg, rgba(22,16,25,1) 0%, rgba(12,12,12,1) 67%);
                width: 210px;
                padding: 20px;
                font-size: smaller;
				border-bottom: 2px dotted #a17e5e;
				margin-bottom: 2px;
				text-align: center;
            }	
			
			main {
                background-color: #12100f;
				border-left: 5px double #a17e5e;
				border-right: 5px double #a17e5e;
				border-bottom: 2px dotted #a17e5e;
				margin-bottom: 2px;
				border-radius: 2px;
                flex: 1;
                padding: 25px;
                order: 2;
            }

			#leftSidebar {
				order: 1;
            }

            #rightSidebar {
                order: 3;
            } 
			
            #pagefooter {
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
				margin: auto;
				font-size: 10px;
			}
				
			#pagefooter a {
                color: #b32217;
				text-decoration: none;
			}
				
			#pagefooter a:hover {
                color: #efeef3;
			}
			
			.row {
			  margin-left:-5px;
			  margin-right:-5px;
			}
			
			.row:after {
			  content: "";
			  display: table;
			  clear: both;
			}
			  
			.column {
			  float: left;
			  width: 50%;
			  padding: 5px;
			}
			
/* TEXT STYLES */

            h2, h3 {
                color: #b32217;
            }

            h1 {
                font-size: 25px;
                margin: 1em 0 0.3em;
            }
			
			p.span {
				letter-spacing:0.1em;
			}
			
			.rr {
				font-family: 'RueRoyale', Arial, sans-serif;
			}
			
			.p2 {
				font-family:'NuniSans', Arial, sans-serif;
			}
			
			strong {
                color: #b32217;
            }
			
			ul.a {
				list-style-type: square;
				display: inline-block;
				text-align: left;
				padding: 0 30px;
			}
				
			ul.left {
				list-style-type: none; 
				display: inline-block;
				text-align: left;
				padding: 0;
			}
			
/* ETC - - - - */
			
			hr.oma {
				border: hidden;
				border-bottom: 2px dashed #a17e5e;
			}
			
			hr.none {
				border: hidden;
				padding: 40px;
			}

			img {
				max-width: 100%;
				height: auto;
            }
			
			img.small {
				max-width: 60%;
				height: auto;
				display: block;
				margin-left: auto;
				margin-right: auto;
			}

			.center {
				display: block;
				margin-left: auto;
				margin-right: auto;
				text-align: center;
			}
			
/* MEDIA QUERY */


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

                aside {
                    width: 100%;
                }

                /* the order for responsiveness on a mobile device: */
				
                main {
                    order: 1;
					font-size: 14px;
					width: 100%;
					padding: 18px;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
				
				#header {
					max-height: 150px;
				}
				
				.column {
				width: 100%;
				}
				
				img {
				max-width: 100%;
				}
			}
			
			@media only screen and (max-height: 430px) {

				#flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                /* the order for responsiveness on a mobile device:  */
				
                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
				
				#header {
					max-height: 150px;
				}
			}