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

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');
body {
  min-height: 100vh;
  color: black;
  font-family: "Pixelify Sans", serif;
  max-width: 800px;
  margin: 0 auto;
}
ul {
  display: table; 
  margin: 0 auto;
  text-align: left;
}
.container {
  background-image: url('/bgpics/cottoncandy.gif');
  border: 2px solid #b827fc;    
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;
  overflow: auto;
}
.pagetop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;
  background-image: url('/gifs/pinkflowers.gif');
  background-size: cover;
  color: black;
  height: 200px;
  border: 1px solid purple;
  text-align: center;
  padding: 15px;
  margin: 10px 0;
  box-shadow: 0 4px 5px rgba(0,0,0,0.5);
}
.boxrunner {
  height:20px;
  background-color: #FEF0F3;
  margin-top: 5px;
}
.blinkies {
  display: flex;
}
 .box {
  width: 450px;
  height: 600px;
  background-color: #FEF0F3;
  color: #311B5C;
  border: 1px solid purple;
  border-radius: 0px;
  padding: 15px;
  margin: 0 auto;
  margin-top: 10px;
  box-shadow: 0 4px 5px rgba(0,0,0,0.5);
  overflow: auto;
}
.leftbox {
  width: 150px;
  height: 600px;
  color: #311B5C;
  background-color: #FEF0F3;
  border:1px solid purple;
  margin-top: 10px;
  float: left;
}
.rightbox {
  flex: 1;
  display: flex;
  justify-content: center;
  width: 150px;
  height: 600px;
  color: #311B5C;
  background-color: #FEF0F3;
  border: 1px solid purple;
  margin-top: 10px;
  float: right;
}
.weblinks {
  flex-direction: column;
  justify-content: center;
  background-color: white;
  border: 1px solid darkviolet;
  width: 90px;
  border-radius: 3px;
  padding: 5px;
  margin: 3px;  
}
.weblinks:hover {
  cursor: url('https://cdn.cursors-4u.net/previews/perfect-world-online-sword-7dc79c80-32.webp') 34 32, auto;
}
.backbutton {
  display: inline-block;
  position: relative;
  height: 35px;
  border: 1px solid #b827fc;    
  border-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  border-image-slice: 1;
  margin: 0 auto;
  background-color: white;
}
.potatoes {
  width: 250px;
  height: 100px;
  background-color: white;
  color: black;
  border: 3px solid darkred;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 4px 5px rgba(0,0,0,0.5);
  
  animation: testSlide, testRotate;
  animation-iteration-count: infinite;
  animation-timing-function:linear;
  animation-direction: alternate;
  animation-duration: 5s;
   
 }
 .boxsegment {
   background-color: white;
   border: 1px solid darkviolet;
   border-radius: 5px;
   padding: 5px;
   margin: 5px;
   font-size: small;
 }
 .jade {
   display: flex;
   position: absolute;
   margin-right: 725px;
   margin-bottom: 160px;
 }
 .jade:hover {
  cursor: url('https://cdn.cursors-4u.net/previews/perfect-world-online-sword-7dc79c80-32.webp') 34 32, auto;   
 }
 .porygon {
  display:flex;
  margin-right: 850px;
  position:absolute;
 }
 .leekmiku {
  display:flex;
  margin-left: 695px;
  margin-top: 160px;
  position:absolute;   
 }
 .titleholder {
   background: white;
   color: #311B5C;
   border: 1px solid darkviolet;
   border-radius: 5px;
   margin: 3px;
   padding: 5px;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
 }
 .tabs {display: flex; gap: 6px; padding: 10px 12px 0;}
 .tabs:hover {cursor: url('https://cdn.cursors-4u.net/previews/perfect-world-online-sword-7dc79c80-32.webp') 34 32, auto;}
 
 .tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*background: linear-gradient(180deg, #e8e0f5 0%, #dcd4ee 50%, #d0d8ea 51%);*/
  background: linear-gradient(180deg, #e0eff5 0%, #f9f8ff 50%, #fce4ee 61%);
  border: 1px solid rgba(160,140,200,0.5); /*border-bottom: none;*/
  border-radius: 8px /*8px 0 0*/;
  padding: 6px 16px; font-size: 16px; color: #7a6aa5;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
 }
 .tab:hover {
  background: linear-gradient(180deg, #e0eff5 0%, #FFFFFF 50%, #FFFAFC 61%);
 }
 
@keyframes testSlide {
  from{margin-left: 70%;}
  to {margin-left: 0%;}
}

@keyframes testRotate {
  100%{transform: rotateZ(360deg)}
}