html {
    font-family: 'Inter', sans-serif;
    font-weight: normal;
    font-size: 1em;
    line-height: 1.5;
    color: #120097;
}

body {
    margin: 0;
}

p {
    margin-top: 1em;
}

nav .libcom-nav {
    display: flex;
    list-style: none;
    align-items: center;
    padding-left: 0;
}

nav.desktop {
    justify-content: center;
}

.libcom-nav {
    margin: 0;
}

.mobile a:hover,
.libcom-nav li.selected>a,
.libcom-nav li a:hover {
    color: #766bc9;
}
.mobile a,
.libcom-nav li a {
    text-decoration: none;
    color: #120097;
    text-transform: uppercase;
}
.libcom-nav li {
    text-align: center;
}

.libcom-content {
    background-color: #eeede3;
}

/* desktop */
@media only screen and (min-width:661px) {
    .libcom-content {
        padding: 2em 8em;
        min-height: 30em;
    }
    .libcom-nav li {
        padding: 1em 2em 0.8em;
    }
    .slider embed {
        width: 600;
        height: 50;
    }
    nav.desktop {
        display: flex;
    }
    nav.mobile {
        display: none;
    }
}
/* phone */
@media only screen and (max-width:660px) {
    h1 {
        font-size: 130%;
    }
    nav.mobile {
        display: block;
    }
    nav.desktop {
        display: none;
    }
    .libcom-content {
        padding: 2em 1em;
        min-height: 23em;
    }
    .libcom-nav li {
        padding: 1em 0.5em 0.8em;
    }
    .slider embed {
        width: 100%;
        height: 50;
    }
    .toggle object {
        width: 420;
        height: 420;
    }
    ol {
        padding-left: 20px;
    }
}

/* temp */
.mobile {
    overflow: hidden;
    position: relative;
    height: 2em;
}
.mobile.expanded {
    height: 12em;
}
.mobile .links {
    display: none;
}
.mobile a {
    display: block;
    padding: 0.4em 3.3em;
}
.mobile a.icon {
    background-color: #120097;
    color: #fff;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.5em 0.8em 0.5em 0.5em;
}
.mobile a.icon:hover {
    color: #120097;
    background-color: #eeede3;
}
/* temp */

.libcom-content a {
    color: #120097;
    text-decoration-style: dashed;
}
.libcom-content a:hover {
    text-decoration-style: solid;
}

footer {
    margin: 1em 2em 1.5em;
}

h1.parolen {
    margin-bottom: 0;
}
.parolen-date {
    font-style: italic;
    font-size: 12pt;
}
.parolen-arg:hover {
    background-color: #f8f8f1;
}

.calculate {
    padding-top: 2em;
}
.calculate button {
    color: #FFF;
    background-color: #120097;
    border: 0;
    padding: 0.7em 1em;
    font-size: 18px;
}
.calculate button:hover {
    cursor: pointer;
    background-color: #766bc9;   
}
.calculate .toggle {
    display: none;
}
.toggle p {
    margin-bottom: 0;
}

.info {
    background-color: #f8f8f1;
    border-color: #bbb689;
    border-style: solid;
    border-width: 1px;
    padding: 0.6em 1.5em;
}
.info .label {
    color: #bbb689;
    font-size: 1.2em;
    font-weight: bolder;
}
.info .content:hover,
.info .label:hover {
    cursor: pointer;
}
.info .content {
    display: none;
    opacity: 0;
    transition: opacity 1s;
}

.libcom-blog h1 {
    margin-bottom: 0;
}

.libcom-blog .tagline {
    font-size: 14px;
}

.tagline > span {
    font-style: italic;
}