@keyframes title {
    0%   {opacity: 0%; font-size: 5vw; top: 0%; left: 0%;position: relative;}

    20%  {opacity: 70%; font-size: 5vw; top: 0%; left: 0%;position: relative;}

    50% {opacity: 70%; font-size: 2vw; bottom: 63.3vw; left: -29%;position: relative;}
}

@keyframes icons {
    0%   {opacity: 0%;}

    70% {opacity: 0%;}
    100% {opacity: 100%;}
}


@keyframes aboutme-page-onclick {
    0%   {
        margin-left: 30%;
        height: 15vw;
        width: 10%;

        font-size: 0.5vw;

        transform: matrix(1, 0.50, -1.1, 0.5, 0, 0);

    }


    100% {
        height: 47vw;
        width: 40%;

        transform: none;
        font-size: 1.5vw;
    }
}

@keyframes aboutme-page-onclick-reverse {
    0%   {


        top: -50vw;
        left: 30%;

        height: 50vw;
        width: 38%;

        transform: none;
        font-size: 1.8vw;

    }

    100% {


        top: -15vw;
        left: 81%;

        height: 15vw;
        width: 10%;

        font-size: 0.5vw;


        transform: matrix(1, 0.50, -1.1, 0.5, 0, 0);
    }
}

@keyframes ipad-onclick {
    0%   {

        width: 30%;

        margin-top: 23%;
        margin-left: -50%;

        transform:matrix(0.29,-0.12,0.41,0.18,-10,-80);
    }

    100% {
        margin-top: 23%;
        margin-left: -18.7%;


        width: 38%;

        font-size: 1.8vw;

        transform: none;
    }
}

@keyframes ipad-closing {
    0%   {

        top: -50vw;
        left: 30%;


        width: 40%;

        font-size: 1.8vw;

        transform: none;
    }

    33%   {

        top: -50vw;
        left: 30%;


        height: 60vw;
        width: 40%;

        font-size: 1.8vw;

        transform: none;
    }

    100% {
        top: -18vw;
        left: 0%;

        height: 30vw;
        width: 30%;

        font-size: 0.5vw;


        transform:matrix(0.29,-0.12,0.41,0.18,-10,-80);

    }
}

@keyframes ipad-content-opening {
    0% {
        display: block;
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}