/* styles which are meant to be global
mostly connected to the body or the layout of the .stopwatch container
*/
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:300|Open+Sans:400&display=swap");

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

body {
    background: hsl(0, 0%, 95%);
    color: hsl(0, 0%, 20%);
    font-family: "Open Sans", sans-serif;
    /* center the .stopwatch container in the viewport */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* display the content of the .stopwatch container in a column */
.stopwatch {
    display: flex;
    flex-direction: column;
}
.stopwatch > * + * {
    margin-top: 0.75rem;
}

/* for devices supporting css grid */
@supports (display: grid) {
    /* for larger viewports */
    @media (min-width: 600px) {
        /* display the svg, ul and .controls in a grid

			|   svg  |  ul           |
			|   svg  |   .controls   |
		*/
        .stopwatch {
            display: grid;
            grid-gap: 20px 50px;
            grid-template-columns: 300px 250px;
            grid-template-rows: 225px auto;
            grid-template-areas: "watch list" "watch controls";
            justify-content: space-between;
        }
        .stopwatch svg {
            grid-area: watch;
            align-self: center;
        }
        .stopwatch ul {
            grid-area: list;
        }
        .stopwatch .controls {
            grid-area: controls;
            align-self: center;
        }
        .stopwatch > * + * {
            margin-top: 0;
        }
    }
}

svg.svelte-1diivmn{font-family:"Roboto Mono", monospace;color:hsl(0, 0%, 5%)}
ul.svelte-1intkjs{list-style:none;height:225px;overflow-y:auto;padding:0 0.5rem}ul.svelte-1intkjs li.svelte-1intkjs{display:flex;align-items:center;border-bottom:1px solid hsl(0, 0%, 70%);padding:0.75rem 0}ul>li+li.svelte-1intkjs{margin-top:1rem}ul.svelte-1intkjs li>.svelte-1intkjs{font-weight:400;width:0;flex-grow:1}ul.svelte-1intkjs li h2.svelte-1intkjs{text-align:left;font-size:1rem}ul.svelte-1intkjs li h2 sup.svelte-1intkjs{font-size:0.75rem;margin-left:-0.25rem}ul.svelte-1intkjs li h3.svelte-1intkjs{text-align:center;font-size:1.15rem}ul.svelte-1intkjs li h4.svelte-1intkjs{text-align:right;font-size:0.75rem}ul.svelte-1intkjs::-webkit-scrollbar{width:6px}ul.svelte-1intkjs::-webkit-scrollbar-track{border-radius:3px;background:hsl(0, 0%, 80%)}ul.svelte-1intkjs::-webkit-scrollbar-thumb{background-color:hsl(0, 0%, 30%);border-radius:3px}
div.svelte-ucwyqb{display:flex;border:1px solid hsl(0, 0%, 25%);border-radius:20px}div.svelte-ucwyqb button.svelte-ucwyqb{font-size:0.9rem;color:hsl(0, 0%, 10%);font-family:inherit;padding:0.5rem;flex-grow:1;width:0;border:none;background:none;border-radius:inherit;transition:background 0.2s ease-out}div.svelte-ucwyqb button.svelte-ucwyqb:not(:first-of-type){border-left:1px solid hsl(0, 0%, 25%);border-top-left-radius:0;border-bottom-left-radius:0}div.svelte-ucwyqb button.svelte-ucwyqb:focus{outline-color:hsl(0, 0%, 25%)}div.svelte-ucwyqb button.svelte-ucwyqb:hover{background:hsl(0, 0%, 92%)}