body {
    font-family: 'Lora', serif;
    text-align: center;
    height: 100vh;
    width: 100vw;
    background-color: black;
    color: white;
    margin: 0;
}

#container {
    min-height: 100%;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1 {
    font-weight: bold; font-variant: small-caps;
    font-size: 2em;
    margin: 15px;
}

h1.name {
    font-size: 3em;
    margin: 15px;
    line-height: 1em;
    animation-duration: .5s;
    animation-name: fadeInName;
}

#vocalizeicon {
    font-size: .3em;
    display: none;
    margin-right: -1em;
}

#vocalizeicon:hover {
    cursor: pointer;
}

#dictation {
    display: none;
}

#megaphone {
    fill-opacity: 1;
    fill: #777;
}

@keyframes fadeInName {
    from {color: black;}
    to {color:inherit}
}

#content {
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-grow: 1;
    flex-direction: column;
}

h2 {
    font-weight: normal;
    margin: 10px;
}

h3 {
    font-weight: normal;
}

p {
    font-style: italic;
    color: grey;
    margin: 1em;
}

ol {
    padding: 0;
}

ul {
    padding: 0;
}

.nav li {
    display: inline;
    padding: 5vw;
}

a {
    color: white;
    margin: 10px;
}

.vocalize:hover {
    color: white;
}

.judgeForm {
    margin-bottom: 25px;
}

.judgeForm input {
    font-size: 25px;
    width: 20%;
    max-width: 150px;
    min-width: 3em;
    height: 1.7em;
    border: 0;
    cursor: pointer;
    flex-grow: 1;
    background-color: black;
    border: 1px solid white;
    border-radius: 20px;
}

.judgeForm input:hover {
    background-color: white;
}

.judgeForm label {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    white-space: normal;
    min-width: 3em;
    max-width: 150px;
    width: 20%;
    font-size: .8em;
    color: #ccc;
    hyphens: manual;
}

.judgeForm>label>input {
    width: 100%;
    min-width: 2em;
}

.center {
    width: 100%;
    align-items: center;
}

#footer {
    font-weight: 100;
    font-size: 10pt;
    font-style: italic;
    margin-bottom: 10px;
}

#footer a {
    color: grey;
    margin: 10px;
}

.message {
    animation-duration: 1s;
    animation-name: msg;
}

@keyframes msg {
    from {background: grey;}
    to {background: black;}
}

.leaderItem {
    margin: 15px;
}

.leaderItem a {
    text-decoration: none;
    margin: 0;
}

.undecoratedList {
}

.undecoratedList li {
    list-style-type: none;
}

.history {
    display: inline;
}

.history li {
    list-style-type: none;
}

