/* 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 {
  cursor: url('Holy moonlight.png'), auto;
  background: #2d062d;
  color: black;
  font-family: Verdana;
  overflow: hidden;
}

#header{
  background: #441c44;
  background-image: url("lined-paper.png");
  border: 3px solid;
  border-color:black;
  border-radius: 10px;
  color:black;
  padding: 0px 0px 0px 0px;
  width: 80%;
  height: 30px;
  margin-left: 10%;
  margin-right: 10%;
  overflow: hidden;
  text-align: center;
  line-height: 0px;
      }
      
#blobleft{
  background: #441c44;
  background-image: url("lined-paper.png");
  border: 3px solid;
  border-color:black;
  border-radius: 10px;
  color:black;
  padding: 0px 20px 20px 20px;
  height:auto;
  margin-left: 10%;
  overflow: hidden;
  width: 10%;
  float: left;
  }

#main {
  background: #441c44;
  background-image: url("lined-paper-2.png");
  border: 3px solid;
  border-color:black;
  border-radius: 10px;
  color:black;
  padding: 10px 10px 10px 10px;
  margin-left: 25%;
  margin-right: 25%;
  width: 50%;
  height:auto;
  overflow: hidden;
      }
h1 {
  text-align: center;
  }
h2 {
  text-align: center;
  }
#left{
  width: 40%;
  height:auto;
  margin-left: 5%;
  margin-right: 5%;
  float: left
}
#right{
  width: 40%;
  height:auto;
  margin-left: 5%;
  margin-right: 5%;
  float: right;
}

#blobright{
  background: #441c44;
  background-image: url("lined-paper.png");
  border: 3px solid;
  border-color:black;
  border-radius: 10px;
  color:black;
  padding: 0px 20px 20px 20px;
  height:auto;
  margin-right: 10%;
  overflow: hidden;
  width: 10%;
  float: right;
  }

.textimage{
    height: auto;
    width: 25px;
    border-radius: 2%;
    vertical-align: middle;
}

.gif{
    height: auto;
    width: 50%;
    border: 3px solid;
    border-radius: 10px;
  }

 /* unvisited link */
a:link {
  color: purple;
  text-decoration: none; 
  animation: pulse 1s infinite;
}

/* visited link */
a:visited {
  -webkit-text-stroke: 0.3px black;
  color: purple;
  text-decoration: none; 
  animation: pulse 3s infinite;
}

/*pulse animation visited*/
@keyframes pulse {
  0% {color: #330026; -webkit-text-stroke: 0.3px black;}
  50% {color: #33001a;  -webkit-text-stroke: 0.3px black; }
  100% {color: #330026;   -webkit-text-stroke: 0.3px black;}
}


/* mouse over link */
a:hover {
  -webkit-text-stroke: 0.3px black;
  text-decoration: none; 
  animation: hover 2s infinite;
}

/* animation of mouse hover */
@keyframes hover {
  0% {color: purple; font-size: 100%; }
  25% {color: #9900cc; font-size: 95%; }
  50% {color: purple; font-size: 100%; }
  75% {color: #9900cc; font-size: 105%; }
  100% {color: purple; font-size: 100%; }
}


/* selected link */
a:active {
  color: blue;
  text-decoration: none; 
}