@font-face { 
   font-family: Pixellari; src: url('Pixellari.ttf'); 
} 


body {
  background-image: url('Images/Backgrounds/backgroundstars.gif');
  background-repeat: repeat;
  background-attachment: fixed;
  min-height: 100vh;
  font-family: 'Pixellari', sans-serif;

}


.pfp {
    border-radius: 500px;
  
}


h1, h2 {
  margin-top: 10px;
  color: white;

}

.sidebar-links {
  background-color: pink;
  width:250px;
  margin-left: -95%;
  margin-top: -50%;
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  outline-style: solid;
  outline-color: white;
  outline-width: 5px;
  padding-top: 10px;

}

.intro{
  font-size:14px;
  
}

strong {
  background-color: rgb(255, 110, 154);
}

.homepage {

  display: block;
  margin: 30px auto 20px auto;
  background-color: pink;
  padding: 5px;
  max-width: 800px;
  text-align: center;
  text-shadow: 2px 2px 5px rgb(255, 70, 131);
  box-shadow: 0px 0px 10px white;
  border-radius: 5px;
  position: relative;
  outline-style: solid;
  outline-color: white;
  outline-width: 5px;
  

}
.updates {
  background-color: pink;
  width:150px;
  margin-left: 45%;
  margin-top: -17%;
  border-radius: 5px;
  display: inline-block;
  position: absolute;
  outline-style: solid;
  outline-color: white;
  outline-width: 5px;
  padding: 10px 20px 20px 10px;
  font-size: 10px;
  text-align: left;
}

.homepage .pookieimg {
  max-width: 200px;
}

#pim {
 right: -10%;
 bottom: 25%;
 width: 150px;
 position: absolute;
}

#bubble {
 right: -35%;
 bottom: 45%;
 width: 250px;
 position: absolute;
}
#bubbletext {
 right: -38%;
 bottom: 60%;
 width: 300px;
 position: absolute;

}

li {
  list-style-image: url('Images/Icons/pawpad.gif');
  list-style-position: inside;
  margin-bottom: 10px;
  margin-top: -9px;

}


ul p {
  font-size: 20px;
  color: rgb(255, 44, 125);
  text-shadow: 2px 2px  rgb(255, 255, 255);
  
  }

/* unvisited link */
a:link {
  color: rgb(255, 255, 255);
}

/* visited link */
a:visited {
  color: rgb(255, 255, 255);
}

/* mouse over link */
a:hover {
  color: rgb(92, 30, 104);
}

/* selected link */
a:active {
  color: rgb(219, 0, 110);
}

a {
  font-size: 18px;
  text-decoration: none;
}






/* NIKKI PAGE */
.nikkibanner {

  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  max-width: 800px;
  height: 150px;
  outline-style: solid;
  outline-color: white;
  outline-width: 5px;

  
  text-shadow: 2px 2px 5px rgb(255, 70, 131);
  box-shadow: 0px 0px 10px white;
  border-radius: 5px;
  position: relative;
  background-image: url("Images/InfinityNikki/NikkiBanner.jpeg");
  background-position: 50% 20%;
}

.frontpic {
 right: 95%;
 bottom: -20%;
 width: 350px;
 position: absolute;
 transition: transform 0.3s ease-in-out;
}



.frontpic:hover {

    transform: rotate(10deg);

}



/* POOKIE  */
.image-container {
  position: absolute;
  transition: transform 0.3s ease;
}

.image-container:hover {
  transform: scale(1.1) rotate(var(--rotation));
  z-index: 100;
}

.image-container img {
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}

.img1 {
  left: 10px;
  top: 150px;
  width: 200px;
  height: 200px;
  --rotation: -12deg;
  transform: rotate(-12deg);
}

.img2 {
  right: 10px;
  top: 150px;
  width: 200px;
  height: 200px;
  --rotation: 10deg;
  transform: rotate(10deg);
}

.img3 {
  right: 850px;
  top: 300px;
  width: 200px;
  height: 200px;
  --rotation: 12deg;
  transform: rotate(12deg);
}

.img4 {
  left: 850px;
  top: 300px;
  width: 200px;
  height: 200px;
  --rotation: -12deg;
  transform: rotate(-12deg);
}

.img5 {
  right: 700px;
  top: 500px;
  width: 200px;
  height: 200px;
  --rotation: -12deg;
  transform: rotate(-12deg);
}

.img6 {
  left: 700px;
  top: 500px;
  width: 200px;
  height: 200px;
  --rotation: 12deg;
  transform: rotate(12deg);
}

.img7 {
  right: 850px;
  top: 700px;
  width: 200px;
  height: 200px;
  --rotation: 12deg;
  transform: rotate(12deg);
}

.img8 {
  left: 850px;
  top: 700px;
  width: 200px;
  height: 200px;
  --rotation: -12deg;
  transform: rotate(-12deg);
}

.img9 {
  right: 750px;
  top: 900px;
  width: 200px;
  height: 200px;
  --rotation: -12deg;
  transform: rotate(-12deg);
}

.img10 {
  left: 750px;
  top: 900px;
  width: 200px;
  height: 200px;
  --rotation: 12deg;
  transform: rotate(12deg);
}

.img11 {
  right: 800px;
  top: 1100px;
  width: 200px;
  height: 200px;
  --rotation: 12deg;
  transform: rotate(12deg);
}

.img12 {
  left: 800px;
  top: 1100px;
  width: 200px;
  height: 200px;
  --rotation: -12deg;
  transform: rotate(-12deg);
}

.img13 {
  right: 750px;
  top: 1300px;
  width: 200px;
  height: 200px;
  --rotation: -12deg;
  transform: rotate(-12deg);
}

.img14 {
  left: 750px;
  top: 1300px;
  width: 200px;
  height: 200px;
  --rotation: 12deg;
  transform: rotate(12deg);
}