@keyframes moveCursor {
    0% {}

    100% {}
}

#actualCursorPositionMark{
    display: none;
    position: fixed;
}
#actualCursorPositionMark:after{
    display: block;
    content: "";
    margin-top: -26px;
    width: 1px;
    height: 50px;
    background-color: red;
}
#actualCursorPositionMark:before{
    display: block;
    content: "";
    margin-left: -25px;
    width: 50px;
    height: 1px;
    background-color: red;
}
html,
body {
    padding: 0;
    margin: 0;
}

img {
    position: absolute;
    z-index: 1000;
}

* {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
}

.flex {
    display: flex;
}

.flex--0 {
    flex: 0;
}

.absolute {
    position: absolute;
}

.absolute-stretch {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

}

.stretch {
    height: 100%;
    width: 100%;
}

.major {
    display: flex;
    flex: 1;
}

.centerize {
    align-items: center;
    justify-content: center;
}

.grid {
    display: grid;
    grid-gap: 60px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.box {
    border: 2px solid red;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box:hover {
    /* cursor: pointer; */
    background-color: red;
    color: white;
}

.box:hover:active {
    background-color: rgb(150, 0, 0);
    color: white;
}

.pointer-events--none {
    pointer-events: none
}

.z-index--100000 {
    z-index: 100000;
}

.z-index--10000 {
    z-index: 10000;
}

.z-index--1000 {
    z-index: 1000;
}

.z-index--10 {
    z-index: 10;
}



body {
    text-align: center;
}

.rotating-md {
    animation: loading-spinner 1s linear infinite;
}

@keyframes loading-spinner {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#giffrFrame {
    border: none;
    pointer-events: none;
}

#timer {
    position: absolute;
    z-index: 1000000;
    right: 0;
    display: none;
    padding: 10px;
    background-color: rgba(0, 0, 0, .8);
    color: white;
    width: 250px;
}

@keyframes example {
    from {
        width: 50px;
        height: 50px;
    }

    to {
        width: 50px;
        height: 50px;
    }
}

.poiterClickMark {
    --step-duration: 100ms;
    --lightShadowColor: rgba(255, 255, 255, 1);
    --darkShadowColor: rgba(0, 0, 0, 1);
    /* border: 3px solid black; */
    border-radius: 100em;
    align-items: center;
    justify-content: center;
    display: none;
    z-index: 1000;
    position: absolute;
    pointer-events: none;
    width: 40px;
    height: 40px;
}

button {
    cursor: pointer;
}

.poiterClickMark:after {
    content: "";
    display: block;
    z-index: 1000;
    box-shadow: 0 0 0 4px var(--lightShadowColor), inset 0 0 0 6px var(--darkShadowColor);
    border-radius: 100em;
    position: absolute;
    pointer-events: none;
    animation-name: example;
    animation-duration: var(--step-duration);
}

.pointer-events--none {
    pointer-events: none
}

.z-index--10000 {
    z-index: 10000;
}

.z-index--1000 {
    z-index: 1000;
}

.z-index--10 {
    z-index: 10;
}


.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

#giffr-canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

#cursor {
    display: block;
    width: 0;
    height: 0;
    --duration: 0s;
    --delay: 0s;
    transition-duration: var(--duration);
    transition-delay: var(--delay);
    transition-timing-function: linear;
    /* --delay: .2s; */
    /* transition-delay: var(--delay); */
    /* margin-top: -16px;
    margin-left: -32px; */
}

#cursorItem {
    width: 64px;
    height: 64px;
    background-size: 64px 64px;
    position: absolute;
    transform: scale(.5);
}

#cursor__svg {
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/* #alias, */
#all-scroll,
#auto,
#cell,
#context-menu,
/* #col-resize, */
#copy,
/* #crosshair, */
#default,
#e-resize,
#ew-resize,
#grab,
#grabbing,
#help,
#move,
#n-resize,
#ne-resize,
#nesw-resize,
#ns-resize,
#nw-resize,
#nwse-resize,
#no-drop,
#none,
#not-allowed,
#pointer,
#progress,
/* #row-resize, */
#s-resize,
#se-resize,
#sw-resize,
/* #text, */
#url,
#w-resize,
#wait
/* #zoom-in,
#zoom-out */
{
    fill: var(--color-mark);
    stroke: var(--color-stroke)
    /* fill: white;
    stroke-width: 1px;
    stroke: black; */
}
#subtitle-wrapper{
    display: none;
    /* flex-direction: column; */
    justify-content: center;
}
#subtitle{
    background-color: rgba(0,0,0,0.8);
    color: white;
    padding: 1em;
    border-radius: .25em;
    font-size:16px;
    font-weight: bold;
    max-width: 300px;
    position: absolute;
    bottom: 100px;
}

#wait-group{
  animation: rotating 1s linear infinite;
  transform-origin: 16px;
  }
#zoom__inner{
    fill: var(--color-content);
}
#wait__small{fill:#25CCFF}
#wait__big{fill: #2A97F3;}

#not-allowed #icon,
#no-drop #icon{
        fill:red;
    }
:root{
    --color-stroke: black;
    --color-mark: white;
    --color-content: white;
}
/* #zoom-in,
#zoom-out, */
#not-allowed,
#no-drop{
    fill: var(--color-content);
}

#wait__small,
#wait__big,
#not-allowed,
#no-drop {
    stroke: none;
}

.cursor--alias {cursor: alias;}
.cursor--all-scroll {cursor: all-scroll;}
.cursor--auto {cursor: auto;}
.cursor--cell {cursor: cell;}
.cursor--context-menu {cursor: context-menu;}
.cursor--col-resize {cursor: col-resize;}
.cursor--copy {cursor: copy;}
.cursor--crosshair {cursor: crosshair;}
.cursor--default {cursor: default;}
.cursor--e-resize {cursor: e-resize;}
.cursor--ew-resize {cursor: ew-resize;}
.cursor--grab {cursor: grab;}
.cursor--grabbing {cursor: grabbing;}
.cursor--help {cursor: help;}
.cursor--move {cursor: move;}
.cursor--n-resize {cursor: n-resize;}
.cursor--ne-resize {cursor: ne-resize;}
.cursor--nesw-resize {cursor: nesw-resize;}
.cursor--ns-resize {cursor: ns-resize;}
.cursor--nw-resize {cursor: nw-resize;}
.cursor--nwse-resize {cursor: nwse-resize;}
.cursor--no-drop {cursor: no-drop;}
.cursor--none {cursor: none;}
.cursor--not-allowed {cursor: not-allowed;}
.cursor--pointer {cursor: pointer;}
.cursor--progress {cursor: progress;}
.cursor--row-resize {cursor: row-resize;}
.cursor--s-resize {cursor: s-resize;}
.cursor--se-resize {cursor: se-resize;}
.cursor--sw-resize {cursor: sw-resize;}
.cursor--text {cursor: text;}
.cursor--url {cursor: auto;}
.cursor--w-resize {cursor: w-resize;}
.cursor--wait {cursor: wait;}
.cursor--zoom-in {cursor: zoom-in;}
.cursor--zoom-out {cursor: zoom-out;}

#cursor__svg.auto,
#cursor__svg.default
{
    margin-top: -4px;
    margin-left: -8px;
}
#cursor__svg.pointer{
    margin-top: -4px;
}
.cursors-gallery{
    display: grid;
    grid-template-columns: auto auto auto;
  grid-gap: 10px;
}