:root {
  --primaryblue: #00a1ff;
  --secondaryblue: #b2e3ff;
  --lightblue: #e0f4ff;
  --transparentwhite: rgba(255,255,255,.8);
  --lime:  #daff36;
  --greydots: radial-gradient(#949494 1px, #ffffff 1px);
  --limedots: radial-gradient(  #daff36 1px, #ffffff 1px);
}

@font-face {
  font-family: "Comic Neue";
  src: url("fonts/ComicNeue-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "Rainy Hearts";
  src: url("fonts/rainyhearts.ttf") format("truetype");
}

@font-face {
  font-family: "Bad Comic";
  src: url("fonts/BadComic-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Fantastic Boogaloo";
  src: url("fonts/FantasticBoogaloo.ttf") format("truetype");
}

body {
  display:flex;
  flex-direction:column;
  /* gap:24px; */
  margin:0px;
  height:100vh;
  overscroll-behavior: none;
  overflow:hidden;
  font-family: Fantastic Boogaloo;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-color: #d7d7d7;
  background-image: var(--greydots);
  background-size: 4px 4px;

  font-size:16px;
}

button{
  cursor:pointer;
  font-family: Fantastic Boogaloo;
  transform: scale(1);
  transition: .1s transform ease;
  /* background: var(--lightblue); */
  background:white;
  background-image: var(--limedots);
  background-size: 4px 4px;
  padding:12px 20px;
  font-family:"Comic Neue";
  font-size:15px;


}
button.primary{
  background: rgb(218, 255, 54);
}
button:hover{
  /* transform: scale(1.1); */
}
button:active{
  transform: scale(.9);
}



header{
  /* background:yellow; */
  padding-left:20px;
  padding-right:20px;
  flex-basis:60px;
  flex-shrink:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
header h1 {
  font-size:20px;
}
header .buttons{
  gap:20px;
  align-items:center;
}
header .buttons button{
  padding:12px 20px;
  margin-left: 8px;
}
.headerWithClose{
  display:flex;
}
.headerWithClose h2 {
  flex-grow:1;
}
.headerWithClose button{
  position:relative;
  top:-8px;
  right:-8px;
  width:40px;
  height:40px;
  padding:0px;
  border:none;
  background:none;
  font-size:40px;

}
h2.header{
  margin-top: 8px;
}
#export{
  margin: 8px;
  width: 120px;
  height: 48px;

}
.editor {
  height:100%;
  display:flex;
  flex-direction:row;
  /* gap:16px; */
}



#leftPanel {
  flex-basis: 64px;
  flex-grow: 0;
  flex-shrink: 0;
  margin:20px;
  margin-right:0px;
  padding:0px;

  overflow:visible;
  display:flex;
  flex-direction: column;
  gap:20px;
}

#leftPanel button {
  width:54px;
  height:54px;
  background:none;
  padding:0px;

  /* background-size:cover;
  border:none;
  image-rendering: pixelated; */
}

button#open-image{
  /* background-image: url('img/image-icon.png'); */
}

button#add-text{
  /* background-image: url('img/text-icon.png'); */
}

button#undo{
  /* background-image: url('img/undo-icon.png'); */
}

input.pixel-corners-4, select.pixel-corners-4{
  width:100%;
  padding:8px;
  font-size:16px;
  font-family: "Comic Neue";
  height: 40px;
  box-sizing: border-box;

}
select.pixel-corners-4{
appearance:none;
background: white url(img/chevron-down-solid.svg) 94% / 6% no-repeat;
}


input[type='text']{
  /* font-size:16px; */
/* font-family: "Comic Neue"; */
/* padding:8px; */
}
input[type='color']{
 width:100%;
 /* width:48px; */
 height:40px;
 padding:2px;
}

.fullWidth{
  width:100%;
}

#imageLibraryPanel{
  padding:20px;
  flex-basis: 200px;
  flex-grow: 0;
  flex-shrink: 0;
  margin:20px 0px;
  margin-left:20px;
  background: var(--transparentwhite);
  border-radius:16px;
  display:none;
  flex-direction:column;
  height: calc(100vh - 139px);
}
#imageLibraryPanel.show{
  display:flex;
}

#settings {
  display:none;
}

