@charset "utf-8";
@font-face {
    font-family: 'Raleway';
    src:    local('Raleway'),
            local('Raleway-Regular'),
            url('./fnt/Raleway-Regular.woff2') format('woff2'),
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src:    local('Raleway Italic'),
            local('Raleway-Italic'),
            url('./fnt/Raleway-Italic.woff2') format('woff2'),
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src:    local('Raleway Bold'),
            local('Raleway-Bold'),
            url('./fnt/Raleway-Bold.woff2') format('woff2'),
    font-weight: 700;
    font-style: normal;
}
:root
{
    /* POLAR NIGHT */
    --nord0: #2e3440;
    --nord1: #3b4252;
    --nord2: #434c5e;
    --nord3: #4c566a;
    /* SNOW STORM */
    --nord4: #d8dee9;
    --nord5: #e5e9f0;
    --nord6: #eceff4;
    /* FROST */
    --nord7: #8fbcbb;
    --nord8: #88c0d0;
    --nord9: #81a1c1;
    --nord10: #5e81ac;
    /* AURORA */
    --nord11: #bf616a;
    --nord12: #d08770;
    --nord13: #ebcb8b;
    --nord14: #a3be8c;
    --nord15: #b48ead;
    /*
        AURORA EXTENDED
        contrasted w/ --nord0
    */
    --nord22: #d28d77;
    --nord24: #a9cd88;
    --nord26: #8cccde;
    --disabled--black: hsla(0, 0%, 11%, 0.4);
    --disabled--white: hsla(0, 0%, 96%, 0.8);
    --pink: #F8C9D7;
    --pink-dark: #A80033;
    --teal: #006646;
    --red: #ae1d00;
    --low: var(--nord14);
    --medium: var(--nord13);
    --high: var(--nord12);
    --critical: var(--nord11);
    --bg: var(--nord0);
    --bg-secondary: var(--nord2);
    --fg: var(--nord4);
    --fg-secondary: var(--nord6);
    --succeed: var(--nord24);
    --warning: var(--nord22);
    /*
     * MAJOR THIRD
     * source https://type-scale.com/
     */ 
    --h1: 3.052rem;
    --h2: 2.441rem;
    --h3: 1.953rem;
    --h4: 1.563rem;
    --h5: 1.25rem;
}
body
{
    padding-bottom: 2em;
    margin: 0;
    font-family: "Raleway", sans-serif;
    font-variant: common-ligatures;
    letter-spacing: .1em;
    line-height: 1.5;
    background-color: var(--nord0);
    color: var(--nord4);
}

/* TYPO */
label,
input[type=text],
input[type=number],
h1,
h2,
h3 {
    line-height: 1.25;
}
h1 {
    font-size: var(--h1);
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;
    text-shadow: 2px 3px 5px black;
    width: auto;
    flex-grow: .38;
    border-right: 1px solid var(--nord2);
}
h2 {
    font-size: var(--h2);
}
h3 {
    font-size: 1rem;
    text-shadow: 2px 3px 5px black;
}
strong {
    font-weight: 700;
}
aside,
footer,
small,
sub
{
    font-size: small;
}
aside label,
h3, h2 {
    letter-spacing: 0.24em;
    font-variant: small-caps;
}
/* LAYOUT */
#top {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
    border-bottom: 1px solid var(--nord2);
}
#top > div
{
    flex-grow: .62;
}
main {
    width: 62%;
    float: left;
    padding: .4em .8em;
    box-sizing: border-box;
}
aside
{
    width: 38%;
    float: left;
}
hr
{
    width: 62%;
}
.succeed
{
    color: var(--succeed);
}
.warning
{
    color: var(--warning);
}
#notif
{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: .4em auto .4em 0;
    width: 62%;
}
#notif.empty
{
    display: none;
}
#notif > div 
{
    text-align: center;
    margin: .8em;
    padding: .4em .8em;
    border: 1px solid var(--nord2);
    flex-basis: calc(50% -1.6em);
    border-radius: 8px;
}
main ~ footer 
{
    text-align: center;
}
main ~ footer p
{
    padding: .4em .8em;
}
a {
    color: var(--pink);
    text-decoration: none;
    display: inline-block;
    padding: .4em .2em .4em .3em;
    text-indent: 0;
    text-align: center;
}
a:hover
{
    outline: 1px dashed var(--pink); 
}
/* PARAMS */
#param 
{
    display: flex;
    justify-content: space-between;
    margin: 0;
    align-items: center;
    width: 100%;
}
#param > div 
{
    padding: .24rem .8rem;
}
#param > div:first-child
{
    flex-grow: .38;
} 
#param > div:last-child
{
    flex-grow: .62;
} 
#param label 
{
    display: block;
}
input[type=range]
{
    background-color: var(--fg-secondary);
    border-radius: 2px;
}
section,
#ratiorange
{
    width: 100%;
}
#lightness-chroma 
{
    border-left: 1px solid var(--nord2);
}
.pick-a-color
{
    width: 33%;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: .4em 1.2em;
    box-sizing: border-box;
    margin-bottom: .8em;
}
.pick-a-color:first-of-type
{
    display: block;
}
.pick-a-color:not(:first-of-type)
{
    border-left: 1px solid var(--nord2);
}
.pick-a-color input
{
    max-width: 100%;
    background-color: var(--nord1);
    border: 1px solid var(--nord2);
    border-radius: 2px;
    color: var(--fg);
}
.pick-a-color input[type=text]:invalid
{
    border-color: var(--warning);
}
.pick-a-color input:focus
{
    border: 1px solid var(--pink-dark);
    background-color: var(--bg);
}
.pick-a-color:not(:first-of-type) label
{
    margin-bottom: .4em;
}
#pick-a-color-preview
{
    width: 62px;
    height: 38px;
    margin: auto;
    clear: both;
    border-radius: 8px;
    overflow: hidden;
}

