:root {
 --b: #0e0e2e;
 --f: #45f;
 --bo: solid var(--b) calc(1px + 1 * ((100vw - 300px)/ 1620));
}

* {
 padding: 0;
 box-sizing: border-box;
 margin: 0;
 font-style: normal;
 font-variant: normal;
 font-family: ff,Arial;
 font-weight: 400;
 scrollbar-width: none;
 overscroll-behavior: none;
 color: var(--f);
 user-select: none;
 -webkit-user-select: none;
 text-decoration: none;
 outline: 0;
 border: none;
}

body,html {
 height: 100%;
 min-height: 100%;
 max-height: 100%;
}

@font-face {
 font-family:ff;src:url('n.woff') format('woff');
}

::-webkit-scrollbar {
 display: none;
}

html {
 background: var(--b);
 overflow-x: hidden;
 overflow-y: hidden;
}
@media (max-height: 176px) {
 html {overflow-y: scroll;}
}

::selection {
 background: #45f5;
}

* img {
 pointer-events: none;
}

@media (max-width:299px) {
 body {
  display: none;
 }
}



.m {
 width: 100%;
 position: relative;
 display: flex;
 flex-wrap: wrap;
 min-height: 50px;
 max-height: 50px;
 height: 50px;
}
@media (max-width:1920px) {
 .m {
  min-height: calc(25px + (25) * ((100vw - 300px)/ (1920 - 300)));
  max-height: calc(25px + (25) * ((100vw - 300px)/ (1920 - 300)));
  height: calc(25px + (25) * ((100vw - 300px)/ (1920 - 300)));
 }
}

.m div {
 flex: 0 0 33.33%;
 height: 50%;
 max-height: 50%;
 width: 33.3%;
 display: flex;
 align-items: center;
 justify-content: center;
 text-decoration: none;
 background: var(--f);
}
.m div h1 {
 font-size: 20px;
 color: var(--b);
}
@media (max-width: 1919px) {
 .m div h1 {
  font-size: calc(10px + (20 - 10) * ((100vw - 300px) / (1920 - 300)));
 }
}

.m div:nth-of-type(2), .m div:nth-last-of-type(2) {
 border: var(--bo);
 border-top: solid var(--f) calc(0.7px + 0.5 * ((100vw - 300px)/ 1620));
}
.m div {
 border-bottom: var(--bo);
 border-top: solid var(--f) calc(0.7px + 0.5 * ((100vw - 300px)/ 1620));
}



#text {
 width: 100%;
 min-height: calc(100vh - 100px);
 max-height: calc(100vh - 100px);
 height: calc(100vh - 100px);
 padding: 0 calc(1.5px + (1.5) * ((100vw - 300px)/ (1920 - 300)));
 font-size: calc(9px + (18 - 9) * ((100vw - 300px) / (1920 - 300)));
 border: solid var(--b) calc(1px + 1 * ((100vw - 300px)/ 1620));
 border-left: none;
 border-right: none;
 background: var(--b);
 color: var(--f);
 resize: none;
 display: flex;
 position: relative;
 overflow-y:scroll;

 
 display: flex;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#text::placeholder {
 color: var(--f);
 text-align: center;
 line-height: var(--x1, calc(100vh - 155px));
 opacity: 1;
}

#text:focus::placeholder {
 opacity: 0;
}

@media (max-width:1920px) {
 #text {
  min-height: calc(100vh - 75px - (75 * ((100vw - 300px)/ (1920 - 300))));
  max-height: calc(100vh - 75px - (75 * ((100vw - 300px)/ (1920 - 300))));
  height: calc(100vh - 75px - (75 * ((100vw - 300px)/ (1920 - 300))));
 } 
 #text::placeholder {
  line-height: var(--x2, calc(100vh - 78px - (78 * ((100vw - 300px) / (1920 - 300)))));
 }
}

@media (max-height:180px) and (max-width:1920px) {
 #text {
  min-height: calc(180px - 75px - (75 * ((100vw - 300px)/ (1920 - 300))));
  max-height: calc(180px - 75px - (75 * ((100vw - 300px)/ (1920 - 300))));
  height: calc(180px - 75px - (75 * ((100vw - 300px)/ (1920 - 300))));
 } 
 #text::placeholder {
  line-height: var(--x3, calc(180px - 78px - (78 * ((100vw - 300px) / (1920 - 300)))));
 }
}

@media (max-height:180px) and (min-width:1920px) {
 #text {
  min-height: calc(180px - 75px);
  max-height: calc(180px - 75px);
  height: calc(180px - 75px);
 } 
 #text::placeholder {
  opacity: 0;
 }
}




.mx {
 width: 100%;
 max-width: 100%;
 position: relative;
 display: flex;
 flex-wrap: wrap;
 min-height: 50px;
 max-height: 50px;
 height: 50px;
}
.ix {
 flex: 1;
 height: 100%;
 background-color: var(--f);
 cursor: pointer;
 justify-content: center;
 align-items: center;
 display:flex;
}
.ix img{height:70%;max-width:70%;object-fit:contain;display: block;position:absolute;pointer-events:none;}
.ix:nth-child(2),.ix:nth-child(4),.ix:nth-child(6) {
 border-left: var(--bo);
 border-right: var(--bo);
}
.ix:nth-last-child(2) {
 border-right: var(--bo);
}
@media (max-width: 1920px) {
 .mx {
  min-height: calc(25px + (25) * ((100vw - 300px)/ (1920 - 300)));
  max-height: calc(25px + (25) * ((100vw - 300px)/ (1920 - 300)));
  height: calc(25px + (25) * ((100vw - 300px)/ (1920 - 300)));
 }
}




.mx2 {
 width: 100%;
 max-width: 100%;
 position: relative;
 display: flex;
 flex-wrap: wrap;
 min-height: 50px;
 max-height: 50px;
 height: 50px;
 border-top: var(--bo);
}
.ix2 {
 flex: 1;
 height: 100%;
 background-color: var(--f);
 cursor: pointer;
 justify-content: center;
 align-items: center;
 display:flex;
}
.ix2 img{height:70%;max-width:70%;object-fit:contain;display: block;position:absolute;pointer-events:none;}
.ix2:nth-child(2),.ix2:nth-child(4),.ix2:nth-child(6) {
 border-left: var(--bo);
 border-right: var(--bo);
}
.ix2:nth-last-child(2) {
 border-right: var(--bo);
}
@media (max-width: 1920px) {
 .mx2 {
  min-height: calc(25px + (25) * ((100vw - 300px)/ (1920 - 300)));
  max-height: calc(25px + (25) * ((100vw - 300px)/ (1920 - 300)));
  height: calc(25px + (25) * ((100vw - 300px)/ (1920 - 300)));
 }
}

#btn-save {cursor: pointer;
}

#imageCanvas {
  width: 80%;
  height: 80%;
  object-fit: contain;
  
  opacity: 1;
  z-index: 100;
  position: absolute;
}