.settingsGroup{
  display:none;
}
.settingsGroup.canvasSettings{
  display:block;
}
#rightPanelWrapper{
  margin:20px;
  margin-left:0px;
  flex-basis: 240px;
  flex-grow: 0;
  flex-shrink: 0;
      background: var(--transparentwhite)
}
#rightPanel {
  padding:20px;
  overflow:scroll;
  height: calc(100vh - 136px);
}

#iframeContainer{
  height: 100%;
  width: 100%;
}
.windowBar{
  padding: 10px 24px;
  display: flex;
  border-bottom: 1px solid black;
  background: rgba(255,255,255,.6);
}
#preview{

  border:0px;
  /* height:600px;
  width:800px; */
  height: calc(100% - 40px);
  width:100%;
  overscroll-behavior: contain;

}
#currentImgPreview{
  width:80px;
  height:auto;
  float:left;
  margin-right:16px;
}

#previewContainer{
  width:100%;
  display:flex;
  flex-direction:column;
  margin:20px;
  gap:20px;
}

.fullPreviewContainer{
  display:none;
  flex-grow: 1;
}
#fullPreview{
  border: none;
  height:100%;
  width:100%;
}
#image-upload{
  display:none;
}
#image-collection{
  display: grid;
  grid-template-columns: 100px 100px;
  grid-gap: 8px;
  grid-template-rows: 100px 100px;
  justify-items: center;
  align-items:center;
  min-height:200px;
  margin-top:24px;
  overflow: scroll;
}
#image-collection img{
  /* width:100%;
  height:100%;
  max-width:100%;
  max-height:100%; */
  background:grey;
}
.imageLibraryPreview{

  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  -ms-user-drag: none;
  user-drag: none;
}



#draggedImage{
  position:fixed;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  -ms-user-drag: none;
  user-drag: none;
  max-width:300px;
}

iframe{
  background-color:white;

}

iframe.inactive{
  pointer-events:none;
}

#timelineContainer{
  display: flex;
  border: 1px solid black;
  height: 30px;
  margin: 16px 0px;
}

#timelineSlider{
  width:2px;
  height:100%;
  background-color: red;
  position:relative;
}



.timelineSection{
  display:flex;
  gap:8px;

}
.timelineButtons{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#frame-add, #frame-subtract{
  width:40px;
  height:100%;
  padding:0px;
}

#scenePreviewContainer {
  height: 76px;
  overflow: scroll;
  overflow-y: hidden;
  width: calc(100vw - 436px)
  /* position:relative; */

}

.contextMenu{
  border:2px solid black;

  display:none;
  z-index:1;
  flex-direction:column;
  width:140px;
}

.contextMenuSceneEl{
  position:fixed !important;
}
.contextMenu.fontMenu{
  position: absolute;
  top: 66px;
  width: calc( 100% - 4px);
}
.fontMenu .optionsWrapper{
  max-height: 300px;
  overflow:scroll;
}

.contextMenu button{
  padding:8px 16px;
  border:none;
  text-align:left;
  width:100%;

}
.contextMenu button:hover{
  background: var(--lime);

}
.contextMenu button:active{
  transform:none;
}

.timeline{
  position:relative;
}
.timeline-gradient-l, .timeline-gradient-r{
  content: ' ';
  width: 16px;
  height: 88px;
  position: absolute;
  display: block;
  z-index: 1;
  opacity:0;
  pointer-events:none;
}

