body {
  background-color: #ffd6df;
  font-weight: bolder;
  background-image: url(https://galactixstar.neocities.org/Images/black_galaxy.gif);

  cursor: url("Website/Lil Images/Cursor.gif") auto;
}

html {
  image-rendering: pixelated;
    -webkit-font-smoothing: never;
}

@font-face {
    font-family: 'ModernDOS';
    src: url(/Fonts/ModernDOS8x16.ttf);
}

#Header {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  margin-top: 0px;
  margin-bottom: 10px;
}

#Logo {
  display: flex;
  flex-direction: column;
  margin-bottom: 0px;
  margin-top: auto;

  width: 700px;
}

#Logo > img {
  width: 700px;
  height: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#Logo > p {
  color: yellow;
  font-family: 'ModernDOS';
  font-size: 24px;
  margin-top: 0px;
  text-shadow: 2.5px 1.5px #ca5800;
  display: block;
  width: 100%;

}

#UpdateBlock {
  display: block;
  width: 250px;
  margin-bottom: 25px;
  margin-top: auto;
  overflow-y: scroll;
  box-shadow: inset -1px -1px #965404, inset 1px 1px #ffea00, inset -1px -1px #9d7100, inset 1px 1px #ffffff;
  background: linear-gradient(0deg, rgb(112, 0, 176) 0%, rgb(255, 0, 183) 10%, rgba(255, 240, 28, 1) 100%);
  border: 2px solid #aa7700;
  border-radius: 10px 10px 10px 35px;
  margin-right: 10px;
  margin-left: auto;
  padding-left: 3px;
  padding-right: 4px;
  overflow: hidden;
  padding-top: 3px;
  padding-bottom: 3px;
}

#UpdateBlock > p {
  font-family: 'ModernDOS';
  margin: 0 0 0 0;
  text-align: right;
  letter-spacing: 2px;
  color: #ffec7f;
  text-shadow: 2.5px 0.5px #ff7700;
  font-size: 20px;

  background-color: rgba(234, 0, 255, 0.585);
  border-radius: 5px 5px 0 0;
  padding: 3px;

}

#statuscafe {
  padding: 2px;
  background-image: url(/Website/Backgrounds/crt-tex-green.jpg);

  border-top: 1px solid;
    border-top-color: currentcolor;
  border-left: 1px solid;
    border-left-color: currentcolor;
  border-bottom: 2px inset;
    border-bottom-color: currentcolor;
  border-right: 2px inset;
    border-right-color: currentcolor;
  border-color: #8f0045;
  font-size: 15px;
  letter-spacing: normal;
  margin-top: 5px;
  font-family: 'ModernDOS';
  color: #3cff00;

  border-radius: 10px;

}

#statuscafe-username {
  margin-bottom: 5px;
  font-weight: 900;
  color: #22831f;
  background-color: #032201;
  padding-left: 5px;
  border-radius: 4px;
  padding-bottom: 3px;
  font-size: 16px;
}

#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

/* Marquee */

.marquee-bg {
 background-image: url(/Website/Backgrounds/crt-tex-green.jpg);
 background-size: 100px;
 background-repeat: repeat;
 border-color: #00c803;
 color: #00ff04;


  border-style: solid;
  border-width: 2px 0 2px 0;

   display: block;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;

  border-radius: 10px;
  font-family: 'ModernDOS';
}

.marquee-bg:hover, .marquee:hover {
  text-shadow: 1px 1px rgb(0, 0, 0);
  color: #a6ff00;
}

.marquee {
  animation: marquee 35s linear infinite;
  text-align: left;
  white-space: nowrap;
  font-size: 18px;
  margin: 5px;

  max-width: 1000px;
  min-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

a {
  color: #523cdf;
}

.marquee:hover {
  animation-play-state: paused;
}

/* 
How to adjust the dreaded Marquee
1. Reduce animation to 5 secs.
2. Reduce - translatex (to) percentage until the Marquee is fully obscured from view
3. Test with other screen sizes.
4. Reduce animation speed back to normal. It will play faster on larger screens and slow on smaller screens.
*/

@keyframes marquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-325%); }
}

.marquee-info {
  margin-left: 15%;
}

/* Marquee End */


#ButtonMarquee {
  background-color: yellowgreen;
  display: block;
  max-width: 1000px;
  min-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}


#MainDiv {
  color: rgb(0, 0, 0);

  margin: 0 auto;
  max-width: 1000px;
  min-width: 800px;
  display: flex;
  flex-direction: row;
  flex-flow: nowrap;
  margin-top: 15px;
  height: 1000px;
}

#LeftDiv {
  width: 175px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}

#RightDiv {
  background-color: rgb(255, 217, 0);
  margin-left: 0px;
  flex-grow: 2;
  margin-left: 15px;
  border-radius: 15px;
  box-shadow: inset -1px -1px #965404, inset 1px 1px #ffea00, inset -1px -1px #9d7100, inset 1px 1px #ffffff;
}

