@font-face
{
    font-family: 'FiraSans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('font/FiraSans-Regular.ttf');
}
@font-face
{
    font-family: 'FiraSans';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('font/FiraSans-Medium.ttf');
}
@font-face
{
    font-family: 'Pangolin';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('font/Pangolin-Regular.ttf');
}
html, body
{
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background-color: var(--background);

    box-sizing: border-box;
}

.toolz
{
    position: absolute;
    top: 1em;
    left: 1em;

    width: 300px;
    height: 48px;

    display: grid;
    justify-content: center;
    align-items: center;

    grid-template-columns: repeat(2, 1fr);
}

canvas
{
    background-color: var(--canvas);
    touch-action: none;
}

/* editor */
canvas#editor
{
    cursor: none;
    border: 3px solid var(--outline);

    width: calc(100% - 50px);
    height: calc(100% - 50px);

    max-width: 1280px;
    max-height: 720px;
}

canvas#timeline
{
    width: 100%;
    height: 100%;
}

#frame_tools
{
    width: 100%;
    height: 100%;

    background-color: var(--window);
    border-top: 3px solid var(--outline);
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 304px 160px 250px 1fr 160px;
}

#frame_tools .playback
{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
#frame_tools .copybuffer
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
#frame_tools .frames
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
#frame_tools .fps
{
    display: grid;
    grid-template-columns: auto 2fr 1fr;

    gap: 6px;
    padding: 6px;

    justify-content: center;
    align-items: center;
}

#frame_tools .fps p
{
    margin: 0;
    font-weight: bold;
    font-size: 24px;
    color: var(--outline-dark);
    font-family: 'Pangolin', sans-serif;
}
#frame_tools .fps input[type="number"]
{
    background-color: var(--window);
    height: 20px;
    font-size: 20px;
    font-family: 'Pangolin', sans-serif;
}

#frame_tools .slider
{
    display: grid;
    grid-template-columns: 1fr;

    align-items: center;
    justify-content: center;

    background-color: var(--background);
}


#frame_tools .playback, #frame_tools .frames, #frame_tools .copybuffer, #frame_tools .fps, #frame_tools .slider
{
    border-right: 3px solid var(--outline);
    box-sizing: border-box;
    overflow: hidden;
    
    width: 100%;
    height: 100%;
}

.bottom button:first-of-type
{
    border-left: none;
}
.bottom button
{
    width: 100%;
    height: 100%;
    
	background-color: var(--window);
    background-position: center center;

    border: none;
    border-left: 3px solid var(--outline);
    box-sizing: border-box;

    outline: none;
    padding: 0;

    cursor: pointer;
}

.bottom button span
{
    margin: auto;
    margin-top: -5px;
    filter: invert();
}

.bottom button:not(.nohint):hover span
{
    display: none;
}
.bottom button:not(.nohint):hover p
{
    display: block;
}

.draw .bottom
{
    grid-column: 1 / 4;
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    border-top: 3px solid var(--outline);
    overflow: hidden;

    display: grid;
    grid-template-rows: 1fr 45px;
}

.draw
{
    display: grid;

    width: 100%;
    height: 100%;

    grid-template-columns: 11% 68% 21%;
    grid-template-rows: 39% 39% 22%;

    gap: 0px 0px;
    user-select: none;
    grid-auto-flow: row;
    grid-template-areas:
        '. . a'
        '. . b'
        '. . .';
    
    justify-items: center;
    align-items: center;

    background: var(--background);
}
.draw .left, .draw .center
{
    grid-row: 1 / 3;
    text-align: center;
    position: relative;
}

#scale
{
    display: none;

    position: absolute;
    right: 2em;
    bottom: 1em;

    width: 256px;

    background-color: var(--window);
    border: 3px solid var(--outline);
    border-radius: 7.5px;

    grid-template-columns: auto 2fr 1fr;
    grid-template-rows: 144px 1fr;

    gap: 12px;
    padding: 6px;

    justify-content: center;
    align-items: center;
}
#scale span
{
    filter: invert();
    zoom: .8;
}
#scale #mini
{
    grid-row: 1;
    grid-column: 1 / 4;
    border-radius: 3.75px;
}

.draw .left
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.draw .panel
{
    width: calc(100% - 48px);
    height: calc(100% - 48px);

    max-width: 250px;
    max-height: 300px;

    background-color: var(--window);
    border: 3px solid var(--outline);
    border-radius: 15px;

    overflow: hidden;
}

.draw .panel, .draw .left button, .draw .center canvas
{
    box-shadow: gray 0 0 4px 0;
}

.brush .title
{
    text-align: center;
    grid-column: 1 / 3;
}
.brush .buttons
{
    grid-column: 1 / 3;

    width: 100%;
    height: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.title h2
{
    font-family: 'Pangolin', sans-serif;
    color: var(--outline-darker);
    display: inline-block;

    vertical-align: middle;

    margin: 6px 0 6px 2px;
}
.title span
{
    vertical-align: middle;
    display: inline-block;
    filter: invert(58%) sepia(0%) saturate(990%) hue-rotate(178deg) brightness(88%) contrast(77%);
}


input[type="range"]
{
	-webkit-appearance: none;
	-moz-appearance: none;
	vertical-align: middle;

	height: 5px;
	width: calc(100% - 12px);
	
	background-color: var(--outline-dark);
	
	outline: none;
	border: none;
	border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb
{
	-webkit-appearance: none;
	width: 15px;
	height: 15px;
	border: 3.75px solid var(--outline-darker);
	border-radius: 50%;
	background-color: var(--window);
}
input[type="range"]:-moz-range-thumb
{
	-moz-appearance: none;
	width: 15px;
	height: 15px;
	border: 3.75px solid var(--outline-darker);
	border-radius: 50%;
	background-color: var(--window);
}

input[type="number"]
{
    vertical-align: middle;

    border: 3.75px solid var(--outline-darker);
    border-radius: 5px;

	width: calc(100% - 12px);
    height: 30px;

    background-color: var(--window);
    color: var(--outline-dark);
    
    font-size: 24px;
    font-family: 'Pangolin', sans-serif;
    text-align: center;
}

input[type="number"]:focus
{
    outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}
input:-moz-outer-spin-button,
input:-moz-inner-spin-button
{
    -webkit-appearance: none;
    margin: 0;
}

.brush
{
    padding: 24px 12px 24px 12px;

    display: grid;
    box-sizing: border-box;

    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(6, 1fr);
    
    gap: 12px;
    grid-auto-flow: row;

    align-items: center;
    justify-items: center;
}

.palette
{
    display: grid;

    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    
    gap: 0px 0px;
    grid-auto-flow: row;
}

.palette .colour
{
    width: 100%;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

.palette .colour span
{
    vertical-align: middle;
    mix-blend-mode: difference;
}

.palette .colour input[type="color"]
{
    cursor: pointer;

    width: 100%;
    height: 100%;

    background: none;
    
    outline: none;
    border: none;
    padding: 0;
}
.palette .colour input[type="color"]::-webkit-color-swatch-wrapper
{
    padding: 0;
}
.palette .colour input[type="color"]::-webkit-color-swatch
{
    border: none;
}

.palette .colour input[type="color"]:-moz-color-swatch-wrapper
{
    padding: 0;
}
.palette .colour input[type="color"]:-moz-color-swatch
{
    border: none;
}

.palette .colour.outline, .palette .colour.fill
{
    border-top: none;
    position: relative;

    border-bottom: 3px solid var(--outline);
}

.palette .colour.outline span, .palette .colour.fill span
{
    position: absolute;
    bottom: 4px;
    right: 4px;
    pointer-events: none;
}

.palette .colour.outline
{
    grid-row: 1 / 3;
    grid-column: 1 / 3;
}
.palette .colour.fill
{
    grid-row: 1 / 3;
    grid-column: 3 / 5;
}

.hidden
{
    display: none;
}

.toolz .control
{
    background: none;
    border: none;
}
.toolz .control:hover
{
    opacity: .8;
    background: none;
    border: none;
}

.control
{
    display: block;
	
    width: 48px;
    height: 48px;
	
	outline: none;
	
	border-radius: 7.5px;

	background-color: var(--window);
    background-position: center center;

    border: 3px solid var(--outline);
    padding: 0;

	cursor: pointer;
}

.control span
{
    display: block;
    margin: auto;
    filter: invert();
    zoom: .8;
}
.control p, .bottom button p
{
    display: none;
	font-size: 30px;
	font-weight: bold;
    margin: 0;
    color: var(--outline-dark);
    font-family: 'Pangolin', sans-serif;
}

.bottom button p
{
    margin-top: -2px;
}

.dropper
{
    cursor: pointer;
}

.selected
{
    background-color: var(--selected);
}

.control:hover, .dropper:hover, .bottom button:hover
{
    background-color: var(--hover);
}
.control:not(.nohint):hover p
{
    display: block;
}
.control:not(.nohint):hover span
{
    display: none;
}