.timeline-gradient-l{

  background: white;
  background: -moz-linear-gradient(90deg, white 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(90deg, white 0%, rgba(255,255,255,0) 100%);
  background: linear-gradient(90deg, white 0%, rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1); */
  pointer-events:none;
}
.timeline-gradient-r{
  top:0px;
  right:0px;
  background:yellow;
  opacity:0;
  background: white;
background: -moz-linear-gradient(-90deg, white 0%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(-90deg, white 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(-90deg, white 0%, rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);
}

.timeline-gradient-l.show, .timeline-gradient-r.show{
  opacity:1;
}

#scenePreviewContainer.libraryPanelOpen {
  width: calc(100vw - 714px);
}


#sceneWrapperContainer{
  /* display:flex;
  flex-direction:row; */
  width:max-content;
}

.sceneWrapper{
  display:inline-block;
  width:80px;
  height:76px;
  border:2px solid rgba(0, 0, 0, 0.148);
  box-sizing:border-box;
  margin-right:4px;
  cursor:pointer;
}
.sceneWrapper .frameNum{
  /* background: #f5f5f5; */
  width: 100%;
  text-align: center;
  padding: 4px 0px;
  font-size: 14px;
  border-bottom: 1px solid black;
  background: var(--transparentwhite);
  font-family: "Comic Neue";
}
.sceneWrapper.selected{

  border:2px solid blue;
}
.sceneContainer {
  background:white;
  z-index:-1;
  pointer-events:none;
  width: 1000px;
  height: 625px;
  transform: scale(.08);
  transform-origin:top left;
  position:relative;
  /* border:2px solid black; */
  overflow:hidden;
  box-sizing:border-box;
  pointer-events:none !important;

  /* margin-right: -643px; */
}

.sceneEl {

  position:absolute;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  -ms-user-drag: none;
  user-drag: none;

  opacity:0;
  display: none;
  transition: none;
  position:absolute;
  top:0px;
  left:0px;
  box-sizing: border-box;
  pointer-events:none !important;


  /* transform: scale(.2); */

}
pre.sceneEl{
  font-size:24px;
  margin:0px;
  display:inline-block;
  white-space: pre-wrap;
  tab-size:4;
}
pre.sceneEl * {
  pointer-events: none;
}

img.sceneEl {
  position:absolute;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  -ms-user-drag: none;
  user-drag: none;

  image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  image-rendering: -moz-crisp-edges;          /* Firefox                        */
  image-rendering: -o-crisp-edges;            /* Opera                          */
  image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  image-rendering: pixelated;                 /* Universal support since 2021   */
  image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
  -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}
img.sceneEl.maxWidth{
  max-width: calc(100vw - 40px);
}
pre.sceneEl.maxWidth{
  max-width: 400px;
}

.sceneEl.display{
  display:inline-block;
}

.sceneEl.visible{
  opacity:1;
  transition:  opacity .4s ease-in 0s, background .2s;
  pointer-events:all;
}



.settingSection {
  display:block;
  margin:16px 0px;
  position:relative;

}
.settingSection.columns-2{
  display:flex;
  gap:16px;
}
.settingSection.columns-2 *{
 flex-grow:1;
}
label{
  display:block;
  font-weight:bold;
  font-family: "Comic Neue";
  margin-bottom:8px;
  font-size:14px;
  /* opacity: .5; */
  font-weight:normal;
}






.pixel-corners-12,
.pixel-corners--wrapper-12 {
  clip-path: polygon(0px calc(100% - 18px),
    2px calc(100% - 18px),
    2px calc(100% - 16px),
    2px calc(100% - 12px),
    4px calc(100% - 12px),
    4px calc(100% - 10px),
    6px calc(100% - 10px),
    6px calc(100% - 8px),
    8px calc(100% - 6px),
    10px calc(100% - 6px),
    10px calc(100% - 4px),
    12px calc(100% - 4px),
    12px calc(100% - 2px),
    16px calc(100% - 2px),
    18px calc(100% - 2px),
    18px 100%,
    calc(100% - 18px) 100%,
    calc(100% - 18px) calc(100% - 2px),
    calc(100% - 16px) calc(100% - 2px),
    calc(100% - 12px) calc(100% - 2px),
    calc(100% - 12px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 6px),
    calc(100% - 8px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 8px),
    calc(100% - 6px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 12px),
    calc(100% - 2px) calc(100% - 12px),
    calc(100% - 2px) calc(100% - 16px),
    calc(100% - 2px) calc(100% - 18px),
    100% calc(100% - 18px),
    100% 18px,
    calc(100% - 2px) 18px,
    calc(100% - 2px) 16px,
    calc(100% - 2px) 12px,
    calc(100% - 4px) 12px,
    calc(100% - 4px) 10px,
    calc(100% - 6px) 10px,
    calc(100% - 6px) 8px,
    calc(100% - 8px) 6px,
    calc(100% - 10px) 6px,
    calc(100% - 10px) 4px,
    calc(100% - 12px) 4px,
    calc(100% - 12px) 2px,
    calc(100% - 16px) 2px,
    calc(100% - 18px) 2px,
    calc(100% - 18px) 0px,
    18px 0px,
    18px 2px,
    16px 2px,
    12px 2px,
    12px 4px,
    10px 4px,
    10px 6px,
    8px 6px,
    6px 8px,
    6px 10px,
    4px 10px,
    4px 12px,
    2px 12px,
    2px 16px,
    2px 18px,
    0px 18px);
  position: relative;
}
.pixel-corners-12 {
  border: 2px solid transparent;
}
.pixel-corners--wrapper-12 {
  width: fit-content;
  height: fit-content;
}
.pixel-corners--wrapper-12 .pixel-corners-12 {
  display: block;
  clip-path: polygon(2px 18px,
    4px 18px,
    4px 16px,
    4px 12px,
    6px 12px,
    6px 10px,
    8px 10px,
    8px 8px,
    10px 8px,
    10px 6px,
    12px 6px,
    12px 4px,
    16px 4px,
    18px 4px,
    18px 2px,
    calc(100% - 18px) 2px,
    calc(100% - 18px) 4px,
    calc(100% - 16px) 4px,
    calc(100% - 12px) 4px,
    calc(100% - 12px) 6px,
    calc(100% - 10px) 6px,
    calc(100% - 10px) 8px,
    calc(100% - 8px) 8px,
    calc(100% - 8px) 10px,
    calc(100% - 6px) 10px,
    calc(100% - 6px) 12px,
    calc(100% - 4px) 12px,
    calc(100% - 4px) 16px,
    calc(100% - 4px) 18px,
    calc(100% - 2px) 18px,
    calc(100% - 2px) calc(100% - 18px),
    calc(100% - 4px) calc(100% - 18px),
    calc(100% - 4px) calc(100% - 16px),
    calc(100% - 4px) calc(100% - 12px),
    calc(100% - 6px) calc(100% - 12px),
    calc(100% - 6px) calc(100% - 10px),
    calc(100% - 8px) calc(100% - 10px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 10px) calc(100% - 8px),
    calc(100% - 10px) calc(100% - 6px),
    calc(100% - 12px) calc(100% - 6px),
    calc(100% - 12px) calc(100% - 4px),
    calc(100% - 16px) calc(100% - 4px),
    calc(100% - 18px) calc(100% - 4px),
    calc(100% - 18px) calc(100% - 2px),
    18px calc(100% - 2px),
    18px calc(100% - 4px),
    16px calc(100% - 4px),
    12px calc(100% - 4px),
    12px calc(100% - 6px),
    10px calc(100% - 6px),
    10px calc(100% - 8px),
    8px calc(100% - 8px),
    8px calc(100% - 10px),
    6px calc(100% - 10px),
    6px calc(100% - 12px),
    4px calc(100% - 12px),
    4px calc(100% - 16px),
    4px calc(100% - 18px),
    2px calc(100% - 18px));
}
.pixel-corners-12::after,
.pixel-corners--wrapper-12::after {
  content: "";
  position: absolute;
  clip-path: polygon(0px calc(100% - 18px),
    2px calc(100% - 18px),
    2px calc(100% - 16px),
    2px calc(100% - 12px),
    4px calc(100% - 12px),
    4px calc(100% - 10px),
    6px calc(100% - 10px),
    6px calc(100% - 8px),
    8px calc(100% - 6px),
    10px calc(100% - 6px),
    10px calc(100% - 4px),
    12px calc(100% - 4px),
    12px calc(100% - 2px),
    16px calc(100% - 2px),
    18px calc(100% - 2px),
    18px 100%,
    calc(100% - 18px) 100%,
    calc(100% - 18px) calc(100% - 2px),
    calc(100% - 16px) calc(100% - 2px),
    calc(100% - 12px) calc(100% - 2px),
    calc(100% - 12px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 4px),
    calc(100% - 10px) calc(100% - 6px),
    calc(100% - 8px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 8px),
    calc(100% - 6px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 10px),
    calc(100% - 4px) calc(100% - 12px),
    calc(100% - 2px) calc(100% - 12px),
    calc(100% - 2px) calc(100% - 16px),
    calc(100% - 2px) calc(100% - 18px),
    100% calc(100% - 18px),
    100% 18px,
    calc(100% - 2px) 18px,
    calc(100% - 2px) 16px,
    calc(100% - 2px) 12px,
    calc(100% - 4px) 12px,
    calc(100% - 4px) 10px,
    calc(100% - 6px) 10px,
    calc(100% - 6px) 8px,
    calc(100% - 8px) 6px,
    calc(100% - 10px) 6px,
    calc(100% - 10px) 4px,
    calc(100% - 12px) 4px,
    calc(100% - 12px) 2px,
    calc(100% - 16px) 2px,
    calc(100% - 18px) 2px,
    calc(100% - 18px) 0px,
    18px 0px,
    18px 2px,
    16px 2px,
    12px 2px,
    12px 4px,
    10px 4px,
    10px 6px,
    8px 6px,
    6px 8px,
    6px 10px,
    4px 10px,
    4px 12px,
    2px 12px,
    2px 16px,
    2px 18px,
    0px 18px,
    0px 50%,
    2px 50%,
    2px 18px,
    4px 18px,
    4px 16px,
    4px 12px,
    6px 12px,
    6px 10px,
    8px 10px,
    8px 8px,
    10px 8px,
    10px 6px,
    12px 6px,
    12px 4px,
    16px 4px,
    18px 4px,
    18px 2px,
    calc(100% - 18px) 2px,
    calc(100% - 18px) 4px,
    calc(100% - 16px) 4px,
    calc(100% - 12px) 4px,
    calc(100% - 12px) 6px,
    calc(100% - 10px) 6px,
    calc(100% - 10px) 8px,
    calc(100% - 8px) 8px,
    calc(100% - 8px) 10px,
    calc(100% - 6px) 10px,
    calc(100% - 6px) 12px,
    calc(100% - 4px) 12px,
    calc(100% - 4px) 16px,
    calc(100% - 4px) 18px,
    calc(100% - 2px) 18px,
    calc(100% - 2px) calc(100% - 18px),
    calc(100% - 4px) calc(100% - 18px),
    calc(100% - 4px) calc(100% - 16px),
    calc(100% - 4px) calc(100% - 12px),
    calc(100% - 6px) calc(100% - 12px),
    calc(100% - 6px) calc(100% - 10px),
    calc(100% - 8px) calc(100% - 10px),
    calc(100% - 8px) calc(100% - 8px),
    calc(100% - 10px) calc(100% - 8px),
    calc(100% - 10px) calc(100% - 6px),
    calc(100% - 12px) calc(100% - 6px),
    calc(100% - 12px) calc(100% - 4px),
    calc(100% - 16px) calc(100% - 4px),
    calc(100% - 18px) calc(100% - 4px),
    calc(100% - 18px) calc(100% - 2px),
    18px calc(100% - 2px),
    18px calc(100% - 4px),
    16px calc(100% - 4px),
    12px calc(100% - 4px),
    12px calc(100% - 6px),
    10px calc(100% - 6px),
    10px calc(100% - 8px),
    8px calc(100% - 8px),
    8px calc(100% - 10px),
    6px calc(100% - 10px),
    6px calc(100% - 12px),
    4px calc(100% - 12px),
    4px calc(100% - 16px),
    4px calc(100% - 18px),
    2px calc(100% - 18px),
    2px 50%,
    0px 50%);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  display: block;
  pointer-events: none;
}
.pixel-corners-12::after {
  margin: -2px;
}


.pixel-corners-4,
.pixel-corners--wrapper-4 {
  clip-path: polygon(0px calc(100% - 4px),
    2px calc(100% - 4px),
    2px calc(100% - 2px),
    4px calc(100% - 2px),
    4px 100%,
    calc(100% - 4px) 100%,
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 4px),
    100% calc(100% - 4px),
    100% 4px,
    calc(100% - 2px) 4px,
    calc(100% - 2px) 2px,
    calc(100% - 4px) 2px,
    calc(100% - 4px) 0px,
    4px 0px,
    4px 2px,
    2px 2px,
    2px 4px,
    0px 4px);
  position: relative;
}
.pixel-corners-4 {
  border: 2px solid transparent;
}
.pixel-corners--wrapper-4 {
  /* width: fit-content;
  height: fit-content; */
}
.pixel-corners--wrapper-4 .pixel-corners-4 {
  display: block;
  clip-path: polygon(2px 4px,
    4px 4px,
    4px 2px,
    calc(100% - 4px) 2px,
    calc(100% - 4px) 4px,
    calc(100% - 2px) 4px,
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 2px),
    4px calc(100% - 2px),
    4px calc(100% - 4px),
    2px calc(100% - 4px));
}
.pixel-corners-4::after,
.pixel-corners--wrapper-4::after {
  content: "";
  position: absolute;
  clip-path: polygon(0px calc(100% - 4px),
    2px calc(100% - 4px),
    2px calc(100% - 2px),
    4px calc(100% - 2px),
    4px 100%,
    calc(100% - 4px) 100%,
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 4px),
    100% calc(100% - 4px),
    100% 4px,
    calc(100% - 2px) 4px,
    calc(100% - 2px) 2px,
    calc(100% - 4px) 2px,
    calc(100% - 4px) 0px,
    4px 0px,
    4px 2px,
    2px 2px,
    2px 4px,
    0px 4px,
    0px 50%,
    2px 50%,
    2px 4px,
    4px 4px,
    4px 2px,
    calc(100% - 4px) 2px,
    calc(100% - 4px) 4px,
    calc(100% - 2px) 4px,
    calc(100% - 2px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) calc(100% - 2px),
    4px calc(100% - 2px),
    4px calc(100% - 4px),
    2px calc(100% - 4px),
    2px 50%,
    0px 50%);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000;
  display: block;
  pointer-events: none;
}
.pixel-corners-4::after {
  margin: -2px;
}




