:root{

    --bg:#08131f;
    --panel:#122132;
    --panel2:#16293d;

    --border:#50657b;

    --text:#d6dde5;

    --button:#1b3148;
    --buttonHover:#29435d;

    --input:#0e1926;

    --canvas:#000000;

    font-size:16px;

}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html,
body{

    width:100%;
    height:100%;

    background:var(--bg);

    color:var(--text);

    font-family:monospace;

    font-size:1rem;

}

body{

    display:flex;

}

#app{

    flex:1;

    display:flex;

    flex-direction:column;

    min-height:100vh;

}

header{

    padding:1rem;

    border-bottom:1px solid var(--border);

    background:var(--panel);

}

header h1{

    font-size:1.25rem;

    font-weight:normal;

}

main{

    flex:1;

    display:grid;

    grid-template-columns:340px 1fr;

    overflow:hidden;

}

#controls{

    overflow:auto;

    padding:1rem;

    border-right:1px solid var(--border);

    background:var(--panel);

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.group{

    display:flex;

    flex-direction:column;

    gap:.75rem;

}

.group h2{

    font-size:1rem;

    font-weight:normal;

    padding-bottom:.25rem;

    border-bottom:1px solid var(--border);

}

label{

    display:flex;

    flex-direction:column;

    gap:.35rem;

}

input{

    width:100%;

    padding:.45rem;

    background:var(--input);

    color:var(--text);

    border:1px solid var(--border);

    font:inherit;

    outline:none;

}

input:focus{

    border-color:var(--text);

}

input[type=color]{

    padding:.15rem;

    height:2.3rem;

}

.buttons{

    display:flex;

    gap:.75rem;

    flex-wrap:wrap;

}

button{

    padding:.6rem 1rem;

    border:1px solid var(--border);

    background:var(--button);

    color:var(--text);

    font:inherit;

    cursor:pointer;

}

button:hover{

    background:var(--buttonHover);

}

button:active{

    transform:translateY(1px);

}

#preview{

    overflow:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:1rem;

    background:var(--bg);

}

canvas{

    max-width:100%;

    max-height:100%;

    border:1px solid var(--border);

    background:var(--canvas);

    image-rendering:auto;

}

/* Tablet */

@media (max-width:1200px){

    main{

        grid-template-columns:280px 1fr;

    }

}

/* Phone */

@media (max-width:900px){

    main{

        display:flex;

        flex-direction:column;

    }

    #controls{

        border-right:none;

        border-bottom:1px solid var(--border);

        max-height:45vh;

    }

    #preview{

        flex:1;

        min-height:0;

    }

}

#color1Info,
#color2Info,
#color3Info{

    margin-top:0.25rem;

    color:var(--text);

    font-size:0.875rem;

    word-break:break-all;

}

.colorRow{

    display:flex;
    gap:0.5rem;
    align-items:center;

}

.colorRow input[type=color]{

    width:3.5rem;
    flex:none;

}

.colorRow input[type=text]{

    flex:1;

}

:root {
	--button-size: 20px;
}

.home-button {
	position: fixed;
	top: 5px;
	right: 10px;

	display: block;
	width: var(--button-size);
	height: var(--button-size);

	z-index: 1000;
}

.home-button img {
	display: block;
	width: 100%;
	height: 100%;
}