Second Layer

/* SECOND LAYER STYLE */

@import url(http://fonts.googleapis.com/css?family=Special+Elite);
@import url(https://fonts.googleapis.com/css?family=Allura);

body {background: white;}

#bigbody2{
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:
url(http://i62.tinypic.com/19m8fs.jpg);
background-size: 100%;
background-repeat: no-repeat;}

#schooltitle {
  position: relative;
  left: 30px;
  top: 100px;
  height: 40px;
  width: 330px;
  border: 0px solid black;
  font-size: 30pt;
  font-family: 'Allura', cursive;
  font-weight: 400;
  color: #191047;
  z-index: 1;
  }

#schoolinfo {
  position: relative;
  left: 50px;
  top: 98px;
  height: 300px;
  width: 300px;
  border: 0px solid black;
  -webkit-animation: zoomin 3s;
}

#schoollinks {
  position: relative;
  top: 0px;
  left: 0px;
  height: 15px;
  width: 300px;
  border: 0px solid black;
  background: #B178A5;
  color: #black;
  font-family: 'Special Elite', cursive;
  font-size: 10pt;
  padding-top: 3px;
}
#schoolcontent {
  position: relative;
  left: 0px;
  height: 275px;
  width: 290px;
  border: 0px solid red;
  background: #191047;
  opacity: .8;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  overflow: hidden;
  padding-left: 5px;
  padding-top: 5px;
  }

#insideschoolcontent {
  height: 255px;
  width: 280px;
  border: 1px solid red;
  color: grey;
  font-family: 'Special Elite', cursive;
  font-size: 8pt;
  padding-bottom: 15px;
  padding-left: 4px;
  overflow: auto;}

  @-webkit-keyframes zoomin{
    0% {left: 9999px; opacity: 0;}
    50% {left: 50px;}
    100% {opacity: 1;}
    }

/* SECOND LAYER HTML */

<div id="bigbody2">

<div id="schooltitle">Kemonozume Gakuen
</div>

<div id="schoolinfo">

<div id="schoollinks">faculties . . curriculum . . staff . . to apply
</div>

<div id="schoolcontent">
<div id="insideschoolcontent">Gonna blow your socks off.<br>
</div>
</div>

</div>
</div>