@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap");

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
/* by default show the components in a column */
body {
    font-family: "Ubuntu", sans-serif;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="0.25" viewBox="0 0 100 100" width="100" height="100"><g transform="translate(50 50) rotate(-25)" fill="none" stroke="hsl(180, 60%, 5%)" stroke-width="5" stroke-linecap="round"><path id="branch" d="M 0 0 v 30 m 0 -22 l 10 10 m -20 0 l 10 -10 m 0 14 l 7 7 m -14 0 l 7 -7"></path><use href="%23branch" transform="rotate(90)"></use><use href="%23branch" transform="rotate(180)"></use><use href="%23branch" transform="rotate(270)"></use></g></svg>'),
        hsl(215, 61%, 26%);
        margin-top: 50px;
}

.app {
    width: 90vw;
    max-width: 700px;
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.app > * + * {
    margin-top: 2rem;
}
form {
    border-top: 0.25rem solid hsl(180, 60%, 50%);
    border-bottom: 0.25rem solid hsl(180, 60%, 50%);
}

/* if grid is supported */
@supports (display: grid) {
    /* for larger viewports */
    @media (min-width: 700px) {
        /* display the header, form and dl containers in a grid
        header  form
        dl    dl
        */
        .app {
            display: grid;
            grid-gap: 1rem;
            grid-template-columns: repeat(2, minmax(max-content, 1fr));
            grid-auto-rows: minmax(200px, auto);
            justify-items: center;
        }
        .app > * + * {
            margin-top: initial;
            border-top: none;
        }
        /* add a background to the header and dl element (the form is set to to have a background by default) */
        header {
            align-self: end;
            background: hsl(215, 95%, 15%);
        }
        form {
            align-self: start;
            /* remove the borders included on the form */
            border-top: none;
            border-bottom: none;
        }
        dl {
            grid-column: span 2;
            justify-self: stretch;
            background: hsl(215, 95%, 15%);
        }
    }
    /* for any viewport display the information in the dl in a grid
    wci             wci-unit
    temperature     speed
    t-unit          s-unit
    */
    dl {
        display: grid;
        grid-gap: 1.25rem 0.5rem;
        justify-items: center;
        grid-template-areas: "wci wci-unit" "temperature speed" "temperature-unit speed-unit";
    }
    dl dt:nth-of-type(1) {
        grid-area: wci;
    }
    dl dd:nth-of-type(1) {
        grid-area: wci-unit;
        align-self: end;
    }
    dl dt:nth-of-type(2) {
        grid-area: temperature;
    }
    dl dd:nth-of-type(2) {
        grid-area: temperature-unit;
    }
    dl dt:nth-of-type(3) {
        grid-area: speed;
    }
    dl dd:nth-of-type(3) {
        grid-area: speed-unit;
    }
}


header.svelte-1h9jzvv{display:flex;flex-direction:column;align-items:center;box-shadow:0 2px 10px -4px hsla(180, 60%, 0%, 0.1)}canvas.svelte-1h9jzvv{display:block}h1.svelte-1h9jzvv{padding:2rem;color:hsl(210, 25%, 85%)}mark.svelte-1h9jzvv{font-size:5rem;border-bottom:2px solid hsl(210, 25%, 85%);background:none;color:inherit}
form.svelte-8vkqk3{background:hsl(215, 95%, 15%);color:hsl(210, 25%, 85%);padding:1.5rem;display:flex;flex-direction:column;align-items:center;max-width:400px;box-shadow:0 2px 10px -4px hsla(180, 60%, 0%, 0.1)}form>*+.svelte-8vkqk3{margin-top:2.5rem}p.svelte-8vkqk3{line-height:1.5}p.svelte-8vkqk3 mark.svelte-8vkqk3{border-bottom:2px solid hsl(210, 25%, 85%);background:none;color:inherit}label.svelte-8vkqk3{width:100%;display:flex;justify-content:center;align-items:center;position:relative}label>*+.svelte-8vkqk3{margin-left:1.25rem}span.svelte-8vkqk3{font-size:1.5rem;font-weight:700;letter-spacing:0.01rem}sub.svelte-8vkqk3{font-size:1.2rem}input[type="number"].svelte-8vkqk3{margin-left:auto;text-align:right;font-family:inherit;color:inherit;width:5rem;height:3rem;padding:0.5rem;font-size:1.2rem;border:none;background:hsla(200, 70%, 55%, 0.2);border-radius:12px;opacity:0.7;outline:none;transition:opacity 0.2s ease-in-out}input[type="number"].svelte-8vkqk3:focus{opacity:1}input[type="checkbox"].svelte-8vkqk3{color:inherit;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:64px;opacity:0}input[type="checkbox"]+svg.svelte-8vkqk3{opacity:0.7;fill:hsla(200, 70%, 55%, 0.2);transition:opacity 0.2s ease-in-out}input[type="checkbox"]:focus+svg.svelte-8vkqk3,input[type="checkbox"]:active+svg.svelte-8vkqk3{opacity:1}input[type="checkbox"]+svg.svelte-8vkqk3{display:block;width:64px;height:auto}input[type="checkbox"]+svg.svelte-8vkqk3 .translate.svelte-8vkqk3{transition:transform 0.5s ease-in-out}input[type="checkbox"]:checked+svg.svelte-8vkqk3 .translate.svelte-8vkqk3{transition:transform 0.25s ease-in-out;transform:translate(0px)}button.svelte-8vkqk3{outline:none;border:none;background:hsl(180, 60%, 85%);color:hsl(210, 25%, 0%);padding:1rem;border-radius:10px;font-family:inherit;font-size:1.2rem;letter-spacing:0.015rem;text-transform:uppercase;filter:drop-shadow(0px 5px hsl(180, 60%, 50%));transition:all 0.2s ease-in-out}button.svelte-8vkqk3:hover,button.svelte-8vkqk3:focus{transform:translateY(2px);filter:drop-shadow(0px 3px hsl(180, 60%, 50%))}button.svelte-8vkqk3:active{transform:translateY(5px);filter:drop-shadow(0px 0px hsl(180, 60%, 50%))}
dl.svelte-156wclz{box-shadow:0 2px 10px -4px hsla(180, 60%, 0%, 0.1);text-align:right;box-shadow:0 1px 10px -5px hsla(220, 20%, 2%, 0.2);padding:1.5rem 3rem;font-weight:700;text-align:center;color:hsl(180, 60%, 85%)}dt.svelte-156wclz{font-size:7rem}dt.svelte-156wclz:nth-of-type(n + 2){margin-top:1rem;font-size:2.5rem}dd.svelte-156wclz{margin-left:0.75rem;color:hsl(180, 60%, 50%);font-size:2rem;text-transform:uppercase}



#article {
    padding: 5% 10% 1%;
    color: white;
}


a {
    color:yellow;
}