* {	color: rgb(245,240,220);
	box-sizing: border-box;
	cursor: url("mouse3.png"), auto;}

.flex {	display: flex;}
.clearfix::after {	content: "";
				clear: both;
				display: table;}

::selection {	background: rgb(140,40,120);
		color: rgb(255,250,220);}

li:hover, p:hover {	color: rgb(250,240,140);}

i {	color: rgb(190,70,150);}
b {	color: rgb(255,147,50);}
  
a, button { color: rgb(135,80,240);
    border: none;
    background: none;
    font-family: "nova slim";
    font-size: 16px;
	  padding: 2px 5px;
	  border-radius: 5px;}
a:hover, button:hover { color: rgb(255,207,50);
          text-shadow: 0px 0px 5px rgb(255,180,70), 0px 0px 3px rgb(255,180,70), 0px 0px 3px rgb(255,180,70);
          background-color: rgba(155,100,250,0.3);
          border: 1px solid rgba(155,100,250,0.5);
          padding: 2px 7px;
          border-radius: 5px;}

h2, h3, h4 { color: rgb(255,180,70);} 

h1 {  color: rgb(255,180,70);
      text-shadow: 0px 0px 5px rgb(190,70,150);
      text-align: center;}

h2 {	border-width: 3px;
	border-color: goldenrod;
	border-style: none none double none;
	padding: 0px 0px 10px 0px;
	margin: 5% -2% 1% -2%;} 
	
hr { color: rgb(190,70,150);
  background-color: rgb(190,70,150);
  margin: 10px 0px;} 

body {	background-color: black;
        background-image: url("space1.png");
	      background-size: contain;
	      font-family: "nova slim";
	      margin: 0% 5%;}

.bg {	background-color: rgba(5,0,15,0.8);
      border-radius: 15px;
      border: 1px solid rgba(135,80,240,0.5);
      padding: 1% 10%;
      margin-bottom: 10px;
      width: 100%}

.top {  width: 100%;
        padding: 3% 1%;}

.side { float: left;
        width: 19%;
        margin-bottom: 10px;} 
.main { float: left;
        margin-left: 2%;
        margin-right: 2%;
        width: 60%;
        padding: 1% 5%;} 
.half { float: left;
        width: 50%;
        padding-right: 5%;}
.stick { position: sticky;
          top: 20px;}
.yea {  position: sticky;
         top: 180px;}

@media screen and (max-width: 800px) { .side, .main {width: 100%;}
  .flex {	display: block;}
  .side {
    height: 100%;
    float: none;}
  .stick {
    position: static;
    width: 100%;}
  .main { float: none;
          margin: 0;
          margin-bottom: 10px;}
  .side li {
    display: inline-block;}
  .main, .bg {
        padding: 1% 7%;}}


.moon {	border-width: 4px;
	border-style: none double; 
	border-color: goldenrod;
	border-radius: 50px;
	padding: 2px 15px;
	background-color: rgba(190,70,150,0.06);}
	  /* 150,70,150 */
.moon:hover {background-color: rgba(255,147,50,0.07);}
                                    /* 250,170,0 */
@media screen and (max-width: 500px) {
  .moon {
    padding: 2px 12px;}}
@media screen and (max-width: 400px) {
  .moon {
    padding: 2px 10px;}}
@media screen and (max-width: 360px) {
  .moon {
    padding: 2px 8px;}}

ul {	list-style-type: none;
      margin: 0px;
      padding: 0vw 2vw;}
li {  margin: 5px 0px;}
.side ul {  list-style: none; 
            padding: 0;
            margin: 0;}
li::before {  content: " ✩ ";
              color: rgb(255,147,50);}
li:hover::before { content: " ★ ";}
.sec li::before { content: " ⋄ ";
                  color: rgb(190,70,150);}
.parent { 
  position: relative;}
.child { 
  position: absolute;
  display: none;
  top: 0;
  left: 100%;
  width: 100%;
  min-width: 190px;}
.child li::before {  
  content: none;}
.child a { 
  display: block;
  text-decoration: none;}

.parent:hover .child {
  display: block;
	background-color: rgb(5,0,15);
  border-radius: 15px;
  border: 1px solid rgba(135,80,240,0.5);
  padding: 10px;}
.child a::before {  content: "✩ ";
              color: rgb(255,147,50);}
.child a::after {  content: " ✩";
              color: rgb(255,147,50);}
.child a:hover::before { content: "★ ";}
.child a:hover::after { content: " ★";}