@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
  align-content: center;
  font-family: Open Sans, sans-serif;
  font-size: 20px;
}

html {
  min-height: 100%;
}
.centerpage {
  margin: 0;
  width: 100%;
  }
#toprec {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 10%;
  position: absolute;
  background: linear-gradient(to right, #cc33ff 4%, #ff9900 100%);
  }
    #logo {
        top: 0px;
        left: 10px;
        width: 80px;
        height: 60px;
        position: absolute;
    }
    #pagenumber {
        top: -15px;
        left: 100px;
         width: 200px;
         height: 60px;
         position: absolute;
         background: rgba(68, 92, 255,0);
      }
    #moischool {
        top: -10px;
        left: 40%;
         width: 20%;
         height: 8%;
         position: absolute;
         color: yellow;
         background: rgba(68, 92, 255,0);
      }
#book {
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  position: absolute;
  background: linear-gradient(to right, #cc33ff 4%, #ff9900 100%);
}
#leftside {
    top: 10%;
    left: 0px;
    width: 10%;
    height: 80%;
    position: absolute;
      
      }
    #container {
        margin: 0 auto;
        top:0px;
        width: 100%;
        height:100%;
        position: absolute;
        align-items: center;
        background: linear-gradient(to right, #cc33ff 4%, #ff9900 100%);
    }
    
#bottomrec {
    top: 90%;
    left: 0px;
    width: 100%;
    height: 10%;
    position: absolute;
   background: linear-gradient(to right, #cc33ff 4%, #ff9900 100%);
    }
    #content {
        width: 160px;
        margin: 25px auto;
         text-align: center;
    }
    #copun {
         top: 540px;
         left: 300px;
         width: 500px;
         height: 45px;
         position: absolute;
          font-size: 12px;
         text-align: center;
         
        
    }
     #copun1 {
         top: 550px;
         left: 300px;
         width: 500px;
         height: 30px;
         position: absolute;
          font-size: 18px;
         text-align: center;
         
        
    }
    #copun2 {
         top: 580px;
         left: 300px;
         width: 500px;
         height: 30px;
         position: absolute;
          font-size: 16px;
         text-align: center;
         
        
    }



  
    
    
      

  

#animate3 {
top:150px;
  left: 170px;
  width: 50px;
  height: 50px;
  position: absolute;
  background: green;
}

aside {
  margin: 20px 0;
  line-height: 34px;
  position: relative;
  cursor: pointer;
  user-select: none;
}
aside:hover {
  top: -1px;
}
aside:active {
  top: 1px;
}
aside.diamond {
  background-color: #C6ED8D;
}
aside.diamond:after, aside.diamond:before {
  border-color: transparent #C6ED8D;
}
aside.diamond:before {
  left: -17px;
  border-width: 17px 17px 17px 0;
}
aside.diamond:after {
  right: -17px;
  border-width: 17px 0 17px 17px;
}
aside.ribbon {
  background-color: #7DE3C8;
}
aside.ribbon:before, aside.ribbon:after {
  top: 5px;
  z-index: -10;
}
aside.ribbon:before {
  border-color: #53dab6 #53dab6 #53dab6 transparent;
  left: -25px;
  border-width: 17px;
}
aside.ribbon:after {
  border-color: #53dab6 transparent #53dab6 #53dab6;
  right: -25px;
  border-width: 17px;
}
aside.arrow {
  top: -5px;
  left: 400px;
  
  background-color: #8D96ED;
}
aside.arrow:after, aside.arrow:before {
  border-width: 17px 0 17px 17px;
}
aside.arrow:before {
  border-color: #8D96ED transparent;
  left: -17px;
}
aside.arrow:after {
  border-color: transparent #8D96ED;
  right: -17px;
}
aside.arrowl {
  top: -64px;
  left: -400px;
  
  background-color: #8D96ED;
}
aside.arrowl:after, aside.arrowl:before {
  border-width: 17px 17px 17px 0px;
}
aside.arrowl:before {
  border-color: #8D96ED transparent;
  right: -17px;
}
aside.arrowl:after {
  border-color: transparent #8D96ED;
  left: -17px;
}
aside.rounded {
  background-color: #FC9E86;
  border-radius: 25px / 17px;
  left: -20px;
  width: 200px;
}
aside.sheer {
  background-color: #85C9ED;
  left: -5px;
  width: 170px;
}
aside.sheer:after, aside.sheer:before {
  border-width: 33px 10px 0 0;
}
aside.sheer:before {
  left: -10px;
  border-color: transparent #85C9ED;
}
aside.sheer:after {
  right: -10px;
  border-color: #85C9ED transparent;
}

aside:before, aside:after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 0;
}