@import url('https://fonts.googleapis.com/css2?family=Martel+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Truculenta:wght@100&display=swap');
h1 {text-align: center;}
h2 {text-align: center;}
h3 {text-align: center;}
body
{
    background-color: #000000;
}




/* --- Index Start ---*/
.container-fluid, .head{
  padding-left: 0px;
  padding-right: 0px;
  margin: 0 auto;
  overflow:hidden;
}

.header-text
{
    position: absolute;
    z-index:1;
    bottom:50px;
    left:50%;
    text-align: right;
    font-size:72px;
    padding-bottom: 80px;
    color: #1d043c;
    font-family: Georgia, 'Times New Roman', Times, serif;
    top: 150px;
}
.header_container img
{
    width: 100%;
    height:auto;
}
.header_container span
{
    position:absolute;
    width: 300px;
    height: 80%;
    top: 0px;
	  bottom:0;
	  left: 0;
    z-index:2;
}

.header_image_test
{
    background-image: url('Images/25thHourHeader.png');
    background-color: #cccccc;
    position: absolute;
    width: 100%;
}



.img-logo img
{
    height: 100%;
    width: auto;
    padding-left: 40px;
}

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    font-size: 25px;
    transform: translatex(-50%);
    z-index: 9999;/* Makes the dropdown not get stuck behind other page content*/
}


nav
{
    height: 40px;
    width: max-content;
}




.nav-item,a{

    padding: 0px 20px;
}
.navbar{
    position: relative;
    display: flex;
}

.navbar-container
{
    margin:0px;
    padding:0;
    position:absolute;
    width: 100%;
    bottom: 0px;
}
.navbar-container ul
{
  list-style-type: none;
  margin: 0;
  padding: 10px 10px 10px 10px;
  overflow: hidden;
  background-color: #f8b0efa9;
  text-align: center;
}

.navbar a
{
  display: inline-block;
  color: white;
  text-align: center;
  padding: 0px 15px;
  text-decoration: none;
  justify-content: center;
  border-left: 2px solid #ffb147;
  border-right: 2px solid #ffb147;
}

.navbar a:hover
{
    background-color: #e57adea9;
    justify-content: center;
}

/*Change the nav drop down menu */
.dropdown-item{
    color: black;
    background-color: lightgray;
}


.navbar
{
    flex:1;
    margin:0px;
    border:1px solid;
    width:100%;
    height:40px;
    background-color: rgba(128, 0, 128, 0.452);
}





.footer{
    min-height: 150px;
    background:  rgba(128, 0, 128, 0.452);
    width: 100%;
    margin: 0 auto;
}

.index_top_row{
    margin-bottom: 150px;
}

.index_bottom_row{
    margin-bottom: 150px;
}

.our-team{
  margin-left: 50px;
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
/* border: solid 3px #3e16b4; */
    background-color: #202020;
    padding: 50px;
    box-shadow: 0 1.5px 3px 0 rgba(15, 9, 49, 0.7);
  border-radius: 37px;
  color: #3c3142;
}

.our-team h1
{
    color: #f1d8fe;
}

#EliseCard
{
    background-color: #eddcde;
    color: #3c3142;
}

#KatherineCard
{
    background-color: #eddcde;
    color: #3c3142;
}
#RobCard
{
    background-color: #dcedeb;
    color: #3c3142;
}
#AlanCard
{
    background-color: #dfdced;
    color: #3c3142;
}
#KillianCard
{
    background-color: #dce2ed;
    color: #3c3142;
}
/* ---- Index End --- */


/* ---- Random Page Start ----*/
.random-jumbotron{
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    /* border: solid 3px #3e16b4; */
    background-color: #202020;
    padding: 50px;
    box-shadow: 0 1.5px 3px 0 rgba(15, 9, 49, 0.7);
    border-radius: 37px;
    color: #f1d8fe;
}

.random-jumbotron-css-varrient{
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    /* border: solid 3px #3e16b4; */
    background-color: #202020;
    padding: 50px;
    box-shadow: 0 1.5px 3px 0 rgba(15, 9, 49, 0.7);
    border-radius: 37px;
    color: #f1d8fe;
}


.star-row{
    margin-top: 25;
}



/*----- Random Page End ----- */


/*----- Card Game Start ------*/
#GamePage button
{
    background-color:  rgba(128, 0, 128, 0.452);
    color: #f1d8fe;
    border: 0px;
}

