@charset "utf-8";


/* Font Import */

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

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

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

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

@font-face {
src: url("fonts/adobe_blank.ttf") format("truetype");
font-family: "Adobe Blank";
}


/* Presettings */

*, *:before, *:after, h1, br {
-ms-overflow-style: none;
scrollbar-width: none;
-webkit-tap-highlight-color: transparent;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
outline: none;
color: inherit;
font-family: inherit;
font-size: inherit;
font-style: normal;
font-weight: normal;
line-height: inherit;
list-style: none;
text-decoration: none;
}

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

html {
background-color: white;
color: black;
font-family: "ArialMT", "Arial", sans-serif;
font-size: 20.9px;
line-height: 112%;
}

html, body {
position: fixed;
width: 100%;
height: 100%;
}


/* Header */

#header {
display: flex;
z-index: 1;
position: fixed;
width: 100%;
padding: 0.7177033492822967rem 0.7177033492822967rem 0.7177033492822967rem 0.7177033492822967rem;
font-size: 1.3827751196172249rem;
pointer-events: none;
}

#header h1 {
cursor: help;
pointer-events: all;
}

#header div {
margin-left: auto;
pointer-events: all;
}

#header div:nth-of-type(1) {
cursor: pointer;
}

#header div:nth-of-type(2) {
display: none;
cursor: alias;
}


/* Main Area */

#main_area {
position: absolute;
top: 50%;
left: 50%;
width: 85.74162679425838rem;
height: 53.588516746411486rem;
transform: translate(-50%, -50%);
background-color: white;
cursor: grab;
}

#main_area:active {
cursor: grabbing;
}

#canvas {
width: inherit;
height: inherit;
}

.font {
position: absolute;
width: fit-content;
white-space: pre;
cursor: text;
}

.font:nth-child(1) {
top: 13.397129186602871rem;
left: 2.3923444976076556rem;
font-family: "Mars", "Adobe Blank", "ArialMT", "Arial", sans-serif;
font-size: 1.674641148325359rem;
line-height: 105%;
}

.font:nth-child(2) {
top: 20.57416267942584rem;
left: 57.41626794258374rem;
font-family: "Stable", "Adobe Blank", "ArialMT", "Arial", sans-serif;
font-size: 1.9425837320574164rem;
line-height: 105%;
}

.font:nth-child(3) {
font-variation-settings: 'wght' 60;
top: 43.0622009569378rem;
left: 13.397129186602871rem;
font-family: "Carpo", "Adobe Blank", "ArialMT", "Arial", sans-serif;
font-size: 1.674641148325359rem;
line-height: 103%;
}


/* Bottom Bar */

#bottom_bar {
z-index: 1;
position: fixed;
bottom: 0;
max-width: 100%;
}

.font_controller {
display: none;
margin: 0.7177033492822967rem;
overflow-y: scroll;
border-radius: 0.47846889952153115rem;
background-color: white;
box-shadow: 0.09569377990430622rem 0.14354066985645933rem 0.5741626794258373rem rgb(0, 0, 0, 0.15);
cursor: grab;
}

.font_controller:active {
cursor: grabbing;
}

.show {
display: flex;
}

.font_controller_item {
display: flex;
flex-direction: column;
padding: 0.5263157894736843rem 0.7177033492822967rem 0.7177033492822967rem 0;
pointer-events: none;
}

.font_controller_item:first-child {
padding-left: 0.7177033492822967rem;
}

.font_controller_item:last-child:after {
display: block;
padding-left: 0.7177033492822967rem;
content: "";
}

.font_controller_item_title {
margin-bottom: 0.3349282296650718rem;
}

.font_controller_item_slider {
-webkit-appearance: none;
width: 10.76555023923445rem;
height: 0.5263157894736843rem;
pointer-events: all;
}

.font_controller_item_slider::-webkit-slider-runnable-track {
height: 0.5263157894736843rem;
border: none;
background-color: rgb(230, 230, 230);
cursor: pointer;
}

.font_controller_item_slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.4354066985645935rem;
height: 0.5263157894736843rem;
border: none;
background: grey;
box-shadow: none;
}

.font_controller_item_slider::-webkit-slider-thumb:hover {
background: red;
cursor: grab;
}

.font_controller_item_slider::-webkit-slider-thumb:active {
cursor: grabbing;
}


/* Adjustments for Mozilla Firefox Start */

@-moz-document url-prefix() {


/* Bottom Bar */

.font_controller, .font_controller:active {
cursor: default;
}

.font_controller_item_slider::-moz-range-track {
height: 0.5263157894736843rem;
border: none;
background-color: rgb(230, 230, 230);
cursor: pointer;
}

.font_controller_item_slider::-moz-range-thumb {
width: 1.4354066985645935rem;
height: 0.5263157894736843rem;
border: none;
border-radius: 0;
background: grey;
}

.font_controller_item_slider::-moz-range-thumb:hover {
background: red;
cursor: grab;
}

.font_controller_item_slider::-moz-range-thumb:active {
cursor: grabbing;
}


/* Adjustments for Mozilla Firefox End */

}


/* Window Size A Start */

@media screen and (min-width: 2200px) {


/* Presettings */

html {
font-size: calc(20.9px * 1.25);
}


/* Window Size A End */

}


/* Window Size B Start */

@media screen and (max-width: 800px) {


/* Main Area */

.font:nth-child(1) {
top: calc(10.526315789473685rem * 1.8);
left: calc(2.3923444976076556rem * 1.1);
}

.font:nth-child(2) {
top: calc(18.181818181818183rem * 1.5);
left: calc(57.41626794258374rem / 1.5);
}

.font:nth-child(3) {
top: calc(43.0622009569378rem / 1.1);
left: calc(13.397129186602871rem / 0.6);
}


/* Bottom Bar */

.font_controller_item_slider, .font_controller_item_slider::-webkit-slider-runnable-track, .font_controller_item_slider::-webkit-slider-thumb {
height: 0.7177033492822967rem;
}


.font_controller_item_slider::-webkit-slider-thumb {
width: 2.1531100478468903rem;
}


/* Adjustments for Mozilla Firefox Start */

@-moz-document url-prefix() {


/* Bottom Bar */

.font_controller_item_slider::-moz-range-track, .font_controller_item_slider::-moz-range-thumb {
height: 0.7177033492822967rem;
}

.font_controller_item_slider::-moz-range-thumb {
width: 2.1531100478468903rem;
}


/* Adjustments for Mozilla Firefox End */

}


/* Window Size B End */

}


/* Window Size C Start */

@media screen and (max-width: 500px) {


/* Presettings */

html {
font-size: 4.5vw;
}


/* Window Size C End */

}


/* Window Size D Start */

@media screen and (max-width: 200px) {


/* Presettings */

html {
display: none;
}


/* Window Size D End */

}