/*---- fonts ----*/

@font-face{
    font-family: 'Ubuntu Mono';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('https://dl.dropboxusercontent.com/s/5tvl4rmy9twlxv8/UbuntuMono-Regular.woff2') format('woff2');
}

@font-face{
    font-family: 'Product Sans';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('https://dl.dropboxusercontent.com/s/zdyjlaqr01s269r/ProductSans-Regular.woff') format('woff');
}

@font-face{
    font-family: 'Product Sans';
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url('https://dl.dropboxusercontent.com/s/p0hk5c3q28ld2tg/ProductSans-Bold.woff') format('woff');
}

/*---- icons ----*/

.remixicon_os20_file-copy {
    --path: path('M 7 6 V 3 A 1 1 0 0 1 8 2 H 20 A 1 1 0 0 1 21 3 V 17 A 1 1 0 0 1 20 18 H 17 V 21 C 17 21.552 16.55 22 15.993 22 H 4.007 A 1.001 1.001 0 0 1 3 21 L 3.003 7 C 3.003 6.448 3.453 6 4.01 6 H 7 Z M 5.003 8 L 5 20 H 15 V 8 H 5.003 Z M 9 6 H 17 V 16 H 19 V 4 H 9 V 6 Z')
}

*[class^='remixicon_'], *[class*=' remixicon_'] {
    --size: 24;
    --color: #000;
    display: inline-block;
    height: 24px;
    width: 24px;
    background-color: var(--color);
    clip-path: var(--path);
    transform: scale(calc(var(--size)/24))
}

/*---------------*/


:root{

	--ff_p: "Product Sans", sans-serif;
	--ff_s: "Ubuntu Mono", monospace;

	--fs_1: 8px;
	--fs_2: 10px;
	--fs_3: 12px;
	--fs_4: 14px;
	--fs_5: 16px;
	--fs_6: 18px;
	--fs_7: 20px;
	--fs_8: 22px;
	--fs_9: 24px;

	--c_1: hsl(217 50% 98%);
	--c_2: hsl(0 0% 12%);
	--c_3: hsl(0 0% 100%);
	--c_4: hsl(217 50% 94%);
	--c_5: hsl(217 50% 84%);
	--c_6: #4285f4;
	--c_7: #1368f1;
	--c_8: hsl(217 0% 60%);

	--red: #db4437;
	--orange: #ff6a00;
	--yellow: #f4b400;
	--green: #4b9d0f;
	--green_1: #0f9d58;

}

html{
	-webkit-tap-highlight-color:transparent;
}

body{
	margin:0;
	font-family:var(--ff_p);
	font-size:var(--fs_4);
	background-color:var(--c_1);
	color:var(--c_2);
}

input, button{
	font-size:var(--fs_4);
}

label, button{
	user-select:none;
}

.input-checkbox{
    --border-width:1px;
	--border-radius:2px;
	--border-color:var(--c_5);
    --padding:2px;
    --height:14px;
	--color:var(--c_3);
	--checked-bgcolor:var(--c_6);
}

.input-checkbox{
    appearance:none;
    outline:none;
    margin:0;
    height:var(--height);
    width:var(--height);
    display:inline-flex;
    border:var(--border-width) solid var(--border-color);
	border-radius:var(--border-radius);
    box-sizing:border-box;
    position:relative;
}

.input-checkbox:checked{
    background-color:var(--checked-bgcolor);
	border-color:var(--checked-bgcolor);
}

.input-checkbox:checked::before{
    content:"";
    width:calc(calc(var(--height) - var(--padding)*2 - var(--border-width)*2)/2);
    height:calc(var(--height) - var(--padding)*2 - var(--border-width)*2);
    border-right:2px solid var(--color);
    border-bottom:2px solid var(--color);
    box-sizing:border-box;
    transform:rotate(45deg) translateY(-1px);
    position:absolute;
    top:var(--padding);
    left:calc(var(--padding)*2);
}