body {
    padding: 20px;
}

h3 {
    margin: 5px 0;
}

.container {
    --container-width: 800px;
    --container-height: 600px;

    position: relative;
    width: var(--container-width);
    height: var(--container-height);
    margin: 50px auto;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
}

.container::before {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "container";
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.target {
    --target-width: 120px;
    --target-height: 30px;

    position: absolute;
    top: 10px;
    left: 10px;
    width: var(--target-width);
    height: var(--target-height);
    box-sizing: border-box;
    color: #fff;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    border-radius: 3px;
    background-color: green;
    cursor: move;
    user-select: none;
}

.virtual-target {
    position: absolute;
    border: 1px dashed red;
    pointer-events: none;
}

.popover {
    --popover-color: #000;
    --popover-width: 300px;
    --popover-height: 200px;

    position: absolute;
    width: var(--popover-width);
    height: var(--popover-height);
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    color: var(--popover-color);
    border: none;
    filter: drop-shadow(1px 2px 2px rgb(0 0 0 / 20%));
    overflow: hidden;
}

.popover-content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #f2f2f2;
    overflow: auto;
}

.fps-detector {
    position: fixed;
    top: 10px;
    right: 10px;
}