#RightDiv > iframe {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 5px;
  height: 98%;
  margin-bottom: 5px;
  border-style: solid;
  border-width: 2px;
  border-color: rgb(255, 166, 0);
  border-radius: 15px;
  box-shadow: inset -1px -1px #965404, inset 1px 1px #ffea00, inset -1px -1px #9d7100, inset 1px 1px #ffffff;
}

#ExtraNav, #WebLifeNav, #PersonalNav, #ArtNav, #MainNav {
  display: flex;
  flex-direction: column;
  padding: 5px;
  border-radius: 15% 5% 15% 5%;
  margin-bottom: 13px;
  font-family: 'ModernDOS';
  font-size: 23px;
  text-align: center;
  color: rgb(255, 255, 255);
  box-shadow: inset -1px -1px #4b0030, inset 1px 1px #fffff9, inset -1px -1px #000000, inset 1px 1px #ffffff;
}

#MainNav > p , #PersonalNav > p, #ArtNav > p {
  border-radius: 8px;
  margin-bottom: 8px;
  margin-top: 5px;
  background-color: rgba(255, 255, 255, 0.505);
  color: rgb(50, 0, 50);
  padding: 5px;
  text-shadow: 2px .5px #a3007d6f;

}

#WebLifeNav > p, #ExtraNav > p {
  border-radius: 8px;
  margin-bottom: 8px;
  margin-top: 5px;
  background-color: rgba(255, 255, 255, 0.505);
  color: rgb(0, 42, 52);
  padding: 5px;
  text-shadow: 2px .5px #00a267a2;
}

#PersonalNav > button, #ArtNav > button, #MainNav > button {
  margin-bottom: 5px;
  font-size: 18px;
  font-family: 'ModernDOS';
  width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  background: linear-gradient(0deg, rgb(112, 0, 176) 0%, rgb(255, 0, 183) 5%, rgba(255, 240, 28, 1) 100%);
  padding: 1px;
  border-style: solid;
  border-color: rgb(79, 29, 94);
  border-width: 1px 2px 4px 2px;
  color: rgb(71, 0, 71);
  text-shadow: 2px .5px #c20081;
}

a {
  color: inherit; /* blue colors for links too */
  text-decoration: none;
}

#ExtraNav > button, #WebLifeNav > button {
  margin-bottom: 5px;
  font-size: 18px;
  font-family: 'ModernDOS';
  width: 90%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  background: linear-gradient(0deg, rgb(112, 0, 176) 0%, rgb(0, 255, 247) 5%, rgb(157, 255, 0) 100%);
  padding: 1px;
  border-style: solid;
  border-color: rgb(24, 20, 73);
  border-width: 1px 2px 4px 2px;
  color: rgb(10, 40, 67);
  text-shadow: 2px .5px #00a292;

}

#ExtraNav > button:hover , #WebLifeNav > button:hover , #ArtNav > button:hover , #PersonalNav > button:hover , #MainNav > button:hover {
background: linear-gradient(0deg, rgb(87, 0, 150) 0%, rgb(255, 0, 204) 100%);
border-width: 3px 2px 1px 2px;
}

#ExtraNav > button:hover , #WebLifeNav > button:hover {
background: linear-gradient(0deg, rgb(30, 17, 149) 0%, rgb(0, 255, 157) 100%);
border-width: 3px 2px 1px 2px;
}

#MainNav {
  background-color: rgb(255, 0, 238);
}

#PersonalNav {
  background-color: rgb(255, 170, 0);
}

#ArtNav {
  background-color: rgb(238, 255, 0);
}

#ExtraNav {
  background-color: rgb(149, 255, 0);
}

#WebLifeNav {
  background-color: rgb(0, 255, 213);
}

#WebLifeNav > img {
  height: 70px;
  width: 90px;
  margin-left: auto;
  margin-right: auto;

}

#BottomDiv {
  width: 1000px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: yellow;
  margin-top: 45px;
}

#BottomDiv2 {
  width: 600px;
  margin-left: auto;
  margin-right: 100px;
  float: right;
  margin-top: 78px;
  margin-bottom: 25px;
  font-family: 'ModernDOS';
  text-align: center;

  line-height: 30px;
    color: #00d612;
    border-radius: 25px;
    box-shadow:
    3px 3px 1px rgba(0, 0, 0, 0.4),
      inset #09ff00 0 0 0 3px, 
      inset green 0 0 0 8px,
      inset #001b0cc4 0 0 0 10px;
      text-shadow: 3px 3px 1px #2b0018;
      line-height: 25px;
    background: linear-gradient( #004901c4, rgba(0, 0, 0, 0.8) ), url("Website/Lil Images/crt-tex-green.jpg");
    background-repeat: repeat;
    background-position: left top;
    padding: 5px;
}