/*
Design by TEMPLATED
http://templated.co
Released for free under the Creative Commons Attribution License

Name       : Accumen
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20120712
*/

* {
	margin: 0;
	padding: 0;
}

      /* Shooting Stars Background */
      #star-background {
        
		position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
        pointer-events: none;
        /* Prevent interference with page interactions */
        background:
          radial-gradient(circle at 30% 30%, #1b27354d, #090a0f75),
          linear-gradient(to bottom, rgba(2, 1, 17, 0.6) 20%, rgba(58, 58, 82, 0.6) 80%),
          linear-gradient(135deg, #000428, #1b2735, #274060, #5290a5, #000000);
      }

      .star {
        position: absolute;
        background: white;
        border-radius: 100%;
        animation: twinkle 1s infinite alternate;
        transition: transform 0.5s ease-out;
		
      }

      @keyframes twinkle {
        0% {
          opacity: 0.2;
        }

        100% {
          opacity: 1;
        }
      }

	  .relax-mode #wrapper,
.relax-mode #footer {
  display: none;
}

a:hover {
	text-decoration: none;
}

body {
	line-height: 1.75em;
	background: #314459;
	font-size: 11.5pt;
	color: #202324;
}

body,input {
	font-family: Kreon, serif;
}

br.clearfix {
	clear: both;
}

h1,h2,h3,h4 {
	text-transform: uppercase;
	font-weight: normal;
}

h2 {
	font-size: 1.5em;
}

h2,h3,h4 {
	font-family: "Open Sans", sans-serif;
	color: #e1e2e2;
	margin-bottom: 1em;
}

h3 {
	margin-top: -20px;
	font-size: 1.25em;
}

h4 {
	font-size: 1em;
}

img.alignleft {
	float: left;
	margin: 0px 30px 20px 0;
}

img.aligntop {
	margin: 0px 0 10px 0;
}

p {
	margin-top: -.5em;
	margin-bottom: 1.5em;
	color: #e2e2e2;
}

ul {
	margin-bottom: 1.5em;
}

ul h4 {
	margin-bottom: 0.35em;
}

a {
	color: #2A3436;
}

.box {
	margin: 20px 0 50px 0;
}

#content {
	font-size: 16px;
	padding: 0;
	width: 615px;
	margin: 0 0 0 285px;

}

#footer {
	opacity: 0;
	transition: opacity 1s ease-in-out;
	padding: 20px 0 80px 0;
	text-align: center;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.7);
	color: #587477;
}

#footer a {
	color: #587477;
}

#header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    margin: 0; /* Ensure no extra space */
    padding: 0px;
    position: relative
}

#logo {
    position: absolute;
    left: 30px;
    height: 130px;
    line-height: 130px
}

#logo a {
	color: #dad4db;
	text-decoration: none;
}

#logo h1 {
	font-family: "Open Sans", sans-serif;
	font-size: 3em;
}

#menu {
    line-height: 57px;
    position: absolute;
    right: 40px;
    top: 20px;
    height: 57px;
	font-family: "Open Sans", sans-serif;
}

#menu a {
	text-transform: uppercase;
	text-decoration: none;
	color: #d1d1d1;
	font-size: 1.2em;
}

#menu ul {
	padding: 0 20px 0 20px;
	list-style: none;
}

#menu ul li {
	display: inline;
	padding: 10px 10px 10px 10px;
	margin: 0 8px 0 8px;
}

#menu ul li.active {
	background: #F2EBDE;
	border: solid 1px #BFB5A4;
	box-shadow: inset 0px 0px 0px 1px #fff;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.9);
}

#menu ul li.active a {
	color: #403B31;
}

#page {
	margin: 0;
	position: relative;
	width: 900px;
	padding: 20px 40px 0 40px;
}

#page .section-list {
	padding-left: 0;
	list-style: none;
}

#page .section-list li {
	padding: 25px 0 25px 0;
	clear: both;
}

#page ul {
	list-style: none;
}

#page ul li {
	border-top: solid 1px #DDD;
	padding: 10px 0 10px 0;
}

#page ul li.first {
	padding-top: 0;
	border-top: 0;
}

#page-bottom {
	padding: 40px 40px 0 40px;
	color: #302F2C;
	background: #f2ebde86;
	position: relative;
	width: 898px;
	border-top: solid 1px #BFB5A4;
	box-shadow: inset 0px 0px 0px 1px #fff;
}

#page-bottom a {
	color: #1B1A18;
}

#page-bottom h2, #page-bottom h3, #page-bottom h4 {
	color: #3F3D39;
}

#page-bottom ul {
	list-style: none;
}

#page-bottom ul li {
	border-top: solid 1px #BAB5AB;
	padding: 10px 0 10px 0;
}

#page-bottom ul li.first {
	border-top: 0;
	padding-top: 0;
}


#page-bottom-content {
	width: 615px;
	margin: 0 0 0 285px;
}

#page-bottom-sidebar {
	float: left;
	width: 250px;
}

#sidebar {
	position: relative;
	left: -40px;
	top: 20px;
	float: left;
	width: 240px;
	background: hsla(187, 31%, 95%, 0.3);
	padding: 10px;
	border: solid 1px #D6E0E2;
	margin: 0 10px 0 0;
	box-shadow: inset 0px 0px 0px 1px #fff;
}

#toggle-parallax {
    position: fixed;
    bottom: 10px; /* Adjust distance from the bottom */
    left: 10px; /* Position at the bottom left */
    background: transparent; /* Transparent background */
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: rgb(148, 144, 184);
    z-index: 1000;
    transition: opacity 0.3s ease;
    padding: 5px; /* Optional: Add padding for better clickability */
}

#toggle-parallax:hover {
    opacity: 0.7;
}

#toggle-relax {
    position: fixed;
    bottom: 10px; /* Adjust distance from the bottom */
    right: 10px; /* Position at the bottom left */
    background: transparent; /* Transparent background */
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: rgb(148, 144, 184);
    z-index: 1000;
    transition: opacity 0.3s ease;
    padding: 5px; /* Optional: Add padding for better clickability */
}

#toggle-relax:hover {
    opacity: 0.7;
}


#wrapper {
	box-shadow: 0 0 150px 0 rgba(0, 0, 0, 0.15);
	margin: 0 auto;
	border-top: 0;
	border: solid 2px #314459;
	width: 978px;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	position: relative;
	z-index: 10;
	background: rgba(255, 255, 255, 0.1); /* Transparent background */
backdrop-filter: blur(8px); /* Apply blur to everything behind */
-webkit-backdrop-filter: blur(8px); /* Safari support */
border-radius: 10px; /* Smooth edges */
padding: 10px;

  }