.pixel-corners-4-selected ,
.pixel-corners--wrapper-4-selected {
  clip-path: polygon(0px calc(100% - 4px),
    2px calc(100% - 4px),
    2px calc(100% - 2px),
    4px calc(100% - 2px),
    4px 100%,
    calc(100% - 4px) 100%,
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 4px),
    100% calc(100% - 4px),
    100% 4px,
    calc(100% - 2px) 4px,
    calc(100% - 2px) 2px,
    calc(100% - 4px) 2px,
    calc(100% - 4px) 0px,
    4px 0px,
    4px 2px,
    2px 2px,
    2px 4px,
    0px 4px);
  position: relative;
}
.pixel-corners-4-selected {
  border: 4px solid transparent;
}
.pixel-corners--wrapper-4-selected {
  width: fit-content;
  height: fit-content;
}
.pixel-corners--wrapper-4-selected .pixel-corners-4-selected {
  display: block;
  clip-path: polygon(4px 6px,
    6px 6px,
    6px 4px,
    calc(100% - 6px) 4px,
    calc(100% - 6px) 6px,
    calc(100% - 4px) 6px,
    calc(100% - 4px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px),
    6px calc(100% - 4px),
    6px calc(100% - 6px),
    4px calc(100% - 6px));
}
.pixel-corners-4-selected::after,
.pixel-corners--wrapper-4-selected::after {
  content: "";
  position: absolute;
  clip-path: polygon(0px calc(100% - 4px),
    2px calc(100% - 4px),
    2px calc(100% - 2px),
    4px calc(100% - 2px),
    4px 100%,
    calc(100% - 4px) 100%,
    calc(100% - 4px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) calc(100% - 4px),
    100% calc(100% - 4px),
    100% 4px,
    calc(100% - 2px) 4px,
    calc(100% - 2px) 2px,
    calc(100% - 4px) 2px,
    calc(100% - 4px) 0px,
    4px 0px,
    4px 2px,
    2px 2px,
    2px 4px,
    0px 4px,
    0px 50%,
    4px 50%,
    4px 6px,
    6px 6px,
    6px 4px,
    calc(100% - 6px) 4px,
    calc(100% - 6px) 6px,
    calc(100% - 4px) 6px,
    calc(100% - 4px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 6px),
    calc(100% - 6px) calc(100% - 4px),
    6px calc(100% - 4px),
    6px calc(100% - 6px),
    4px calc(100% - 6px),
    4px 50%,
    0px 50%);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ff0095;
  display: block;
  pointer-events: none;
}
.pixel-corners-4-selected::after {
  margin: -4px;
}