.card-game-jumbotron{
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    /* border: solid 3px #3e16b4; */
    background-color: #202020;
    padding: 50px;
    box-shadow: 0 1.5px 3px 0 rgba(15, 9, 49, 0.7);
    border-radius: 37px;
    margin-left: 60px;
    margin-right: 60px;
    color: #f1d8fe;
}

.card{
    margin-left: 20px;
    margin-right: 20px;
    background-color: #202020;
    color: #f1d8fe;
}
.card-container {
    max-width: 50rem;
    margin-bottom: 20px;
}

.enemy-deck{
    max-width: 15em;
    float: left;
}

.enemy-card{
    max-width: 15em;
}

.enemy-random-card{
    float:center;
}


.player-deck{
    max-width: 15em;
    float: right;
}

.player-cards{
    max-width: 15em;
}

.resetButtonClass{
    text-align: right;
}




/*------ Card Game End -------*/


/* Attributes page */
.Attribute_Content{
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    /* border: solid 3px #3e16b4; */
    background-color: #202020;
    padding: 50px;
    box-shadow: 0 1.5px 3px 0 rgba(15, 9, 49, 0.7);
    border-radius: 37px;
    color: #f1d8fe;
}
/*Tags Page*/
.Tags_Content{
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    /* border: solid 3px #3e16b4; */
    background-color: #202020;
    padding: 50px;
    box-shadow: 0 1.5px 3px 0 rgba(15, 9, 49, 0.7);
    border-radius: 37px;
    color: #f1d8fe;
}
/*Nested Page*/
.Nested_Content{
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    /* border: solid 3px #3e16b4; */
    background-color: #202020;
    padding: 20px;
    box-shadow: 0 1.5px 3px 0 rgba(15, 9, 49, 0.7);
    border-radius: 37px;
    color: #f1d8fe;
}
.Zodiac_Content li{
 color:black;
 font: size 24px;
 font-weight:bolder;
text-align: center;
}
.Zodiac_Content h1{
    -webkit-text-stroke: 1.5px black;
}

#Zod1 {

    border: solid 3px black;
    background-color: rgb(248, 92, 44);
    
}

#Zod2 {

    border: solid 3px black;
    background-color: rgb(38, 134, 0);
}

#Zod3 {

    border: solid 3px black;
    background-color: rgb(242, 245, 101);
}

#Zod4 {

    border: solid 3px black;
    background-color: rgb(14, 111, 238);
    

}
.box-image
{
    width:40%;
}
.box-image img
{
    width:100%;
    height: 180px;
    display:block;
    object-fit: cover;
}

.image {
    position: relative;
    width: relative;
    height: 300px;
    /*trannsform: translateY(20px);
    top: 20px;
    bottom: 20px;
    */
    padding-bottom: 220px;
}

.image__img {
    width:100%;
    height: 400px;
    display:block;
    object-fit: cover;
}

.image__overlay {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 77%;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-family: 'Quicksand', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
    overflow: hidden;
}

.image__overlay--blur {
    backdrop-filter: blur(5px);
}

.image__overlay--primary {

}

.image__overlay > * {
    transform: translateY(20px);
    transition: transform 0.25s;
}

.image__overlay:hover {
    opacity: 1;
}

.image__overlay:hover > * {
    transform: translateY(0px);
}

.image__title {
    font-size: 2em;
    font-weight: bold;
}

.image__description {
    font-size: 1.25em;
    margin-top: 0.25em;
}

