.preview {
    width: 1100px;
    aspect-ratio: 16 / 9;
    font-family: 'Cooper Hewitt';
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 8px;
    position: relative;
    user-select: none;
    pointer-events: none;
    overflow: hidden;
    border-radius: 16px;
    border: solid 2px #999;
}

.preview-browserbar {
    height: 7%;
    width: 100%;
    background: #ddd;
    border-bottom: solid 2px #999;
    position: relative;
}

.preview-browserbar span {
    height: 1.5rem;
    aspect-ratio: 1 / 1;
    display: inline-block;
    border: solid 2px #666;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.preview-browserbar span:nth-of-type(1) {
    left: 2rem;
}

.preview-browserbar span:nth-of-type(2) {
    left: 4rem;
}

.preview-browserbar span:nth-of-type(3) {
    left: 6rem;
}

.preview-browsercontent {
    height: 93%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--blue);
    text-decoration: underline;
    background: #fff;
}

.preview-browsercontent span {
    margin-top: -2%;
}

.preview-external {
    width: 95%;
    height: 93%;
    position: absolute;
    top: 7%;
    right: -95%;
    animation: external 15s 4s infinite;
    border-left: solid 2px #999;
    /* box-shadow: rgba(0,0,0,.4) 0px 0px 4px 0px; */
}

.preview-external-topbar {
    background: var(--dark);
    height: 5%;
    color: #fff;
    font-size: 2rem;
    display: grid;
    align-items: center;
    justify-content: center;
    font-weight: normal;  
    grid-template-columns: 1fr 30fr 1fr;
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
    /* outline: solid 1px red; */
}

.preview-external-topbar span {
    /* outline: solid 1px red; */
    display: flex;
    justify-content: center;
    align-content: center;
}

.preview-external-content {
    background: var(--lightblue);
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    height: 95%;
}

.preview-pointer {
    position: absolute;
    width: 10%;
    aspect-ratio: 1;
    background: url(../images/pointer.png) no-repeat center center;
    background-size: cover;
    /* outline: solid 1px red; */
    display: block;
    /* left: -10%;
    top: 60%; */
    left: 0.4%;
    top: 58%;
    animation: pointer 15s 4s infinite;
    z-index: 2;
}

@keyframes pointer {
    0% {
        left: 0.4%;
        top: 58%;
    }

    10% {
        left: 50%;
        top: 48%;
        transform: scale(1);
    }

    11% {
        left: 50%;
        top: 48%;
        transform: scale(.6);
    }

    12% {
        transform: scale(1);
    }

    15%, 45% {
        left: 55%;
        top: 64%;
    }

    55% {
        left: 0.4%;
        top: 58%;
        transform: scale(1);
    }

    56% {
        left: 0.4%;
        top: 58%;
        transform: scale(.6);
    }

    57%, 100% {
        left: 0.4%;
        top: 58%;
        transform: scale(1);
    }
}

@keyframes external {
    0%, 12% {
        right: -95%;
    }

    16%, 57% {
        right: 0;
    }

    61% {
        right: -95%;
    }
}


@media (max-width: 800px) {
    .preview-browserbar span {
        display: none !important;
    }

    .preview-external-topbar {
        font-size: 6px !important;
        letter-spacing: 1px;
    }

    .preview-external-topbar span {
        display: none;
    }

    .preview-external-content {
        font-size: 4rem;
    }
}