.inlineForm button {
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.inlineForm {
    display: inline;
    margin: 0;
    padding: 0;
}

.toplineForm button {
    font-size: 1em;
}

.poolItem {
    display: inline;
    line-height: 2em;
}

.poolItem a {
    text-decoration: none;
}

.pool {
    max-width: 700px;
    margin: 1em;
}

@media (hover: hover) {
    /* fleeting effects */

    .poolItem a {
        animation-duration: 15s;
        animation-name: poolFade;
        color: #333;
    }

    .poolItem a:hover {
        animation-duration: 0.5s;
        animation-name: poolIn;
        color: white;
        background-color: black;
    }

    @keyframes poolIn {
        from {
            color: black;
            background-color: white;
        }
        to {
            color: white;
            background-color: black;
        }
    }

    @keyframes poolFade {
        from {color: white;}
        to {color: #333;}
    }
}


@media only screen and (max-width: 350px) {
    .nav li {
        padding: 3vw;
    }
}

@media only screen and (min-width: 500px) {
    h1 {
        font-size: 50pt;
    }

    h1.name {
        font-size: 75pt;
    }
}

.subNav a {
    margin: 2em;
    font-size: .9em;
    text-decoration: overline;
}

.collectRow {
    display: flex;
    flex-direction: row;
    padding: .1em;
    min-width: 25em;
}

.collectColumn {
    display: flex;
    flex-direction: row;
    flex: 1;
    text-align: left;
    padding-left: 2em;
}

.nameCol {
    flex: 5;
    display: inline;
}

.nameCol a {
    text-decoration: none;
    margin: 0;
}

.burning {
    animation-duration: 1s;
    animation-name: burnInName;
}

@keyframes burnInName {
    from {
        color: black;
        background-color: red;
    }

    to {
        color: white;
        background-color: black;
    }
}

.feedback {
    animation-duration: 1s;
    animation-name: feedbackName;
}

@keyframes feedbackName {
    from {
        color: black;
        background-color: blue;
    }

    to {
        color: white;
        background-color: black;
    }
}

.reverb {
    animation-duration: .5s;
    animation-name: reverbName;
}

@keyframes reverbName {
    from {
        color: black;
        letter-spacing: -.5em;
    }
    to {
        color: white;
        letter-spacing: inherit;
    }
}

.nameCol form {
    display: inline;
}

.stars {
    flex: 2;
    align-items: center;
}

.settingsForm {
    display: flex;
    flex-direction: column;
}

.settingsForm label {
    font-size: .8em;
    color: #ccc;
    margin: 1em;
}

.shareDiv {
    margin: 1em;
}

.flex1 {
    flex: 1;
}

.saveCol {
    flex-direction: row;
    display: flex;
    flex: 1;
    justify-content: space-evenly;
    margin-top: .2em;
    margin-bottom: .2em;
}

.saveCol label {
    font-size: .8em;
    color: #ccc;
    overflow: hidden;
}

.save {
    flex-direction: column;
    display: flex;
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
}

.saveButton {
    cursor: pointer;
    background: none;
    border: none;
    color: white;
    font: inherit;
    font-size: .8em;
    margin: .1em;
    overflow: visible;
    text-decoration: overline;
}

.unsaved {
    color: #444 !important;
    cursor: default;
}

.annotateExamples {
    display: flex;
    flex-direction: row;
    max-width: 40em;
    margin: auto;
    color: #ddd;
    font-size: .9em;
    animation-duration: .5s;
    animation-name: annotateEx;
}

@keyframes annotateEx {
    from {color: black;}
    to {color: #ddd;}
}

.annotateExamples ul {
    width: 40%;
    list-style-type: none;
    margin: auto;
}

.collectionName {
    background: none;
    border-style: solid;
    border-color: black;
    color: inherit;
    font-family: inherit;
    font-style: inherit;
    text-align: center;
    font-size: inherit;
    font-variant: inherit;
    font-weight: 500;
}

.collectionName:hover {
    border-color: gray;
}

.collectionSlogan {
    background: none;
    border-style: solid;
    border-color: black;
    color: grey;
    font-family: inherit;
    font-style: italic;
    text-align: center;
    font-size: inherit;
    font-variant: inherit;
    width: 100%;
}

.collectionSlogan:hover {
    border-color: gray;
}

.wrap {
    overflow-wrap: anywhere;
}

.examine {
    width: 50%;
    max-width: 25em;
    margin: auto;
}

.vibeLink {
    margin: 0;
    margin-left: 5px;
    font-size: .8em;
    font-style: italic;
}

.helpDiv {
    text-align: left;
    max-width: 30em;
    margin: auto;
    color: #bbb;
    line-height: 1.2em;
    font-size: .9em;
}

.helpDiv ul {
    list-style-type: none;
}

.helpDiv>ul>li {
    margin-bottom: 1em;
}

.highlight {
    background: white;
    border-radius: 3px;
    color: black;
    padding: 2px;
}

a:hover {
    background: white;
    border-radius: 3px;
    color: black;
}

#titleAnchor, #lineupAnchor, #rotationAnchor {
    background: none;
    color: white;
}

.board {
    display: inline-block;
    vertical-align: top;
    margin-left: 3em;
    margin-right: 3em;
    text-align: center;
}

.inline {
    display: inline-block;
}