html,
body {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 overflow: hidden;
}

.container {
 position: relative;
 width: 90vw;
 height: 90vh;
 max-width: 700px;
 max-height: 700px;
 border-radius: 9px;
/* border: solid 2px red; */
}

#element {
 background: var(--color-ui-gradient-background);
 border-radius: 15px;
 width: 100px;
 height: 100px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--color-just-black);
 border: solid 2px transparent;
}

#element.absolute,
#absolute-marker {
 position: absolute;
 bottom: 30px;
 right: 30px;
}

#absolute-marker {
 width: 100px;
 height: 100px;
 bottom: 30px;
 right: 30px;
 border-radius: 10px;
 outline: dashed 2px var(--color-surface-white);
 z-index: -1;
 outline-offset: 0.5rem;
}

button {
 position: absolute;
 top: 1rem;
 left: 50%;
 transform: translateX(-50%);
}