@font-face {
  font-family: 'JosefinSans';
  weight: 100;
  src: url('./JosefinSans-ExtraLight.ttf');
}
body {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
  overscroll-behavior: contain;
  //background: linear-gradient(0deg, #353535 1.75%, #595959 93.95%);
  background-color: #27282c;
  background-repeat: no-repeat;
  background-size:cover;
  background-attachment:fixed;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
}
img{
  image-rendering: pixelated;
}
iframe{
  border: none;
}
.class_photo_info {
  font-family: 'JosefinSans';
  text-align: center;
  font-size: .4rem;
  width: 100%;
  position: relative;
  top: 0;
  display: flex;
  justify-content: center;
  align-content: center;
}
.class_photo_info.scaled{
  width: 100vw;
  height: 10vh;
  color: whitesmoke;
  background-color: black;
  /* padding: 0 0 100vh 0; */
  z-index: 1000;
  font-size: 1rem;
  display: flex;
  margin: 0;
  position: fixed;
  top: 105vw;
  left: 0;
  //transition: all .1s ease-out;
}
.class_colorizer{
  z-index: 10;
  width: 100vw;
  height: 100vh;
  position:absolute;
  top: 0;
  left: 0;
  background: #ffc107;
  mix-blend-mode: soft-light;
}
canvas{
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.class_app{
  display: grid;
  aspect-ratio: .5;
  max-width: 100vw;
  max-height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-content: stretch;
  //background: linear-gradient(180deg, #353535 1.75%, #595959 93.95%);
  //border-radius: 2vw;
  //padding: 2vw;
  border-radius: 50px;
  background: linear-gradient(1deg, #5c5c5c87, #00000000);
  box-shadow: -3px 20px 20px 10px #4c4c4c, inset 0px -15px 0px 0px #666666;
  z-index: 1;
  outline: 1px solid black;
}
.class_display{
  background-color: #27282c;
  border-bottom-right-radius: 5%;
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  outline: 1px solid #00000020;
  background: #27282c;
  box-shadow: inset 6px -8px 0px 0px #212225, -3px 14px 16px 0px #2d2e33;
  z-index: 100;
}
#id_input_zoom{
  display: none;
  position: absolute;
  width: 100%;
  height: 5%;
  top: 0;
  left: 0;
  z-index: 1000;
}
#id_wheel{
  --b: 7%;
  --c: #d4aa70;
  position: absolute;
  bottom: 25%;
  right: 0;
  width: 50%;
  aspect-ratio: 1;
  background: linear-gradient(315deg, #444444, #515151);
  box-shadow: 0px 0px 0px 4px #4c4c4c, inset 0px 0px 0px 11px #666666;
  border-radius: 50%;
  margin-top: 10%;
  display: inline-grid;
  place-content: center;
  translate: -25%;
  transition: translate 1s ease-out;
}
#id_wheel:before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(farthest-side,#d4aa70 98%,#0000) top/7% 7% no-repeat;
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - 7%),#000 calc(100% - 7%));
}

