/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* dark purple is #2a0f37
   light purple is #a05ac5
   blue is #1ec6c6
   pink is #dc36c8
   */

body {
  font-size: 14px;
  font-family: "Courier New";
  color: white;
  background-color: black;
}

#headerihardlyknowher {
  font-family: "Press Start 2P", Helvetica;
  font-size: 56px;
  color: black;
  background-color: #a05ac5;
  text-shadow: 2px 2px #dc36c8, -2px -2px #1ec6c6;
  width: 1000px;
  height: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px auto;
  padding: 0px 5px;
}

#headerihardlyknowher a {
  font-family: "Press Start 2P", Helvetica;
  font-size: 56px;
  color: black;
  text-shadow: 2px 2px #dc36c8, -2px -2px #1ec6c6;
  text-decoration: none;
}

#headerihardlyknowher a:hover {
  font-family: "Press Start 2P", Helvetica;
  font-size: 56px;
  color: white;
  text-shadow: 2px 2px #dc36c8, -2px -2px #1ec6c6;
}

#scroll-container {
  background-color: #1ec6c6;
  width: 1008px;
  border: solid #a05ac5 1px;
  height: 1em;
  color: black;
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto;
  padding: 0;
}

#scroll-text {
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);

  -moz-animation: myanimation 10s linear infinite;
  -ms-animation: myanimation 10s linear infinite;
  -webkit-animation: myanimation 10s linear infinite;
  animation: myanimation 10s linear infinite;
}

/*firefox animation*/
@-moz-keyframes myanimation {
  from {-moz-transform:
    translateX(100%);}
    to {-moz-transform:
    translateX(-100%); }  
} 

/*chrome animation*/
@-webkit-keyframes myanimation {
  from {-webkit-transform: translateX(100%);}
    to {-webkit-transform: translateX(-100%);}  
} 

/*basic animation*/
@keyframes myanimation {
  from {
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);}
  to {
    -ms-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -transform: translateX(-100%);}
} 

#container {
  margin: auto;
  margin-top: 0px;
  padding: 0px;
  width: 1008px;
  height: 650px;
  position: relative;
  border: solid #a05ac5;
  border-width: 1px;
  overflow: auto;
}

#content  {
  color: white;
  margin: 0;
  padding: 30px;
  background-color: black;
  margin-left: 183px; 
  height: 650px;
}

#content a {
  color: #1ec6c6;
}

#content a:hover{
  text-transform: uppercase;
  font-weight: bold;
} 

#content p {
  margin: 2px;
}

#updates {
  background-color: black;
  width: 500px;
  height: auto;
  padding: 10px;
  margin: 20px auto;
  border: double #1ec6c6 3px;
}

#updates h1 {
  margin: 0;
  color: #dc36c8;
  text-decoration: underline;
}

#sidebar {
  position: fixed;
  width: 150px;
  height: 610px;
  padding: 20px;
  border-right: dashed #dc36c8;
  line-height: 12px;
  overflow: hidden;
}

#sidebar h2 { 
  color: #dc36c8;
  text-align: center;
  padding: 5px;
  border: solid #dc36c8;
  border-width: 1px;
}

#sidebar h3 a { 
  color: #dc36c8;
  text-align: center;
  padding: 5px;
  border: none;
}

#sidebar p {
  display: block;
  text-transform: uppercase;
  font-weight: bold;
}

#sidebar a {
  color: #1ec6c6;
}

#sidebar a:hover{
  text-transform: uppercase;
  font-weight: bold;
}

#blurwobble {
  background-image: url("images/staticblur.gif");
  width: 125px;
  height: 125px;
  position: relative;
  margin: auto;
}

#blurwobble:hover{
  background-image: url("images/hoverblur.gif");
  width: 125px;
  height: 125px;
} 

.center {
  display: block;
  margin: auto;
}