/* Alan Content*/
.Alan_Content
{
    display:flex;
    margin-left:50px;
    margin-right: 50px;
    margin-top: 25px;
    padding:50px;
    border: 2px solid black;
}
.alan_container
{
    flex: 3;
    padding: 50px;
}
.alan_container2
{
    margin-left: auto;
    flex: 2;
    padding: 50px;
}
.Poem_1
{
    flex:3;
}
.Poem_2
{
    flex:2;
}
#poem_head
{
    font-size:xx-large;
    border:1px dashed black;
}
#poem_content
{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    line-height: 2;

}
#header_alan
{
    font-size:xx-large;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#header_description
{
    line-height: 2;
    text-indent: 50px;
    font-size: 18px;
}
.alan_animation
{
    height: 40px;
    width: 30%;
    background: black;
    margin: 50px auto;
    border-radius: 5px;
    position: relative;
}
.alan_animation h3
{
    padding: 8px;
    color:whitesmoke;
}

.slider-wrapper {
    animation-name: slide;
    font-size: 40px;
    color:#aaa;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .slider{
    width:100%;
    height: 50px;
    padding-left:15px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .slider div {
    color:#fff;
    height: 50px;
    margin-bottom: 50px;
    padding: 2px 15px;
    text-align: center;
    box-sizing: border-box;
  }
  .slider-text1 {
    background: #3e16b4;
    animation: slide 5s linear infinite;
  }
  .slider-text2 {
    background: #f8b0efa9;
  }
  .slider-text3 {
    background: #3e16b4;
  }
  
  @keyframes slide {
    0% {margin-top:-300px;}
    5% {margin-top:-200px;}
    33% {margin-top:-200px;}
    38% {margin-top:-100px;}
    66% {margin-top:-100px;}
    71% {margin-top:0px;}
    100% {margin-top:0px;}
  }

/*Elise's Stuff*/

.Ellis
{
    margin-left: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 40px;
    flex: 2;
    padding: 2px;
    background-color: rgb(242, 76, 248);
    border: ridge 10px silver;
    box-shadow: 2px 4px 10px pink ;
    background-image: url(https://i.etsystatic.com/7680978/r/il/658eec/1824928522/il_570xN.1824928522_np82.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: rgba(255,255,255,0.7);
      background-blend-mode: lighten;


}

.Etitle
{

    font-size: 50px;
    font-family: 'Karla', sans-serif;
    color: rgb(255, 157, 173);
    text-shadow: -6px 6px 5px rgb(7, 6, 7) ;
}

.Ellis_Content
{
    margin-left: 60px;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-right: 60px;
    border:5px ridge silver;
    background-color:rgb(214, 214, 214);
    padding: 2px;
}


.Ellis_Content img
{ display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: -7px 10px 5px rgb(51, 51, 51);


}



.More_Stuff
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:80%;
    border: 50px rgb(7, 6, 7);
    background-image: url( https://lh3.googleusercontent.com/proxy/AdIaGcgR-A0chev2kfzxCZbHUwkspTDT5NkWzNLejv1rpfO8-ppY8HKkbrSIkheJLrY5i4jncVIuPqXJddkvu_F9);

    background-size: 50%;
    background-color:rgb(214, 214, 214,0.7);
      background-blend-mode: lighten;

}

.More_Stuff img
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    padding-top: 10px;
    margin-bottom: 10px;
    box-shadow: -7px 10px 5px rgb(51, 51, 51);

}

#Star_Dance img
{

    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    scroll-padding-bottom: 20px;




}

#Good_Stuff
{
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    text-align: center;
    font-size: 50px;
    font-weight: bolder;
    font-family: 'Martel Sans', sans-serif;
    color: rgb(211, 109, 126);
    -webkit-text-stroke: .01px black;
    line-height: 1.5;
    text-indent: 30px;
    text-shadow: -3px 2px 2px rgb(97, 49, 78) ;

}

#About_Elise
{
    margin-left: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 50px;
    text-align: center;
    font-size: 50px;
    font-weight: bolder;
    font-family: 'Martel Sans', sans-serif;
    color: rgb(211, 109, 126);
    -webkit-text-stroke: .01px black;
    line-height: 1.5;
    text-indent: 50px;
    text-shadow: -3px 2px 2px rgb(97, 49, 78) ;

}





#Star_Dance
{
    animation: animationFrames linear 3s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    -webkit-animation: animationFrames linear 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: animationFrames linear 3s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -o-animation: animationFrames linear 3s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -ms-animation: animationFrames linear 3s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    animation-iteration-count: infinite;
  }

  @keyframes animationFrames{
    0% {
      transform:  translate(0px,0px)  rotate(0deg) ;
    }
    14% {
      transform:  translate(0px,-46px)  rotate(-22deg) ;
    }
    34% {
      transform:  translate(0px,8px)  rotate(5deg) ;
    }
    50% {
      transform:  translate(0px,24px)  rotate(24deg) ;
    }
    70% {
      transform:  translate(0px,0px)  rotate(7deg) ;
    }
    100% {
      transform:  translate(0px,0px)  rotate(7deg) ;
    }



    0% {
      -moz-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    14% {
      -moz-transform:  translate(0px,-46px)  rotate(-22deg) ;
    }
    34% {
      -moz-transform:  translate(0px,8px)  rotate(5deg) ;
    }
    50% {
      -moz-transform:  translate(0px,24px)  rotate(24deg) ;
    }
    70% {
      -moz-transform:  translate(0px,0px)  rotate(7deg) ;
    }
    100% {
      -moz-transform:  translate(0px,0px)  rotate(7deg) ;
    }



    0% {
      -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    14% {
      -webkit-transform:  translate(0px,-46px)  rotate(-22deg) ;
    }
    34% {
      -webkit-transform:  translate(0px,8px)  rotate(5deg) ;
    }
    50% {
      -webkit-transform:  translate(0px,24px)  rotate(24deg) ;
    }
    70% {
      -webkit-transform:  translate(0px,0px)  rotate(7deg) ;
    }
    100% {
      -webkit-transform:  translate(0px,0px)  rotate(7deg) ;
    }



    0% {
      -o-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    14% {
      -o-transform:  translate(0px,-46px)  rotate(-22deg) ;
    }
    34% {
      -o-transform:  translate(0px,8px)  rotate(5deg) ;
    }
    50% {
      -o-transform:  translate(0px,24px)  rotate(24deg) ;
    }
    70% {
      -o-transform:  translate(0px,0px)  rotate(7deg) ;
    }
    100% {
      -o-transform:  translate(0px,0px)  rotate(7deg) ;
    }



    0% {
      -ms-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    14% {
      -ms-transform:  translate(0px,-46px)  rotate(-22deg) ;
    }
    34% {
      -ms-transform:  translate(0px,8px)  rotate(5deg) ;
    }
    50% {
      -ms-transform:  translate(0px,24px)  rotate(24deg) ;
    }
    70% {
      -ms-transform:  translate(0px,0px)  rotate(7deg) ;
    }
    100% {
      -ms-transform:  translate(0px,0px)  rotate(7deg) ;
    }
}

h2
{
    font-family: 'Martel', sans-serif;
    font-weight: bold;
    color: rgb(25, 0, 255);
}

button
{
color: blueviolet;
font-size: larger;
}

ul{
   text-align: center;
   font-family: 'Karla', sans-serif;
}

table
{

    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}


/*End Ellis's Stuff*/

/*Katherine's Content*/

ruby
{
    color: darkred;
    font-family: 'Courier New';
}

rt
{
    background-color: dodgerblue;
    font-size: medium;
}

del
{
    text-decoration: wavy underline;
    text-shadow: 3px 5px darkslategrey;
}

blockquote
{
    text-transform: capitalize;
    text-indent: 10px;
}

time
{
    page-break-before: always;
    opacity: 0.7;
}

@keyframes KateFadeIn
{
    0% {opacity: 50%}
    100% {opacity: 100%}
}

.Katherine
{
    font-family: 'Garamond';
    display: flex;
    flex-direction: row;
    align-content: center;
    width: 100%;
    margin: 0px;
}

.Katherine #About_Me
{
    display: flex;
    flex-direction: column;
    padding: 50px 50px 50px 100px;
    width: 60%;
    align-content: center;
}

.Katherine h3
{
    text-align: left;
}

.Katherine h2
{
    color: black;
    font-family: 'Garamond';
    font-weight: bold;
}

.Katherine p
{
    text-indent: 30px;
}

.Katherine #Image
{
    display: flex;
    padding: 50px;
    width: 50px;
    animation-name: KateFadeIn;
    animation-duration: 1s;
    animation-iteration-count: 1;
    transition: ease-out;
}

.Katherine img
{
    width: 500px;
}

.Katherine #byline
{
    font-size: medium;
    text-indent: 30px;
}



/*End Katherine's Content*/

/*Robert Content*/
.Rob_Content{
    display: flex;
    flex-direction: column;
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    border: solid 3px #0F14DA;
    background-color: #5558Da;
    padding: 50px;
    box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.70);
    border-radius: 37px;
}

.Rob_Content #rob_About_Me_Photo{
    float: right;
    border: solid 3px #0F14DA;
    box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.70);
    margin-right: 50px;
    margin-left: 50px;
}

.Rob_Content h1{
    color: #fff7ce;
}

.Rob_Content #rob_About_Me_Bio{
    color: #fff7ce;
    margin-left: 50px;
}

.frog_animation{
    position: relative;
    animation-name:Bounce;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes Bounce{
    0%{
        bottom: -300px;
    }

    15%{
        bottom: 50px
    }

    30%{
        bottom: 0px;
    }

    45%{
        bottom: 40px;
    }

    60%{
        bottom: 0px;
    }

    75%{
        bottom:30px;
    }
    100%{
        bottom: -300px;
    }
}
/*Robert Content End*/
/*Killian content start*/
.Killian_Content{
    display: flex;
    flex-direction: column;
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
    border: solid 3px #da490f;
    background-color: #ff0000;
    padding: 50px;
    box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.70);
    border-radius: 37px;
}

.Killian_Content #About_me_Image{
    float: right;
    border: solid 3px #0fb5da;
    box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.70);
    margin-right: 50px;
    margin-left: 50px;
}