/* SVG */
.icon 
{
    width: 20px;
    height: 20px;
    fill: var(--fg);
}
button:hover .icon
{
    fill: var(--pink-dark);
}
#ref svg
{
    width: 32px;
    height: 32px;
    flex-grow: .14;
}
#notif svg
{
    fill: var(--nord24);
}
/* FLEX */
#add-color section:first-of-type header,
.pick-a-color:not(:first-of-type) label, 
#add-color section:last-of-type,
#lightness-chroma label,
#colorpicker,
#reference-color,
#reference-color > div:first-of-type,
aside > div,
#colormap,
#ref
{
    display: flex;
    align-items: center;
    justify-content: center;
}
#lightness-chroma label
{
    justify-content: flex-start;
}
#lightness-chroma label span:last-of-type
{
    flex-grow: 1;
    margin-right: .4em;
    margin-right: .4em;
    font-weight: 700;
    text-align: right;
}
#lightness-chroma label input 
{
    width: 100%;
    max-width: 62%;
}
#ref
{
    margin: .4em .8em;
}
aside > form
{
    flex-direction: column;
}
#colormap,
aside > div:first-of-type
{
    flex-wrap: wrap;
}
aside > div:first-of-type button
{
    flex-basis: 38%;
}
.pick-a-color:not(:first-of-type) span
{
    width: 32%;
    text-align: center;
}
.pick-a-color:not(:first-of-type) input 
{
    width: 68%;
}
/* BUTTON */
button:not(.delete-color)
{
    background-color: var(--pink-dark);
    border: 1px solid var(--fg-secondary);
    border-radius: 8px;
    padding: .4rem .84rem;
    display: inline-block;
    margin: 1rem auto;
    cursor: pointer;
    box-shadow: 2px 2px 4px black;
    color: var(--fg);
    font-size: medium;
    font-variant: small-caps;
    transition: color, background, transform 250ms ease-in-out;
    transform: scale(1);
}
button:not(.delete-color):hover
{
    transition: color, background, transform 250ms ease-in-out;
    background-color: var(--fg-secondary);
    color: var(--pink-dark);
    transform: scale(1.16);
}
#colorpicker button,
#pick
{
    margin: 25px;
}
#pick-a-color-preview,
#generate
{
    margin-left: 2em;
}
.delete-color
{
    cursor: pointer;
    width: 20px;
    height: 20px;
    border: none;
    background-color: hsla(0,0%,11%,.8);
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
}
.delete-color:hover
{
    background-color: var(--pink-dark);
}
body .selector
{
    margin: .8em;
}
body .selector:first-of-type
{
    flex-basis: calc(100% - 1.6em);
}
body .selector:not(:first-of-type)
{
    flex-basis: calc(50% - 1.6em);
}
.card .lock-color-open,
.card .lock-color-locked
{
    background-color: hsla(0,0%,11%,.8);
    border: none;
    box-shadow: none;
    border-radius: 0;
    width: 20px;
    height: 20px;
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
}
#empty-palette,
.card .lock-color-open:hover
{
    background-color: var(--red);
}
.card .lock-color-locked:hover
{
    background-color: var(--teal);
}
.card .lock-color-open
{
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' fill='white' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 20 20'%3E%3Cpath d='M15.8,8H14V5.6C14,2.703,12.665,1,10,1C7.334,1,6,2.703,6,5.6V6h2V5.199C8,3.754,8.797,3,10,3c1.203,0,2,0.754,2,2.199V8H4 C3.447,8,3,8.646,3,9.199V17c0,0.549,0.428,1.139,0.951,1.307l1.197,0.387C5.672,18.861,6.55,19,7.1,19H12.9 c0.549,0,1.428-0.139,1.951-0.307l1.196-0.387C16.571,18.139,17,17.549,17,17V9.199C17,8.646,16.352,8,15.8,8z'/%3E%3C/svg%3E");
}
.card .lock-color-locked
{
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' fill='white' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 20 20'%3E%3Cpath d='M15.8,8H14V5.6C14,2.703,12.665,1,10,1C7.334,1,6,2.703,6,5.6V8H4C3.447,8,3,8.646,3,9.199V17 c0,0.549,0.428,1.139,0.951,1.307l1.197,0.387C5.672,18.861,6.55,19,7.1,19H12.9c0.549,0,1.428-0.139,1.951-0.307l1.196-0.387 C16.571,18.139,17,17.549,17,17V9.199C17,8.646,16.352,8,15.8,8z M12,8H8V5.199C8,3.754,8.797,3,10,3c1.203,0,2,0.754,2,2.199V8z'/%3E%3C/svg%3E");
}
#empty-palette
{
    font-weight: 700;
    margin: .8em;
    margin-right: auto;
    flex-basis: calc(50% - 1.6em);
}
#empty-palette:hover
{
    color: var(--fg);
}
/* PREVIEW */
.preview {
    position: fixed;
    width: 38vw;
    left: 31vw;
    top: 19vh;
    height: 62vh;
    transform: scale(0);
    background-color: var(--nord6);
    color: var(--nord3);
    border-radius: 16px; 
    display: flex;
    padding: 1.7rem 2rem .7rem;
    transition: transform 400ms ease-in-out;
}
.preview.viewed
{
    transform: scale(1);
    transition: transform 400ms ease-in-out;
    min-height: 68%;
    z-index: 1;
}
.preview label,
.preview p
{
    text-align: center;
} 
.preview form 
{
    width: 100%;
}
.preview textarea
{
    width: calc(100% - 2rem);
    margin: 1rem;
    min-height: 68%;
}
.preview div
{
    display: flex;
    justify-content: space-between;
}
#iscopied
{
    min-height: calc(1rem + .7em);
}
/* CARD */
#colormap
{
    margin: .4em -.4em;
    background: var(--bg-secondary);
    border-radius: 16px;
}
.card 
{
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--bg-secondary);
    color: var(--fg-secondary);
    margin-bottom: 8px;
    box-shadow: 6px 6px 20px #1c1c1c;
    flex: 0 1 7.2em;
    margin: .4em;
}
.card *
{
    cursor: pointer;
}
.card figure
{
    margin: 0;
}
.card svg
{
    width: 100%;
    height: auto;
}
.card figcaption
{
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
}
.card span:not(.colorvalue)
{
    flex-basis: 50%;
}
.colorvalue
{
    flex-basis: 100%;
}
.card span::before 
{
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    width: 12px;
    height: 12px;
}
.card.selected
{
    background-color: var(--bg);
}
.brightnessdiff::before {
    content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M494.2 221.9l-59.8-40.5 13.7-71c2.6-13.2-1.6-26.8-11.1-36.4-9.6-9.5-23.2-13.7-36.2-11.1l-70.9 13.7-40.4-59.9c-15.1-22.3-51.9-22.3-67 0l-40.4 59.9-70.8-13.7C98 60.4 84.5 64.5 75 74.1c-9.5 9.6-13.7 23.1-11.1 36.3l13.7 71-59.8 40.5C6.6 229.5 0 242 0 255.5s6.7 26 17.8 33.5l59.8 40.5-13.7 71c-2.6 13.2 1.6 26.8 11.1 36.3 9.5 9.5 22.9 13.7 36.3 11.1l70.8-13.7 40.4 59.9C230 505.3 242.6 512 256 512s26-6.7 33.5-17.8l40.4-59.9 70.9 13.7c13.4 2.7 26.8-1.6 36.3-11.1 9.5-9.5 13.6-23.1 11.1-36.3l-13.7-71 59.8-40.5c11.1-7.5 17.8-20.1 17.8-33.5-.1-13.6-6.7-26.1-17.9-33.7zm-112.9 85.6l17.6 91.2-91-17.6L256 458l-51.9-77-90.9 17.6 17.6-91.2-76.8-52 76.8-52-17.6-91.2 91 17.6L256 53l51.9 76.9 91-17.6-17.6 91.1 76.8 52-76.8 52.1zM256 152c-57.3 0-104 46.7-104 104s46.7 104 104 104 104-46.7 104-104-46.7-104-104-104zm0 160c-30.9 0-56-25.1-56-56s25.1-56 56-56 56 25.1 56 56-25.1 56-56 56z'%3E%3C/path%3E%3C/svg%3E"); 
}
.contrastratio::before {
    content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z'%3E%3C/path%3E%3C/svg%3E"); 
}
.colordiff::before {
    content:  url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='white' d='M205.22 22.09c-7.94-28.78-49.44-30.12-58.44 0C100.01 179.85 0 222.72 0 333.91 0 432.35 78.72 512 176 512s176-79.65 176-178.09c0-111.75-99.79-153.34-146.78-311.82zM176 448c-61.75 0-112-50.25-112-112 0-8.84 7.16-16 16-16s16 7.16 16 16c0 44.11 35.89 80 80 80 8.84 0 16 7.16 16 16s-7.16 16-16 16z'%3E%3C/path%3E%3C/svg%3E");
    height: 17px;
}
.correct::after
{
    content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'%3E%3C/path%3E%3C/svg%3E");
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}