/*********************/
#animata{
    width: 100%;
    height: 100%;
    /* background-color: green; */
    position: relative;
}
.animatix{
    background-color: white;
    border-radius: 50%;
}

#animate_1, #animate_2, #animate_3, #animate_4, #animate_5{
    position: absolute;

    animation-name: magic_circle;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.01s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
}

#animate_1{
    background-color: greenyellow;
}
#animate_2{
    background-color: blueviolet;
    animation-delay: 0.5s;
}
#animate_3{
    background-color: pink;
    animation-delay: 1s;
}
#animate_4{
    background-color: blueviolet;
    animation-delay: 1.5s;
}
#animate_5{
    background-color: greenyellow;
    animation-delay: 2s;
}

/***********************/

#animate_6, #animate_7, #animate_8, #animate_9{
    position: absolute;
    width: 90%;
    height: 90%;
    border-radius: 0;
    font-family: 'bellig_md';
    opacity: 0;
}
#animate_7{
    background-color: #f0c67a;
}
#animate_8{
    background-color: #dbdbdb;
}

#animate_6 p{
    position: relative;
    font-size: 140%;
    left: 10%; top: 12%;
    color: brown;
}
#opted{
    position: relative;
    font-size: 90%;
    left: 15%;
    font-family: 'stylish_reg';
}
#ousted{
    font-family: 'sary_soft_thin';
    font-size: 150%;
}

@keyframes magic_circle{
    0%{
        width: 0;
        height: 0;
        left: 50%;
        top: 50%;
    }
    50%{
        width: 80%;
        height: 100%;
        left: 10%;
        top: 0;
        opacity: 1;
    }
    80%{
        border-radius: 100%;
        width: 80%;
        height: 100%;
        left: 10%;
        top: 0;
    }
    100%{
        border-radius: 100%;
        width: 40%;
        height: 50%;
        left: 30%;
        top: 25%;
        opacity: 0;
    }
}

/************************************/
#chap{
    position: absolute;
    width: 25%;
    height: 70%;
    background-color: black;
    top: 10%;
    right: 10%;
    border-radius: 15%;
    border: 7px double #7a2020;
}
#chap p{
    transform: rotateZ(90deg);
    text-indent: 45%;
    color: goldenrod;
}

#animate_9{
    border: 2px solid #7a2020;
    border-top: 1rem solid black; 
    border-bottom: 3px solid #7a2020;
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%; 
    background-color: #4d2b2b;
    height: 85%;
    top: 0%;

    transform-origin: 0% 0%;

    animation-name: page_cover_flip;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
}
#animate_8{
    animation-name: page_drop1;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
}
#animate_7{
    animation-name: page_drop2;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 4.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
}
#animate_6{
    animation-name: show_page;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
}
#sketch_book{
    position: relative;
    width: 100%;
    height: 100%;

    animation-name: sketchbook;
    animation-duration: 4.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 0.01s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-direction: normal;
}
#card_mid{
    overflow: hidden;
}

/************************************/
@keyframes show_page{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
@keyframes page_cover_flip{
    0%{
        opacity: 1;
        transform: rotateX(0deg);
    }
    50%{
        transform: skewX(0);
    }
    100%{
        opacity: 1;
        transform: rotateX(85deg) skewX(10deg);
    }
}
@keyframes page_drop2{
    0%{
        opacity: 1;
        top: 0;
    }
    40%{
        opacity: 1;
        top: 0;
        transform: skewX(0deg);
    }
    70%{
        transform: skewX(2deg);
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        top: 200%;
        transform: skewX(-10deg);
    }
}
@keyframes page_drop1{
    0%{
        opacity: 1;
        top: 0;
    }
    55%{
        transform-origin: 0% 0%;
        transform: rotateZ(0deg);
    }
    60%{
        top: 0;
        transform-origin: 0% 0%;
        transform: rotateZ(45deg);
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        top: 200%;
        transform: skewX(-10deg);
    }
}
@keyframes sketchbook{
    0%{
        transform: rotateZ(-45deg);
        top: 120%;
        opacity: 0;
    }
    70%{
        opacity: 0;
    }
    75%{
        transform: rotateZ(-45deg);
        top: 120%;
    }
    100%{
        transform: rotateZ(0deg);
        top: 0%;
    }
}
/********************************/
#service_3{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}