#id_canvas_camera_pxl, #id_canvas_editor_pxl, #id_canvas_camera_pxl_overlay{
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  margin: 10%;
}
#id_canvas_camera_pxl, #id_canvas_editor_pxl{
  padding: 5%;
  margin: 10%;
  border-right: 1px solid #5e5e60;
  border-bottom: 1px solid #5e5e60;
  border-radius: 2%;
}
#id_canvas_camera_pxl{
  z-index: 100;
  //transform: scale(-1,1);
  background-color: black;
}
#id_canvas_editor_pxl{
  z-index: 101;
  //outline: 1px solid red;
  pointer-events:auto;
}
#id_canvas_camera_pxl_overlay{
  //background-color: #ffa50047;
  margin: 15%;
  z-index: 200;
  pointer-events: none;
}
#id_canvas_camera_pxl_overlay::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
.class_control{
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.top{
  width: 100%;
  height: 35%;
  display: flex;
  align-items: center;
}
.middle{
  width: 100%;
  height: 50%;
  display: flex;
}
.bottom{
  width: 100%;
  height: 15%;
}
.buttons{
  background-color: brown;
  width: 100%;
  height: 100%;
}
.dpad{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, auto);
  border-radius: 50%;
  background: linear-gradient(315deg, #444444, #515151);
  //box-shadow: inset -20px -20px 20px #414141, inset 20px 20px 60px #575757;
  box-shadow: inset -4px 3px 20px 0px #4c4c4c, 0px 7px 0px 0px #666666;
}
.dpad_cell{
  font-size: 1em;
  color: ghostwhite;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #242424;
  justify-content: center;
  align-items: center;
}
.dpad_cell:nth-child(1), .dpad_cell:nth-child(3), .dpad_cell:nth-child(7), .dpad_cell:nth-child(9){
  background-color: unset;
  border: none;
}
.dpad_cell:nth-child(2){
  border-top-left-radius: 20%;
  border-top-right-radius: 20%;
}
.dpad_cell:nth-child(4){
  border-top-left-radius: 20%;
  border-bottom-left-radius: 20%;
}
.dpad_cell:nth-child(6){
  border-top-right-radius: 20%;
  border-bottom-right-radius: 20%;
}
.dpad_cell:nth-child(8){
  border-bottom-left-radius: 20%;
  border-bottom-right-radius: 20%;
}
@keyframes animation_press_right {
  0%   {transform: rotate3d(0);}
  25%  {transform: rotate3d(0, 1, 0, 15deg);}
  75%  {transform: rotate3d(0, 1, 0, 15deg);}
  100% {transform: rotate3d(0);}
}
@keyframes animation_press_left {
  0%   {transform: rotate3d(0);}
  25%  {transform: rotate3d(0, -1, 0, 15deg);}
  75%  {transform: rotate3d(0, -1, 0, 15deg);}
  100% {transform: rotate3d(0);}
}
@keyframes animation_press_up {
  0%   {transform: rotate3d(0);}
  25%  {transform: rotate3d(1, 0, 0, 15deg);}
  75%  {transform: rotate3d(1, 0, 0, 15deg);}
  100% {transform: rotate3d(0);}
}
@keyframes animation_press_down {
  0%   {transform: rotate3d(0);}
  25%  {transform: rotate3d(-1, 0, 0, 15deg);}
  75%  {transform: rotate3d(-1, 0, 0, 15deg);}
  100% {transform: rotate3d(0);}
}
.class_buttons{
  width: 100%;
  height: 100%;
  //display: flex;
  //flex-direction: row;
  //flex-wrap: wrap;
  //justify-content: space-evenly;
  //align-items: center;
}
.class_button{
  font-size: 2em;
  color: ghostwhite;
  width: 100%;
  height: 100%;
  border: 2px solid #2424243d;
  background-color: #242424;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  background: #242424;
  //box-shadow: inset 20px 20px 60px #1f1f1f, inset -20px -20px 5px 20px #292929;
  box-shadow: inset -4px 3px 20px 0px #4c4c4c, inset 4px -4px 0px 0px #666666;
  align-items: center;
}
#id_wrapper_buttons_editor, #id_wrapper_buttons_camera{
  position: abolute;
  height: 100%;
  width: 100%;
}
#id_wrapper_buttons_editor{
  grid-template-columns: repeat(2, auto);
}
#id_button_editor_add, #id_button_editor_erase{
  transform: scale(.8);
}
#id_button_editor_save{
  transform: translateX(50%);
}
#id_button_camera{
  transform: scale(.8);
}
#id_button_printer, #id_button_gallery, #id_button_editor{
  padding: 3%;
  width: 3vh;
  height: 3vh;
}
.overlay {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 100%;
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
  opacity: 0;
  transition: all .25s;
  font-size: 4vw;
  /* padding: 5%; */
  display: grid;
  flex-direction: column;
  grid-template-columns: repeat(1, auto);
  justify-items: center;
  z-index: 200;
  word-wrap: break-word;
  box-shadow: rgb(96 96 96 / 20%) 5px 5px;
}
.overlay.show {
  z-index = 200;
  left: 0;
  top: 0;
  opacity: 1;
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  //background-color: rgba(255, 255, 255, 0.05);
  //background: rgb(255,104,168);
  //background: radial-gradient(circle, rgba(255,104,168,1) 0%, rgba(16,231,226,1) 0%, rgba(255,104,168,1) 100%);
}
@supports not ((-webkit-backdrop-filter: blur(40px)) or (backdrop-filter: blur(40px))) {
  .overlay.show  {
    background-color: rgba(255, 255, 255, 0.5);
  }
}
.grid_aufnahmen{
  background-size: 40px 40px;
  background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
  width: 100%;
  height: 100vh;
  outline: 1px solid whitesmoke;
  //height: 80vh;
  overflow-y: scroll;
  position: absolute;
  //top: 12vh;
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: repeat(5, auto);
  justify-content: center;
  align-content: flex-start;
  justify-items: center;
  align-items: center;
  column-gap: 10vw;
}
.wrapper_aufnahme{
  position: relative;
  width: 22vw;
  margin: 1vw;
  background-color: #f3ea5f;
  border-bottom-left-radius: 2vw;
  border-bottom-right-radius: 2vw;
}
.canvas_fotoalbum{
  width: 20vw;
  height: 20vw;
  margin: 1vw;
  position: relative;
}
.canvas_fotoalbum.selected{
  position: relative;
  border: 2vw solid red;
  margin: -1vw;
  border-radius: 50%;
  transform: scale(0.8);
}
.canvas_fotoalbum.selected:after{
  content: "/";
  color: red;
  /* border: 5vw solid fuchsia; */
  position: absolute;
  font-size: 55vw;
  top: -12vw;
  left: -2vw;
}
.canvas_fotoalbum.scaled{
  width: 100vw;
  height: 100vw;
  background-color: black;
  padding: 0 0 100vh 0;
  z-index: 1000;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  //transition: all .1s ease-out;
}
#overlay_magnify, #overlay_create_backup, #overlay_import_backup{
  opacity: 1;
  aspect-ratio: 1;
  display: block;
  position: fixed;

  border-radius: 5px;
  z-index: 1000;
}
#overlay_magnify{
  left: 4vw;
  top: 2vh;
  height: 8vh;
}
#overlay_import_backup{
  right: 4vh;
  bottom: .5vh;
  height: 4vh;
}
#overlay_create_backup{
  right: 12vh;
  bottom: .5vh;
  height: 4vh;
}
#id_overlay_combination{
  opacity: 1;
  position: fixed;
  background-color: red;
  width: 50vw;
  height: 6vh;
  left: 26vw;
  top: 3vh;
  grid-template-columns: repeat(4, auto);
  grid-gap: 0vw;
  display: grid;
  justify-content: space-around;
  align-content: stretch;
  justify-items: stretch;
  align-items: center;
  border-radius: 5vw;
  z-index: 1000;
}
#id_select_gif_delay{
  height: 5vw;
  width: 30vw;
  border: 1px solid white;
  background-color: grey;
  color: whitesmoke;
}
#id_checkbox_gif_reverse{
  top: 1vw;
  position: relative;
  width: 5vw;
  height: 5vw;
}
.active svg{
  background-color: yellowgreen;
  border-radius: 50%;
  transform: scale(1.2);
}

