/*
Notes on colors:
    * See ./assets/images/README.md for color and style notes regarding images.
    * Decent color theme ideas in ./assets/images/tangles_color_theme.jpg and https://color.adobe.com/Tangled-color-theme-5414678/

Purples:
    ultralight: #f9f7fc
    light: #ebe5f5 (default background color)
    medium: '#cfbfe7'
    mediumdark: '#a587d2'
    dark: '#57348b'
    ultradark: '#1d112e'

Greys:
    ultralight: #f2f2f2
    light: #dfdfdf
    medium: #777
    dark: #aaa
    ultradark: #444

[TONE]:
    ultralight: #
    light: #
    medium: #
    dark: #
    ultradark: #
*/


.style-sheet {
    /*background-color: white;*/
}

.demo-box {
    background: white;
    border: solid white 50px;
    display: inline-block;
    margin: 16px 16px;
    width: 100%;
    min-width: 800px;
    max-width: 900px;
    vertical-align: top;
}

.demo-box input {
    border-left: none;
    border-right: none;
    border-top: none;
    padding: 0px 8px;
}

.demo-box input:focus {
    outline: none;
    border-bottom-color: blue;
}

.demo-box h3 {
    padding: 0px 0px 25px;
    margin: 0px;
}

.font-demo-box {
    display: block;
}

.hue-demo-box {
    display: block;
    height: 100px;
    width: 100%;
    padding: 15px;
}