.top-line {
    transition: 1.5s;
    -webkit-transition: 1.5s;
    transition-timing-function: cubic-bezier(0.93, 0.02, 0.11, 0.98);
    width: 0;
    height: 1px;
    background-color: #505050;
    position: absolute;
    top: 0;
    left: 0;
}

.bottom-line {
    transition: 1.5s;
    -webkit-transition: 1.5s;
    transition-timing-function: cubic-bezier(0.93, 0.02, 0.11, 0.98);
    width: 0;
    height: 1px;
    background-color: #505050;
    position: absolute;
    bottom: 0;
    left: 0;
}

.left-line {
    transition: 1.5s;
    -webkit-transition: 1.5s;
    transition-timing-function: cubic-bezier(0.93, 0.02, 0.11, 0.98);
    width: 1px;
    height: 0;
    background-color: #505050;
    position: absolute;
    top: 0;
    left: 0;
}

.right-line {
    transition: 1.5s;
    -webkit-transition: 1.5s;
    transition-timing-function: cubic-bezier(0.93, 0.02, 0.11, 0.98);
    height: 0;
    width: 1px;
    background-color: #505050;
    position: absolute;
    top: 0;
    right: 0;
}

.top-line-animation, .bottom-line-animation {
    width: 100%;
}

.left-line-animation, .right-line-animation {
    height: 100%;
}

.font-opacity {
    opacity: 0;
    transition: 2s;
    -webkit-transition: 2s;
}

.font-animation {
    opacity: 1;
}

.wrap {
    width: 100%;
    height: 100%;
    transition: 0.5s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: perspective(100rem);
    transform: perspective(100rem);
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}

.container {
    position: absolute;
    left: 0;
    top: 0;
    --rX: 0;
    --rY: 0;
    --bX: 80%;
    --bY: 80%;
    width: 100%;
    height: 100%;
    -webkit-transform: rotateX(calc(var(--rX) * 0.25deg)) rotateY(calc(var(--rY) * 0.25deg));
    transform: rotateX(calc(var(--rX) * 0.25deg)) rotateY(calc(var(--rY) * 0.25deg));
    transition: -webkit-transform .5s .1s;
    transition: transform .5s .1s;
    transition: transform .5s .1s, -webkit-transform .5s .1s;
}

.container-big {
    -webkit-transform: rotateX(calc(var(--rX) * 0.125deg)) rotateY(calc(var(--rY) * 0.125deg));
    transform: rotateX(calc(var(--rX) * 0.125deg)) rotateY(calc(var(--rY) * 0.125deg));
}

.container--active {
    transition: none;
}

.font-hide {
    position: relative;
    bottom: -20px;
    transition: 1s;
    -webkit-transition: 1s;
    opacity: 0;

}

.font-show {
    position: relative;
    bottom: 0;
    opacity: 1;
}