:root {
        /* These variables exist so you can make quick and simple style changes without much CSS knowledge */

        /* applies to all areas */
        --font-family: courier;
        --font-size: 15px;
        --line-height: 1.3em;
        --font-color: #000;
        --link-color: #ed4b94;
        --link-text-decoration: underline;
        

        /* main content (between sidebars) */
        --content-padding: 25px;
        --content-bg-color: #65CAFE;
        

        /* header */
        --header-height: 150px;
        --header-background: url('https://i.imgur.com/OZDl1rX.png');
        
        --header-margin-bottom: 0px;

        /* sidebar */
        --sidebar-margin: 10px;
        --sidebar-width: 170px;
        --sidebar-padding: 15px;
        --sidebar-bg-color: #65CAFE;

        /* footer */
        --footer-height: 30px;
        --footer-bg-color: #65CAFE;

        /* navbar */
        --navitems-alignment: center;
        --space-between-navitems: 10px;
        --navbar-margin-bottom: 10px;
        --nav-bg-color: #65CAFE;

        /* container */
        --container-width: 900px;
        --container-bg-color: #x;
        

        /* controls the gap between the content and the footer */
        --row-gap: 5px;

        /* To add scrollbars to your sidebars, just make the height a px value and change overflow to 'auto' */

        --sidebar-height: 700px;
        --sidebar-overflow: hidden;
        --background-color: #000;
        
      }

      html,
      body {
        margin: 0;
        padding: 0;
        background-color: var(--background-color);
        background-image:url('https://i.imgur.com/XsGwCvt.jpg');
        background-attachment: fixed;
	background-size: 100%;
        font-family: var(--font-family);
        font-size: var(--font-size);
        line-height: var(--line-height);
        letter-spacing: 1px;
        color: var(--font-color);
        text-align: justify;
        text-transform: lowercase;
      }

      body a {
        color: var(--link-color);
        font-weight: bold;
        text-decoration: var(--link-text-decoration);
        
      }
      @font-face {
  
    font-family:'KRISTEN ITC';
    src:url('/ITCKRIST.ttf');
    font-style: Normal;
    font-weight: 100;
}

.image {
	float: left;
	  padding: 15px;
}
.image2 {
	float: right;
}
h1 {
	font: 35px georgia;
	letter-spacing: -2px;
	font-weight: bold;
	color: #00fc3e;
	text-decoration: none;
	margin: 5px;
	padding: 3px;
	text-transform: uppercase;
	text-shadow: 2px 2px #ff00af;
}
em {
background: #fe00ae;
color:#000;
font-weight: bold;
   font-style: normal;
   letter-spacing: 1px;
   font-family: verdana;
   font-size: 7.5pt;
   text-transform: uppercase;

}
      #main-container {
        max-width: var(--container-width);
        margin: 0 auto;
        background-color: var(--container-bg-color);
      }

      .flex {
        display: flex;
        margin-bottom: var(--row-gap);
      }

      .content-wrap {
        margin-top: var(--content-margin-top);
      }

      #content-container {
        width: 100%;
        height: 600px;
        margin-bottom: var(--row-gap);
        background-color: var(--content-bg-color);
        border: 4px double #000;
        overflow: auto;
        display:block;
      }

      #left-sidebar {
        width: var(--sidebar-width);
        margin-right: var(--sidebar-margin);
        margin-bottom: var(--row-gap);
        height: var(--sidebar-height);
        overflow: var(--sidebar-overflow);
        background-color: var(--sidebar-bg-color);
        border: 4px double #000;
        overflow: auto;
        display: block;
        height: 600px;
      }

      #right-sidebar {
        width: var(--sidebar-width);
        margin-left: var(--sidebar-margin);
        margin-bottom: var(--row-gap);
        height: var(--sidebar-height);
        overflow: var(--sidebar-overflow);
        background-color: var(--sidebar-bg-color);
      }

      #header-contained {
        height: var(--header-height);
        margin-bottom: var(--header-margin-bottom);
        background-image: var(--header-background);
        background-position: center;
        margin-top: 20px;
      }

      #footer {
        height: var(--footer-height);
        text-align: center;
        color: var(--font-color);
        background-color: var(--footer-bg-color);
        border: 4px double #000;
      }

      #header-full {
        display: none;
        height: var(--header-height);
        margin-bottom: var(--header-margin-bottom);
        background-image: var(--header-background);
        background-position: center center;
      }

      #navbar-contained {
        margin-bottom: var(--row-gap)
      }

      #navbar-full {
        display: none;
      }

      .nav {
        margin-left: 0;
        text-align: var(--navitems-alignment);
        margin-top: 0;
        margin-bottom: var(--navbar-margin-bottom);
        padding-top: 1em;
        padding-bottom: 1em;
        background-color: var(--nav-bg-color);
        border: 4px double #000;
      }

      .nav li {
        display: inline-block;
        padding-right: var(--space-between-navitems);
      }

      .nav li a {}

      .wrapper {
        padding: var(--content-padding);
        padding-top: var(--sidebar-padding);
      }

      .sidebar-wrapper {
        padding: var(--sidebar-padding);
        height: var(--sidebar-height);
        overflow: var(--sidebar-overflow);
      }

      .footer-wrapper {
        padding: 5px;
      }
      .dash {
	padding-left: 100px;
	padding-right: 100px;
	border: 0 none;
	border-top: 1px dashed #000;
	background: none;
	height: 0;
	margin: 20px;
}

      /* To keep your site RESPONSIVE, make sure this variable matches the width for --container-width UNLESS --container-width is 100% - if it's 100%, you'll need to manually input a breakpoint. */
      @media only screen and (max-width: 800px) {
        .flex {
          flex-wrap: wrap;
        }

        #left-sidebar {
          width: 100%;
          display: block;
          order: 2;
          margin-right: 0;
          margin-bottom: 10px;
        }

        #right-sidebar {
          width: 100%;
          display: block;
          order: 3;
          margin-left: 0;
        }

        #content-container {
          width: 900px;
          display: block;
          order: 1;
          margin-bottom: 10px;
        
        }

      }