.Killian_Content h1{
    color: #ffffff;
}

.Killian_Content #About_Me_Bio{
    color: #ffffff;
    margin-left: 50px;
}

.puck_animation{
    position: relative;
    animation-name:Bounce;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes Bounce{
    0%{
        bottom: -200px;
    }

    15%{
        bottom: 50px
    }

    30%{
        bottom: 0px;
    }

    45%{
        bottom: 50px;
    }

    60%{
        bottom: 0px;
    }

    75%{
        bottom:40px;
    }
    100%{
        bottom: -300px;
    }
}
/*Killian Content End*/



/*GALAXY*/
/** * I was out the other evening looking at Venus with the setting sun and thought, I wonder where all the planets * are in relation to each other right now. I knew what an Orrery was, but I'd never built one. So, given my mate * Donovan's (@donovanh: http://cssanimation.rocks/) penchant for CSS animation, I thought I'd give it a go * building one in pure CSS. * * Many thanks to @aidandore and @iandevlin too for suggestions and improvements * * Chin up Pluto. You'll always be a planet to me... * * Tady: http://tady.me * @tadywankenobi */
/** * Move in a circle without wrapper elements * Idea by Aryeh Gregor, simplified by Lea Verou, borrowed by me! */
.col-6 zodiac
{
    border:2px solid black;
    background-color: chartreuse;
    
   
}

.galaxy_body {
   
    background-image: url('https://cssanimation.rocks/starwars/images/bg.jpg');
    background-size: 33%;
    background-repeat: repeat;
    min-height: 2025px;
}

.system {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
}




.sun {
    width: 144px;
    height: 144px;
    border-radius: 72px;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -72px;
    background-image: url('http://sdo.gsfc.nasa.gov/assets/img/latest/latest_256_HMIIF.jpg');
    background-size: 144px;
    background-repeat: no-repeat;
}
@-webkit-keyframes rot-mer {
    from {
        -webkit-transform: rotate(0deg) translatey(-84px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-84px) rotate(-360deg);
   }
}
@-moz-keyframes rot-mer {
    from {
        -moz-transform: rotate(0deg) translatey(-84px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-84px) rotate(-360deg);
   }
}
@-keyframes rot-mer {
    from {
        transform: rotate(0deg) translatey(-84px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-84px) rotate(-360deg);
   }
}
.mer {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background-color: #888;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -1.75px;
    -webkit-animation: rot-mer 0.88s infinite linear;
    -moz-animation: rot-mer 0.88s infinite linear;
    animation: rot-mer 0.88s infinite linear;
    z-index: 200;
}
.mer-path {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -84px;
    border: solid 1px #444;
}
@-webkit-keyframes rot-ven {
    from {
        -webkit-transform: rotate(0deg) translatey(-90px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-90px) rotate(-360deg);
   }
}
@-moz-keyframes rot-ven {
    from {
        -moz-transform: rotate(0deg) translatey(-90px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-90px) rotate(-360deg);
   }
}
@-keyframes rot-ven {
    from {
        transform: rotate(0deg) translatey(-90px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-90px) rotate(-360deg);
   }
}
.ven {
    width: 5.5px;
    height: 5.5px;
    border-radius: 50%;
    background-color: #f5f9be;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -2.75px;
    -webkit-animation: rot-ven 2.25s infinite linear;
    -moz-animation: rot-ven 2.25s infinite linear;
    animation: rot-ven 2.25s infinite linear;
    z-index: 200;
}
.ven-path {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -90px;
    border: solid 1px #444;
}
@-webkit-keyframes rot-ear {
    from {
        -webkit-transform: rotate(0deg) translatey(-102px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-102px) rotate(-360deg);
   }
}
@-moz-keyframes rot-ear {
    from {
        -moz-transform: rotate(0deg) translatey(-102px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-102px) rotate(-360deg);
   }
}
@-keyframes rot-ear {
    from {
        transform: rotate(0deg) translatey(-102px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-102px) rotate(-360deg);
   }
}
.ear {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #4b94f9;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -3.5px;
    -webkit-animation: rot-ear 3.65s infinite linear;
    -moz-animation: rot-ear 3.65s infinite linear;
    animation: rot-ear 3.65s infinite linear;
    z-index: 200;
}
.ear-path {
    width: 204px;
    height: 204px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -102px;
    border: solid 1px #444;
}
@-webkit-keyframes rot-mar {
    from {
        -webkit-transform: rotate(0deg) translatey(-118px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-118px) rotate(-360deg);
   }
}
@-moz-keyframes rot-mar {
    from {
        -moz-transform: rotate(0deg) translatey(-118px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-118px) rotate(-360deg);
   }
}
@-keyframes rot-mar {
    from {
        transform: rotate(0deg) translatey(-118px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-118px) rotate(-360deg);
   }
}
.mar {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #dd411a;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -3px;
    -webkit-animation: rot-mar 6.87s infinite linear;
    -moz-animation: rot-mar 6.87s infinite linear;
    animation: rot-mar 6.87s infinite linear;
    z-index: 200;
}
.mar-path {
    width: 236px;
    height: 236px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -118px;
    border: solid 1px #444;
}
@-webkit-keyframes rot-jup {
    from {
        -webkit-transform: rotate(0deg) translatey(-228px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-228px) rotate(-360deg);
   }
}
@-moz-keyframes rot-jup {
    from {
        -moz-transform: rotate(0deg) translatey(-228px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-228px) rotate(-360deg);
   }
}
@-keyframes rot-jup {
    from {
        transform: rotate(0deg) translatey(-228px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-228px) rotate(-360deg);
   }
}
.jup {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #eaad3b;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -35px;
    -webkit-animation: rot-jup 43.32s infinite linear;
    -moz-animation: rot-jup 43.32s infinite linear;
    animation: rot-jup 43.32s infinite linear;
    z-index: 200;
}
.jup-path {
    width: 456px;
    height: 456px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -228px;
    border: solid 1px #444;
}
@-webkit-keyframes rot-sat {
    from {
        -webkit-transform: rotate(0deg) translatey(-362px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-362px) rotate(-360deg);
   }
}
@-moz-keyframes rot-sat {
    from {
        -moz-transform: rotate(0deg) translatey(-362px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-362px) rotate(-360deg);
   }
}
@-keyframes rot-sat {
    from {
        transform: rotate(0deg) translatey(-362px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-362px) rotate(-360deg);
   }
}
.sat {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #d6cd93;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -29px;
    -webkit-animation: rot-sat 107.59s infinite linear;
    -moz-animation: rot-sat 107.59s infinite linear;
    animation: rot-sat 107.59s infinite linear;
    z-index: 200;
}
.sat-path {
    width: 724px;
    height: 724px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -362px;
    border: solid 1px #444;
}
@-webkit-keyframes rot-ura {
    from {
        -webkit-transform: rotate(0deg) translatey(-648px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-648px) rotate(-360deg);
   }
}
@-moz-keyframes rot-ura {
    from {
        -moz-transform: rotate(0deg) translatey(-648px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-648px) rotate(-360deg);
   }
}
@-keyframes rot-ura {
    from {
        transform: rotate(0deg) translatey(-648px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-648px) rotate(-360deg);
   }
}
.ura {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #bfeef2;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -13px;
    -webkit-animation: rot-ura 306.87s infinite linear;
    -moz-animation: rot-ura 306.87s infinite linear;
    animation: rot-ura 306.87s infinite linear;
    z-index: 200;
}
.ura-path {
    width: 1296px;
    height: 1296px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -648px;
    border: solid 1px #444;
}
@-webkit-keyframes rot-nep {
    from {
        -webkit-transform: rotate(0deg) translatey(-972px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-972px) rotate(-360deg);
   }
}
@-moz-keyframes rot-nep {
    from {
        -moz-transform: rotate(0deg) translatey(-972px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-972px) rotate(-360deg);
   }
}
@-keyframes rot-nep {
    from {
        transform: rotate(0deg) translatey(-972px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-972px) rotate(-360deg);
   }
}
.nep {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #363ed7;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -12px;
    -webkit-animation: rot-nep 601.9s infinite linear;
    -moz-animation: rot-nep 601.9s infinite linear;
    animation: rot-nep 601.9s infinite linear;
    z-index: 200;
}
.nep-path {
    width: 1944px;
    height: 1944px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -972px;
    border: solid 1px #444;
}
@-webkit-keyframes rot-plu {
    from {
        -webkit-transform: rotate(0deg) translatey(-1246px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-1246px) rotate(-360deg);
   }
}
@-moz-keyframes rot-plu {
    from {
        -moz-transform: rotate(0deg) translatey(-1246px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-1246px) rotate(-360deg);
   }
}
@-keyframes rot-plu {
    from {
        transform: rotate(0deg) translatey(-1246px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-1246px) rotate(-360deg);
   }
}
.plu {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #963;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -1.5px;
    -webkit-animation: rot-plu 904.65s infinite linear;
    -moz-animation: rot-plu 904.65s infinite linear;
    animation: rot-plu 904.65s infinite linear;
    z-index: 200;
}
.plu-path {
    width: 2492px;
    height: 2492px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.6666666667px;
    left: 50%;
    margin: -1246px;
    border: solid 1px #444;
}
@-webkit-keyframes rot-lune {
    from {
        -webkit-transform: rotate(0deg) translatey(-7px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-7px) rotate(-360deg);
   }
}
@-moz-keyframes rot-lune {
    from {
        -moz-transform: rotate(0deg) translatey(-7px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-7px) rotate(-360deg);
   }
}
@-keyframes rot-lune {
    from {
        transform: rotate(0deg) translatey(-7px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-7px) rotate(-360deg);
   }
}
.lune {
    width: 2px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1.5px;
    -webkit-animation: rot-lune 0.27s infinite linear;
    -moz-animation: rot-lune 0.27s infinite linear;
    animation: rot-lune 0.27s infinite linear;
}
.mar {
    background-image: repeating-linear-gradient(to bottom, #fff, #fff 1px, transparent 1px, transparent 5px);
}
@-webkit-keyframes rot-pho {
    from {
        -webkit-transform: rotate(0deg) translatey(-7px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-7px) rotate(-360deg);
   }
}
@-moz-keyframes rot-pho {
    from {
        -moz-transform: rotate(0deg) translatey(-7px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-7px) rotate(-360deg);
   }
}
@-keyframes rot-pho {
    from {
        transform: rotate(0deg) translatey(-7px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-7px) rotate(-360deg);
   }
}
@-webkit-keyframes rot-dem {
    from {
        -webkit-transform: rotate(0deg) translatey(-9px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-9px) rotate(-360deg);
   }
}
@-moz-keyframes rot-dem {
    from {
        -moz-transform: rotate(0deg) translatey(-9px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-9px) rotate(-360deg);
   }
}
@-keyframes rot-dem {
    from {
        transform: rotate(0deg) translatey(-9px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-9px) rotate(-360deg);
   }
}
.pho, .dem {
    width: 1px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
}
.pho {
    margin: -1px;
    -webkit-animation: rot-pho 0.15s infinite linear;
    -moz-animation: rot-pho 0.15s infinite linear;
    animation: rot-pho 0.15s infinite linear;
}
.dem {
    margin: -1px;
    -webkit-animation: rot-dem 0.2s infinite linear;
    -moz-animation: rot-dem 0.2s infinite linear;
    animation: rot-dem 0.2s infinite linear;
}
.jove {
    width: 2px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 35px;
    left: 50%;
}
@-webkit-keyframes rot-io {
    from {
        -webkit-transform: rotate(0deg) translatey(-39px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-39px) rotate(-360deg);
   }
}
@-moz-keyframes rot-io {
    from {
        -moz-transform: rotate(0deg) translatey(-39px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-39px) rotate(-360deg);
   }
}
@-keyframes rot-io {
    from {
        transform: rotate(0deg) translatey(-39px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-39px) rotate(-360deg);
   }
}
@-webkit-keyframes rot-eur {
    from {
        -webkit-transform: rotate(0deg) translatey(-41px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-41px) rotate(-360deg);
   }
}
@-moz-keyframes rot-eur {
    from {
        -moz-transform: rotate(0deg) translatey(-41px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-41px) rotate(-360deg);
   }
}
@-keyframes rot-eur {
    from {
        transform: rotate(0deg) translatey(-41px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-41px) rotate(-360deg);
   }
}
@-webkit-keyframes rot-gan {
    from {
        -webkit-transform: rotate(0deg) translatey(-45px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-45px) rotate(-360deg);
   }
}
@-moz-keyframes rot-gan {
    from {
        -moz-transform: rotate(0deg) translatey(-45px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-45px) rotate(-360deg);
   }
}
@-keyframes rot-gan {
    from {
        transform: rotate(0deg) translatey(-45px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-45px) rotate(-360deg);
   }
}
@-webkit-keyframes rot-cal {
    from {
        -webkit-transform: rotate(0deg) translatey(-53px) rotate(0deg);
   }
    to {
        -webkit-transform: rotate(360deg) translatey(-53px) rotate(-360deg);
   }
}
@-moz-keyframes rot-cal {
    from {
        -moz-transform: rotate(0deg) translatey(-53px) rotate(0deg);
   }
    to {
        -moz-transform: rotate(360deg) translatey(-53px) rotate(-360deg);
   }
}
@-keyframes rot-cal {
    from {
        transform: rotate(0deg) translatey(-53px) rotate(0deg);
   }
    to {
        transform: rotate(360deg) translatey(-53px) rotate(-360deg);
   }
}
.io {
    -webkit-animation: rot-io 0.2s infinite linear;
    -moz-animation: rot-io 0.2s infinite linear;
    animation: rot-io 0.2s infinite linear;
}
.eur {
    -webkit-animation: rot-eur 0.35s infinite linear;
    -moz-animation: rot-eur 0.35s infinite linear;
    animation: rot-eur 0.35s infinite linear;
}
.gan {
    -webkit-animation: rot-gan 0.7s infinite linear;
    -moz-animation: rot-gan 0.7s infinite linear;
    animation: rot-gan 0.7s infinite linear;
}
.cal {
    -webkit-animation: rot-cal 1.65s infinite linear;
    -moz-animation: rot-cal 1.65s infinite linear;
    animation: rot-cal 1.65s infinite linear;
}
.jup {
    background-image: repeating-linear-gradient(6deg, #797663 22px, #e1dcde 16px, #c3a992 30px, #e9ece2 30px);
}
.spot {
    position: absolute;
    width: 16px;
    height: 12px;
    border-radius: 8px / 6px;
    top: 45px;
    left: 50%;
    background-color: #bc833b;
    box-shadow: 0px 0px 5px #e1dcde;
    border: solid 1px #e1dcde;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    z-index: 300;
}
.nep .spot {
    background-color: #29319d;
    border: 0;
    box-shadow: none;
    top: 50%;
    left: 45%;
    width: 10px;
    height: 6px;
    margin: -2px;
    border-radius: 5px / 3px;
    border-left: solid 1px #7ed6fe;
}
div[class$="-ring"] {
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.7;
    -webkit-transform: rotatex(45deg);
    -moz-transform: rotatex(45deg);
    transform: rotatex(45deg);
}
.a-ring {
    border: solid 5px #96866f;
    width: 119px;
    height: 119px;
    margin: -64.5px;
}
.b-ring {
    border: solid 10px #554c3c;
    width: 104px;
    height: 104px;
    margin: -62px;
}
.c-ring {
    border: solid 9px #574f4a;
    width: 95px;
    height: 95px;
    margin: -56.5px;
}
.f-ring {
    border: solid 2px #908e8d;
    width: 133px;
    height: 133px;
    margin: -68.5px;
}
.e-ring {
    border: solid 7px #908e8d;
    width: 76px;
    height: 76px;
    margin: -45px;
    -webkit-transform: rotatex(0deg) rotatey(89deg) !important;
    -moz-transform: rotatex(0deg) rotatey(89deg) !important;
    transform: rotatex(0deg) rotatey(89deg) !important;
}
.plu, .plu-path {
    top: 1354.0666666667px;
}

/*GALAXY END*/

.EliseBGColor
{
    background-color: #eddedc;
}
.KatherineBGColor
{
    background-color: #eddcde;
}
.RobBGColor
{
    background-color: #dcedeb;
}
.AlanBGColor
{
    background-color: #dfdced;
}
.Alan-Jumbo
{
  margin-left: 50px;
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
/* border: solid 3px #3e16b4; */
    background-color: #202020;
    padding: 50px;
    box-shadow: 0 1.5px 3px 0 rgba(15, 9, 49, 0.7);
  border-radius: 37px;
  color: #f1d8fe;
}
.KillianBGColor
{
    background-color: #dce2ed;
}

.my-4
{
    background-color:  rgba(92, 0, 92, 0.452)
}