html, body {height: 100%;}

html {display: table;
    margin: auto;}

body {display: table-cell;
     vertical-align: middle;}

body{background-image: url(images/caketi.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;}

@font-face{src: url(fonts/GreatVibes-Regular.ttf);
    font-family: GV;}

@font-face{src: url(fonts/Stalemate-Regular.ttf);
    font-family: stale}

@font-face{src: url(fonts/FjordOne-Regular.ttf);
    font-family: fo}

a:link{color:#2b1a25};
a:hover{color:#ff9598;}
a:visited{color:#c45e62;}

.pro{border-radius: 25px;
     height: 20%;
     width: 50%;
     padding: 5px;
     text-align: center;
     position: absolute;
     left: 310px;
     top: 40px;
     z-index: 1;
     font-family: 'GV'; color: #ff9598;
     font-size: 30px;
     vertical-align: middle;
     line-height: 35px;}

.fanfic{background-color:#f9f8f8;
        border-radius: 25px;
        border: 1px solid #f9f8f8;
        padding: 15px;
        height: 100%;
        width: 27%;
        text-align: justify;
        position: absolute;
        left: 50px;
        top: 170px;
        z-index: 1;
        font-family: 'fo'; color: #2b1a25;
        font-size: 18px;
        vertical-align: middle;
        line-height: 20px;}

.quizzes{background-color:#f9f8f8;
         border-radius: 25px;
         border: 1px solid #f9f8f8;
         padding: 15px;
         height: 100%;
         width: 30%;
         text-align: justify;
         position: absolute;
         left: 440px;
         top: 170px;
         z-index: 1;
         font-family: 'fo'; color: #2b1a25;
         font-size: 18px;
         vertical-align: middle;
         line-height: 20px;}

.crafts{background-color:#f9f8f8;
        border-radius: 25px;
        border: 1px solid #f9f8f8;
        padding: 15px;
        height: 100%;
        width: 25%;
        text-align: justify;
        position: absolute;
        left: 870px;
        top: 170px;
        z-index: 1;
        font-family: 'fo'; color: #2b1a25;
        font-size: 18px;
        vertical-align: middle;
        line-height: 20px;}

#divide{float: right;
        margin-right: 15px;
        position: absolute;
        left: 5px;
        top: -50px;
        z-index: 2;}

#swirl1{float: right;
        margin-right: 15px;
        position: absolute;
        left: 295px;
        top: 75px;
        z-index: 2;}

#swirl2{float: right;
        margin-right: 15px;
        position: absolute;
        left: 35px;
        top: 75px;
        z-index: 2;}

#swirl3{float: right;
        margin-right: 15px;
        position: absolute;
        left: 735px;
        top: 75px;
        z-index: 2;
        transform: scaleX(-1);}

#swirl4{float: right;
        margin-right: 15px;
        position: absolute;
        left: 995px;
        top: 75px;
        z-index: 2;
        transform: scaleX(-1);}

#swirl5{float: right;
        margin-right: 15px;
        position: absolute;
        left: 295px;
        top: 775px;
        z-index: 2;}

#swirl6{float: right;
        margin-right: 15px;
        position: absolute;
        left: 35px;
        top: 775px;
        z-index: 2;}

#swirl7{float: right;
        margin-right: 15px;
        position: absolute;
        left: 735px;
        top: 775px;
        z-index: 2;
        transform: scaleX(-1);}

#swirl8{float: right;
        margin-right: 15px;
        position: absolute;
        left: 995px;
        top: 775px;
        z-index: 2;
        transform: scaleX(-1);}

#cat{float: right;
     margin-right: 15px;
     position: absolute;
     left: 600px;
     top: 770px;
     z-index: 2;}

#footer1{float: right;
         margin-right: 15px;
         position: absolute;
         left: 5px;
         top: 805px;
         z-index: 2;
         transform: scaleY(-1);}

.gig{border-radius: 25px;
     height: 5%;
     width: 50%;
     padding: 5px;
     text-align: center;
     position: absolute;
     left: 325px;
     top: 860px;
     z-index: 1;
     font-family: 'fo'; color: #ff9598;
     font-size: 15px;
     vertical-align: middle;
     line-height: 35px;}

#field{float: right;
      margin-right: 15px;
      position: absolute;
      left: 0px;
      top: 810px;
      z-index: 3;}

#roll{float: right;
      margin-right: 15px;
      position: absolute;
      left: 330px;
      top: 280px;
      z-index: 2;}

#sakura1{float: right;
         margin-right: 15px;
         position: absolute;
         left: 974.5px;
         top: -30px;
         z-index: 2;}