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

/*Font Import*/
@import url('https://fonts.googleapis.com/css2?family=Goldman:wght@400;700&family=Gorditas:wght@400;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*Entire Website Actions*/
body {
    background-image: url('/PurpleStars.jpg');
    background-size: cover;
    font-family: 'Space Mono', Arial;
}

/*Title Heading Text*/
h1 {  
  background-color: #573772;
  text-align:center;
  color: #D8A8FF;
  z-index: 4;
  font-family: 'Goldman', Times;
}

h2 {
  background-color: #573772;
  margin-right: 80%;
  position: absolute;
  border-radius: 9px;
  top: 250px;
}

h3 {
  color: #573772;
  font-family: 'Gorditas', Times;
  font-weight: bolder;
}
h4 {
    font-family: 'Goldman', Times;
}

/*Button Settings*/
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #944DFF;
  color: #ffffff;
  border-radius: 7px;
  max-width: 120px;
  border: 5px solid #000000;
}
.button:hover {
  background-color: #6937B3;
}
.BackButton {
  position: absolute;
  display: inline-block;
  padding: 20px 50px;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 7px;
  top: 100%;
}
.BackButton:hover {
  background-color: #DEDEDE;
}

.HomeNav {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/*Main Paragraph Text*/
p1 {
  position: absolute;
  display: block;
  padding: 15px 20px;
  background-color: #BC8FFF;
  text-align:center;
  border-radius: 5px;
  top: 175px;  
}
p2 {
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 2;
}
p3 {
  position: absolute;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  text-align:left;
  max-width: 50%;
  margin-right: 20;
  top: 325px;
}
p4 {
  display: block;
  background-color: #DEDEDE;
  color: #6937B3;
  text-align: center;
}
p5 {
  display: block;
  padding: 15px 20px;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 5px;
  text-align: center;
  z-index: 1;
}
p7 {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  color: #000000;
}


/*Gifs and Images*/

.ChibiFlower {
  height: 150px;
  border: 5px gray;
}
.ChibiGumi {
  height: 150px;
  border: 5px gray;
}
.ChibiRin {
  height: 150px;
  border: 5px gray;
}
.ChibiMilk {
  height: 150px;
  border: 5px gray;
}
/*Socials Logos*/
.PintrestLogo {
  height: 100px;
  border: 3px solid #000000;
  border-radius: 7px;
}
.InstagramLogo {
  height: 100px;
  border: 3px solid #000000;
  border-radius: 7px;
}
.YouTubeLogo {
  height: 100px;
  border: 3px solid #000000;
  border-radius: 7px;
}
/*Window Boxes*/
.IntroPar {
  width: 75%;
  max-width: 750px;
  border: 2px solid #000000;
  background-color: #DEDEDE;
  overflow: hidden;
  margin: 20px auto;
}

.VocalSynths {
  width: 37%;
  max-width: 750px;
  border: 2px solid #000000;
  background-color: #FFFFFF;
  overflow: hidden;
}

.IntroBar {
  width: 37%;
  max-width: 750px;
  border: 3px #000000;
  background-color: #AF6EEB;
  padding: 5px 750px;
}

.VSynthCap {
  width: 35%;
  height: 65px;
  background-color: #AF6EEB;
  padding: 13px 15px;
  border: 5px #000000;
}


/*Images for MeetZ*/
.portrait {
  height: 250px;
  background-color: #18669C;
  position: absolute;
  top: 12%;
  left: 7%;
}

.Airi {
  position: absolute;
  transform: scaleX(-1);
  height: 430px;
  top: 24%;
  right: 3%;
  z-index: 0;
}

.FinboyFlag {
  height: 125px;
  width: 100%;
  display: flex;
  flex-direction: row;
}

/*Gender Section*/
.GenderDescription {
  right: 30%;
  padding: 5px 8px;
  width: 25%;
  position: absolute;
  top: 50%;
  height: 215px;
  background-color: #DEDEDE;
  overflow: hidden;
}

/*Kid Pics*/
.HomeA {
  position: absolute;
  top: 15%;
  right: 5%;
}
  
.HomePhotos {
  display: flex;
  flex-direction: column;
  background-color: #DEDEDE;
  color: #FFFFFF;
  padding: 7px 12px;
  border: 2px solid #000000;
}
.JDBelly {
  width: 300px
}
.HomeBar {
  background-color: #6937B3;
  width: 100%;
}

/*ButterflyPics*/
.ButterfliesHome {
  position: absolute;
  top: 50%;
  right: 30%;
}
.Butterflies {
  background-color: #DEDEDE;
  padding: 7px 12px;
  border: 2px solid #000000;
  max-width: 450px;
}
.ButterflyPics {
  display: flex;
  flex-direction: row;
}
.ButterflyBar {
  background-color: #6937B3;
  width: 475px;
  border: 3px solid #000000;
}

.Buckeye {
  width: 150px;
}
.Eggfly {
  width: 150px;
}
.Dragon {
  width: 150px;
}
.p6 {
  color: #000000;
  display: inline;
  max-width: 450px;
}

/*Kanade*/
.Kanade {
  position: absolute;
  top: 7%;
  right: 40%;
  width: 250px;
}
/*QnA*/
.QnABox {
  position: absolute;
  top: 200px;
  left: 200px;
  z-index: 10;
  border: 5px solid #000000;
  border-radius: 13px;
}