/* 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." */

body {
  background-color: rgb(255, 255, 230);
  color: black;
  font-family: Georgia, Garamond, Arial;
}

@font-face {
  font-family: "Minecraftia";
  src: url("/fonts/Minecraftia-Regular.ttf");
}

a:link {
    color: blue;
}

a:visited {
    color: purple;
}
a:hover {
    color: green;
}
a:active {
    font-weight: 600;
    font-style: italic;
}

.centered p {
  text-align: center;
  margin: 0 9em;
}

#title h1 {
  background-color: rgb(144, 238, 144);
  color: black;
  text-align: center;
  padding: 5px;
  border-top: 1em rgb(214,247,255) solid;
  border-bottom: 0.25em rgb(204, 204, 204) solid;
}

#splash {
    font-family: "Minecraftia", Arial;
    color: yellow;
    text-align: center;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.7);
    transform: rotate(-15deg) translate(125px, -80px) scale(0.6);
    animation: pulse 0.5s ease infinite;
    margin: -25px;
}

@keyframes pulse {
  0% {
    transform: rotate(-15deg) translate(125px, -80px) scale(0.6);
  }
  50% {
    transform: rotate(-15deg) translate(125px, -80px) scale(0.64);
  }
  100% {
    transform: rotate(-15deg) translate(125px, -80px) scale(0.6);
  }
}

#version {
    font-size: 0.5em;
    letter-spacing: 0.01em;
    font-weight: lighter;
    position: absolute;
    top: 0;
    left: 4px;
}

/*@keyframes marquee {
  0% {transform: translateX(-100%); }
  100% {transform: translateX(100%); }
}

#pikachu {
  animation: marquee 20s linear infinite;
}*/

#pages li { display: inline-block;
            padding: 0 2px 1px 2px;
            border-style: double;
            border-color: rgb(17, 110, 17);
            text-align: center;
}
#pages li a { text-decoration: none;
}

#pages ul { text-align: center;
}


h2 {
  margin-top:30px;
  background-color: rgb(189, 245, 189);
  padding-left: 10px;
  padding-bottom: 3px;
}

h3 {
  margin-left: 1px;
  background-color: rgb(211, 248, 211);
  border-top: 4px rgb(214,247,255) solid;
  border-left: 3px rgb(214,247,255) solid;
}

/*practice area*/

#rightsidebar {
  float: right;
  width: 30%;
  height: 30em;
  overflow: auto;
  scrollbar-color: rgb(189, 245, 189) rgb(214,247,255);
  margin-left: 1em;
  border: inset;
  border-color: rgb(96, 128, 0);
  padding: 0 1em;
}

#rightsidebar img {
  max-width: 70%;
  height: auto;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
  display: block;
  margin: 0 auto;
}

#rightsidebar ul {
  list-style: none;
  padding: 0;
  margin-left: 0;
}

#rightsidebar figcaption {
 text-align: center;
}

#rightsidebar h5 {
  margin-bottom: -1em;
}

#crossedoff {
  text-decoration: line-through;
}

#sublist {
    margin-left: 0.5em;
    font-size: 0.85em;
}

.main {
  margin-right: 35%;
}

.main img{
  max-width: 80%;
  height: auto;
}