* {
    position: relative;
    box-sizing: border-box;
}

.iframely-embed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: white;
}

#app {
    /* opacity: 0 !important;
    visibility: hidden;*/
    /*z-index: 100;*/

    /*&:hover {
        opacity: 0.5;
    }*/
}

#app {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    padding-bottom: 4vmin;
    height: 90vh;
    width: 100%;
    /*background: #ede8e2;*/
    color: white;
}

body {
    display: grid;
    padding: 3vmin;
    background: #106EBE;
}

/*@import url("https://fonts.googleapis.com/css2?family=Prata&display=swap");*/

.title {
    /*padding-left: 1em;*/
    grid-column: 1 / -1;
    grid-row: 1;
    font-family: Arial, Helvetica, sans-serif, serif;
    /*font-size: 8vw;*/
    width: 100%;
    height: 100%;
    z-index: 2;
    /*start > .title-inner*/

{
    display: inline-block;
}

}

@keyframes text-clip {
    from {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
    }

    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes outer-left {
    from {
        /*transform: translateX(50%),translateY(50%);*/
        transform: translate(50%,25%);
        font-size: 8vw;
    }

    to {
        transform: none;
        font-size: 4vw;
    }
}

@keyframes inner-left {
    from {
        /*transform: translateX(-50%),translateY(50%);*/
        transform: translate(-50%,0%);
    }

    to {
        transform: none;
    }
}

.cafe,
.mozart {
    animation: outer-left 1s 1s cubic-bezier(0.5, 0, 0.1, 1) both;
    /*outline: 1px solid red;*/
}

/*// [class*='inner'] {
// outline: 1px solid blue;
//
}*/

.title-inner {
    display: inline-block;
    animation: inner-left 1s 1s ease both;
    height: 100%
}

.cafe-inner {
    display: inline-block;
    animation: inner-left 1s 1s ease both, text-clip 1s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
    /*height: 100%*/
}

.mozart-inner {
    animation: text-clip 1s 0s cubic-bezier(0.5, 0, 0.1, 1) both;
}

.title {
    animation: outer-left 1s 1s ease both;
}

.cafe {
    /*start > .cafe-inner*/

{
    display: inline-block;
}

}

.mozart {
    display: inline-block;
}

@keyframes image-in {
    from {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }

    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes text-fade-in {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.pageimage {
    display: block;
    width: 100%;
    height: auto;
    /*mask-image: linear-gradient(to left, rgba(0, 0, 0, 1.0) 50%, transparent 100%);*/
    mask-image: radial-gradient(ellipse closest-side at center, rgba(0, 0, 0, 1.0) 66%, transparent 100%);
}

.image {
    grid-row: 1;
    grid-column: 2;
    margin-left: -2rem;
    opacity: 0.7;
    animation: image-in 1s cubic-bezier(0.5, 0, 0.1, 1) 2s backwards;
    /*box-shadow: 25px 25px 50px 0 white inset; This wont work*/
}

.pagetext {
    /*display: flex;*/
    grid-row: 1;
    grid-column: 2;
    /*align-items: flex-end;*/
    /*justify-content: flex-end;*/
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    border-radius: 10px;
    font-size: 20px;
    width: fit-content;
    height: fit-content;
    padding: 10px 20px 5px 20px;
    box-shadow: 10px 10px #0000007f;
    animation: text-fade-in 5s;
}