/* 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:white;
  color: black;
  font-family: "Hachi Maru Pop", cursive;
  font-weight: 300;
  font-style: normal;
  padding: 0;

  text-align: center;
  margin: 0;
}
h1, h2, h3, p {
  margin: 0;
}

h1{
  margin-top: 150px;
  font-size:70px;  
}

h2{
  font-size:23px;
}

.list{
  font-size: 12px; 
  text-align:left;
}

.box{
  width: 90vw;
  height:125vh;
  
  border-radius: 15px;
  border: none;
  margin:5%;
  margin-top:3%;
  position:relative;
}

.hellokittybox{
  background: rgb(229,0,82);
  box-shadow: 0 9px rgb(165, 0, 39);
}

.kuromibox{
  background:rgb(243, 214, 255);
  box-shadow: 0 9px rgb(203, 174, 229);
}

.cinnamorollbox{
  background:rgb(157,215,244);
  box-shadow: 0 9px rgb(137, 195, 224);
}

.minibox{
  width:40%;
  height:30%;
  border-radius: 5%;
  border: none;
  margin:5%;
  position:absolute;
}

.hellokittyminibox{
  background: rgb(242, 30, 90);
  box-shadow: 0 9px rgb(165, 0, 39);
}

.kuromiminibox{
  background: rgb(223,194,249);
  box-shadow: 0 9px rgb(203, 174, 229);
}

.cinnamorollminibox{
  background: rgb(177, 235, 255);
  box-shadow: 0 9px rgb(137, 195, 224);
}


.sticky{
  position:fixed;
  top: 0;
  left: 0;
  /*background: rgb(252,183,202);*/
  /*the navbar color */
  padding:20px;
  margin:0;
}

#navbar, #navbar2, #navbar3, #navbar4 {
  transition: top 0.3s;
  background-size: contain;
  /*color:rgb(252,183,202);*/
  background-position:50% 50%;
  display:flex;
  height:100px;
  width:100%;
}

#navbar{
  background-image:url(kindasanriobanner.jpg);
}

#navbar2{
  background-image:url(hellokittayhehe.jpg);
}

#navbar3{
  background-image:url(kuromibanner.png);
}

#navbar4{
  background-image:url(cinnamorollbanner.jpg);
}
  




.flippygifs{
  margin-top:-11%; 
  position:relative;
  transform-style: preserve-3d;
  transition: 1s;
}

.flippygifs:hover{
  transform: rotateY(180deg);
}

/* Transform
----------------------------*/
.rotate{
  transition: 1s;
  }
 
.rotate:hover{
  transform: rotate(10deg);
  }

.scale{
  transition: 1s;
  margin-top:10%;
}

.scale:hover{
  transform: scale(1.2);
  }

.skew{
  transition: 1s;
  }
 
.skew:hover{
  transform: skew(-45deg);
  }
  
.back {
  position: absolute;
  top:0;
  left:0;
  transform: rotateY(180deg);
  }  
  
.flip {
  position: relative;
  transform-style: preserve-3d;
  transition: 1s;
  left:40%;
}

.flip:hover{
  transform: rotateY(180deg);
}

.front, .back {
  backface-visibility: hidden;
}

.image-size{
  width:400px;
  height:400px;
}



p{
  color: black;
  text-align: center;
  text-decoration: none;
}

.bignormaltext{
  font-size:25px;
  text-align: center;
}


header {
  margin: 0 auto;
  width: 88%;
}

nav ul{
  list-style: none;
  padding: 0;
  display: flex;
}

nav ul li{
  margin-right: 0.5em;
}

/*nav ul li a{*/
/*  padding: 1em; */
/*  background:rgb(210,175,255);*/
/*  border-radius: 15px;*/
/*  text-decoration:none;*/
/*  color:black;*/
/*  transition:1s;*/
/*}*/

/*nav ul li a:hover{*/
/*  background:rgb(139,79,153);*/
/*}*/

.kuromiparallax, .cinnamorollparallax, .hellokittyparallax, .gudetamaparallax, .aggretsukoparallax{
  height: 130vh;
  background-size: cover;
  background-position: 6%;
  margin: 0;
  background-repeat: no-repeat; 
  background-attachment:fixed;
}

 .kuromiparallax {
   background-image: url(kuromionherphone.png);
 }
 
 .cinnamorollparallax {
   background-image: url(bettercinnamoroll.jpg);
 }
 
 .hellokittyparallax{
   background-image: url(enhanced.jpg);
 }
 
 .gudetamaparallax{
   background-image: url(gudetama.png);
 }
 
 .aggretsukoparallax{
   background-image: url(aggretsuko.png);
 }





.firstinthearray, .kuromiinthearray, .mymelodyinthearray, cinnamorollinthearray{
  transition: 0.25s;
  margin-top:10%;
}


.something{
  display:flex;
  align-items:flex-start;
  justify-content: center;
}

.bigbox{
  width:97%;
  height:50%;
  border-radius: 35px;
  background-color: rgba(255, 255, 255, 0.7);
  justify-content: center;
  margin: 0 auto;
}

.button{
  background: rgba(247,200,214, 0.7);
  color: #fff;
  padding: 15px 25px;
  border-radius: 15px;
  border: none;
  font-size: 17px;
  font-family: "Hachi Maru Pop", cursive;
  box-shadow: 0 9px rgba(253,153,196, 0.8);
  transition: 0.25s;
  cursor: pointer;
  }

.button:hover{
  background: rgb(253,153,196);
  box-shadow: 0 9px rgb(230,140,180);
  }

.button:active{
  transform: translateY(4px);
  box-shadow: 0 5px palevioletred;
  }

@keyframes coolscrolly{
  0%{
    transform: translateX(-100%);
  }
  100%{
    transform: translateX(100%);
  }
}

.glowtext{
  animation-name:glowiness;
  animation-duration:2s;
  animation-direction:alternate;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}

@keyframes glowiness{
  0%{
    color:rgba(0, 0, 0, 0);
  }
  20%{
    color:rgba(0, 0, 0, 0);
  }
  100%{
    color:rgba(0, 0, 0, 1);
  }
}

.scrolly{
  animation-name:coolscrolly;
  animation-duration:7s;
  animation-direction:normal;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
}