#overlay_select, #overlay_delete, #overlay_download, #overlay_video{
  opacity: 1;
  width: 4vh;
  height: max-content;
  display: block;
  position: relative;
  border-radius: 5px;
  z-index: 1000;
}
#overlay_select, #overlay_delete, #overlay_download, #overlay_video svg{
  max-width: 2rem;
  //margin-top: -6vh;
}
#overlay_select{
  left: -1vw;
  position: relative;
  //width: 6vh;
  aspect-ratio: 1;
}
#overlay_schliesser{
  opacity: 1;
  height: 8vh;
  aspect-ratio: 1;
  display: block;
  position: fixed;
  right: 4vw;
  top: 2vh;
  border-radius: 5px;
  z-index: 1000;
}
.aufnahme_tools{
  display: flex;
  justify-content: center;
  padding: 1vw;
  column-gap: 20%;
}
.aufnahme_tools svg{
  height: 5vh;
}

.modal {
  z-index: 1000;
  position: fixed;
  transition: all .5s ease-out;
  //transform: translate3d(100vh,0,0);
  opacity: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  font-size: 1rem;
  border-radius: 0vw;
  background-color: rgba(0,0,0,.35);
  backdrop-filter: blur(4px);
  font-family: 'JosefinSans';
  color: white;
  text-shadow: 0px 0px 7px black;
}
.modal button {
  width: 100%;
}
.modal.show{
  //transform: translate3d(0,0,0);
  opacity: 1;
}
#modal_content{
  //overflow: scroll;
  width: 80%;
  transform: translate3d(5vw,0,0);
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  border-radius: 5px;
  display: grid;
  box-shadow: rgb(96 96 96 / 20%) 5px 5px;
  align-content: center;
}
#modal_content_placeholder{
  display: grid;
  margin: 2vh;
  justify-content: center;
}
#modal_content_answer{
  width: 75vw;
  column-gap: 25vw;
  display: grid;
  justify-content: center;
  align-content: center;
  align-items: center;
  grid-template-columns: repeat(2, auto);
}
#modal_content_text{
  font-size: 4vh;
  text-align: center;
  padding-top: 10vh;
  padding-bottom: 10vh;
  overflow: scroll;
}
.class_tools, .class_tools_options{
  font-family: 'JosefinSans';
  font-size: .6rem;
  color: white;
  height: 3vh;
  aspect-ratio: 5;
  background-color: #4c4c4c8c;
  display: flex;
  grid-gap: 1vw;
  flex-wrap: nowrap;
  flex-direction: row;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-color: #6969dd #e0e0e0;
  scrollbar-width: thin;
}
.class_tools::-webkit-scrollbar, .class_tools_options::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.class_tools::-webkit-scrollbar-track, .class_tools_options::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 5px;
}
.class_tools::-webkit-scrollbar-thumb, .class_tools_options::-webkit-scrollbar-thumb {
  background-color: #d4aa70;
  border-radius: 5px;
}
.class_tool{
  padding-inline: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.class_tool.active{
  border: 1px solid white;
}
.active_select{
  animation: animation_submenu_glow 1s alternate infinite;
}
@keyframes animation_submenu_glow {
  0% {box-shadow: -5px 0px 0px 0px #5200ff, 5px 0px 0px 0px #d4aa70;}
  100%{box-shadow: -5px 0px 0px 0px #f0ca, 5px 0px 0px 0px #d4aa70;}
}
.top_left, .top_right{
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.top_right{
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}
.class_color{
  width: 2vw;
  height: 2vw;
  display: grid;
  grid-template-columns: repeat(2, auto);
  align-items: center;
}
.class_color_single{
  width: 1vw;
  height: 1vw;
}
#id_display_logo, #id_display_logo_upper{
  display: flex;
  position: absolute;
  width: 100%;
  bottom: 1.5vh;
  justify-content: center;
  color: white;
  font-family: 'JosefinSans';
  font-size: 1.3rem;
  animation: textShadow 1.6s infinite;
}
#id_display_logo_upper{
  top: 1.5vh;
}
#id_display_fullscreen{
  width: 5%;
  position: absolute;
  margin-top: 3%;
  left: 3%;
}
#id_display_storagecapacity{
  width: 5%;
  height: 5vh;
  position: absolute;
  background-color: #44444444;
  outline: 1px dashed navajowhite;
  margin-top: 15%;
  right: 5%;
  /* writing-mode: horizontal-tb; */
  text-align: end;
  font-family: 'JosefinSans';
  font-size: small;
  color: whitesmoke;
}
#id_display_storagecapacity svg{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1rem;
}
#id_display_storagecapacity_fill{
  background-color: lightgoldenrodyellow;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  opacity: 0.3;
  z-index: 0;
}
@keyframes textShadow {
0% {
text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
5% {
text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
10% {
text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
15% {
text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
20% {
text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
25% {
text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
30% {
text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
35% {
text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
40% {
text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
45% {
text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
50% {
text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
55% {
text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
60% {
text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
65% {
text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
70% {
text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
75% {
text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
80% {
text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
85% {
text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
90% {
text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
95% {
text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
100% {
text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
}

.path {
    stroke: white;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}