/* 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-face{
  font-family: 'MSW98UI-Regular';
  src: url('fonts/MSW98UI-Regular.woff');
  }

@font-face{
  font-family: 'Higery-Regular.otf';
  src: url('fonts/Higery-Regular.otf');
  }

#home-intro{
  position: fixed;
  font-size: 20px;
  width: 910px;
  height: 530px;
  border: 1px solid #333;
  overflow-y: scroll;
  z-index: 5;
  top: 25%;
  bottom: 0%;
  left: 20%;
  right: 0%;
  }

.title{
  font-family: 'Higery-Regular';
  font-size: 45px;
  position: fixed;
  top: 12.5%;
  left: 35%;
  z-index: 5;
  }
  
.about-title{
  font-family: 'Higery-Regular';
  font-size: 45px;
  position: fixed;
  top: 12.5%;
  left: 40%;
  z-index: 5;
  }

.art-title{
  font-family: 'Higery-Regular';
  font-size: 45px;
  position: fixed;
  top: 12.5%;
  left: 45%;
  z-index: 5;
  }

.box{
  border: 0px solid white;
  background-image: url('stuff/teal.png');
  background-attachment: fixed;
  background-repeat: repeat;
  margin: auto;
  margin-top: 120px;
  width: 1000px;
  height: 630px;
  position: relative;
  padding: 0px;
  z-index: 4;
  right: 3%;
  box-shadow: 0rem -0rem 0.0rem 0.0rem #FFFFFF;
}

.box2{
  border: 1px solid white;
  background-image: url('stuff/white.jpg');
  background-attachment: fixed;
  background-repeat: repeat;
  margin: auto;
  margin-top: 120px;
  width: 900px;
  height: 50px;
  position: absolute;
  padding: 5px;
  top: 1%;
  left: 20%;
  z-index: 5;
  box-shadow: 0rem -0rem 0rem 0rem #FFFFFF;
}

.text1{
  position: absolute;
  top: 12%;
  left: 1.5%;
  }

.text2{
  position: absolute;
  top: 12%;
  left: 7%
  }
  
.text3{
  position: absolute;
  top: 26%;
  left: 1.5%
  }

.icon1{
  position: absolute;
  top: 6%;
  }


.icon2{
  position: absolute;
  top: 6%;
  left: 7%;
  }

.icon3{
  position:absolute;
  top: 20%;
  }

.aboutme{
  position: absolute;
  top: 8%;
  bottom: 0%;
  left: 80.6%;
  right: 0%;
}

.bg{
  position: absolute;
  top: 7.5%;
  left: 14.5%;
}

.placeholder{
  position: absolute;
  top: 15.5%;
  bottom: 0%;
  left: 83.6%;
  right: 0%;
}

.chatimg{
  position: absolute;
  top: 47%;
  bottom: 40%;
  left: 79.979%;
  right: 0%;
  z-index: -1;
}

.cbox{
  position: absolute;
  top: 51.4%;
  bottom: 0%;
  left: 80.23%;
  right: 0%;
  z-index: 1;
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered{
  position: absolute;
  top: 49%;
  left: 49%;
  font-size: 40px;
  transform: translate(-50%, -50%);
  background-color: #BFD1E5;
}

.img1{
  position: absolute;
  top: 30%;
  bottom: 30%;
  left: 30%;
  right: 30%;
}

.img2{
  position: absolute;
  top: 60%;
  bottom: 70%;
  left: 57%;
  right: 40%;
}