@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    background-color: #fcf6e8;
    background-image: url(tiles/tile19.gif);
    font-family: "Canarina", sans-serif;
    font-size: 20px;
    margin: 0;
    padding: 0;
    overflow: scroll;
}

@font-face {
    font-family: webfont;
    src: url(maker_fonts/000webfont.ttf);
}

@font-face {
    font-family: 'Illusion';
    src: url(https://humantooth.neocities.org/fonts/IllusionSerif-Regular.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Canarina';
    src: url(https://humantooth.neocities.org/fonts/Canarina.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CablSans';
    src: url(https://humantooth.neocities.org/fonts/CalSans-SemiBold.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CHNOPixel';
    src: url(https://humantooth.neocities.org/fonts/CHNOPixelCodePro-Regular.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}


.note {
    font-family: Illusion;
    background-color: rgba(255, 255, 255, .5);
    color: black;
    padding: 25px;
    font-size: 9px;
    max-width: 12vw;
}

img {
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast;
}

.controls {
    position: relative;
    width: 100vw;
    height: 100vh;
}

/* Style for the control frame window */
.control-frame {

    position: absolute;
    border: 2px outset;
    border-color: rgb(67, 0, 250) rgb(0, 67, 168) rgb(1, 1, 59) rgb(119, 117, 133);
    background: #fff;
    margin: 2em;
    max-height: 500px;
    max-width: 800px;
    overflow: auto;
    box-shadow: inset 2px 2px 0px rgb(241, 248, 255);
    box-shadow: inset 2px 2px 30px rgb(241, 248, 255);

    resize: both;
    z-index: 10;
    pointer-events: auto;
}

/* Title bar styling */
.control-frame .title-bar {
    border: 2px solid black;
    box-shadow:
        inset 2px 2px 0 #fff,
        inset -2px -2px 0 #666,
        2px 2px 0 black;
    background-color: #e0e0e0;
    padding: 5px;
    font-family: bonefish;
    background-color: rgb(190, 163, 201);
    color: #fff;
    font-weight: bold;
    text-align: center;
    cursor: move;
}

.control-frame .title-bar-2 {
    border: 2px solid black;
    font-size: 18px;
    color: #000;
    padding: 0.5rem;
    font-weight: bold;
    font-family: pixelarial;
    text-align: center;
    background-color: white;
}

.frame-content {
    padding: 25px;
}

/* Styling for control frame content */
.control-frame label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.4rem;
}

.control-frame input,
.control-frame select,
.control-frame textarea {
    font-size: 12px;
    width: 100%;
    margin-bottom: 0.5rem;
    border: 1px solid #999;
    padding: 0.3rem;
    background: #fefefe;
}


.output-section {
    text-align: center;
    padding: 1rem;
}




#output {
    width: 88px;
    height: 31px;
    border: 1px solid #000;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    font-size: 11px;

}


button {
    font-family: inherit;
    padding: 0.3rem 0.6rem;
    font-size: 12px;
    cursor: pointer;
    border: 2px outset #888;
    background-color: #eee;
    margin-top: 0.5rem;
}

h1 {
    font-family: webfont;

}

.intro {
    font-family: pixeloperator;
    font-size: 15px;
    max-width: 300px;
}