html {
    scroll-behavior: smooth;
}

nav.navbar {
    background-color: #17191d;
}

nav.breadcrumb > ul > li > a {
    color: white;
}

aside.menu {
    border-right-style: double;
    border-right-width: 2px;
    border-right-color: #1f2229;
    border-top-style: double;
    border-top-width: 2px;
    border-top-color: #1f2229;
    border-radius: 4px;
}

.forecast {
    color: #abb1bf;
    margin: 0;
    padding: 0.3rem;
    background-color: #14161a;
    border-left-style: double;
    border-left-width: 2px;
    border-left-color: #1f2229;
    border-top-style: double;
    border-top-width: 2px;
    border-top-color: #1f2229;
    border-radius: 4px;
}

.forecast > h1,
.day-forecast {
    font-size: 16px;
    
    margin: 0.5rem;
    padding: 0.3rem;
    font-size: 1.2rem;
}

.day-forecast {
    background: right/contain content-box border-box no-repeat #1f2229;
}

.day-forecast > h2,
.day-forecast > p {
    text-align: right;
    margin: 0.2rem;
    font-size: 1rem;
}


table a {
    color: inherit; 
    text-decoration: underline; 
    text-decoration-color: currentColor;
}


:root {
    /* Changes the primary theme color to purple using primitives */
    /* see also https://codepen.io/claviska/full/QWveRgL */
    --sl-color-primary-50: rgb(234 254 247);
    --sl-color-primary-100: rgb(177 251 227);
    --sl-color-primary-200: rgb(95 247 196);
    --sl-color-primary-300: rgb(33 234 167);
    --sl-color-primary-400: rgb(29 211 150);
    --sl-color-primary-500: rgb(25 181 129);
    --sl-color-primary-600: #d3fdef;
    --sl-color-primary-700: rgb(17 123 88);
    --sl-color-primary-800: rgb(14 102 72);
    --sl-color-primary-900: rgb(10 72 52);
    --sl-color-primary-950: rgb(6 45 32);

    --sl-font-mono: "Ubuntu Mono", SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    --sl-font-sans: Ubuntu, Inter, Roboto, Helvetica, Arial, sans-serif;
    --sl-font-serif: Georgia, 'Times New Roman', serif;

    --bulma-primary-h: 160deg;
    --bulma-primary-s: 91%;
    --bulma-primary-l: 55%;
    --bulma-link-h: 160deg;
    --bulma-link-s: 91%;
    --bulma-link-l: 91%;
    --bulma-info-h: 160deg;
    --bulma-info-s: 91%;
    --bulma-info-l: 91%;
    --bulma-family-primary: Ubuntu, Helvetica Neue,Helvetica,Arial,sans-serif;
    --bulma-family-secondary: Spectral;
}

.text {
    color:white;
    font-size: 17px;
    font-family: Spectral;
}

.text a[href]{
    color: white;
    text-decoration: underline;
}

input[type=number] {
    text-align:right;
}

input:invalid {
    color: #ff7444;
    border-color: #ff7444;
}

details {
    border-left: 2px solid #d3fdef;
    border-radius: 4px;
    background-color: #1f2229;
    padding: 20px 24px 20px 24px;
    margin: 1em 0em 2em 0em;
}

summary {
    font-style: italic;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
}

details[open] {
    padding: 20px 24px 20px 24px;
}

details[open] summary {
    border-bottom: 1px solid #d3fdef;
    margin-bottom: 0.5em;
}

mark {
    background-color: #d3fdef;
    animation: mymove 5s infinite;
}
@keyframes mymove {
30% {
    background-color: #22f4ae;
}
}

.logo {
    animation-name: blend;
    animation-duration: 10s
  }

@keyframes blend {
  from {opacity: 0}
  to {opacity: 1}
}