:root {
    --clr-neon: hsl(317 100% 54%);
    --clr-bg: hsl(323 21% 16%);
}

@font-face {
    font-family: Libre;
    src: url('./LibreBaskerville-Regular.ttf') format('truetype');
}

@font-face {
    font-family: Lavish;
    src: url('./LavishlyYours-Regular.ttf') format('truetype');
}

body {
    
    color: floralwhite;
    background: var(--clr-bg);
    font-family: Libre;
    font-size: larger;
    line-height: 140%;
    text-align: center;
    
}

h1{
    font-family: Lavish;
    font-weight: 200;
    font-size: 50px;
    line-height: 120%;
}

.hidden {
    display: none;
}
.btn{
    border-radius: 0.25em;
    box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
    background: var(--clr-bg);
    font-family: Libre;
    padding: 10px;
    margin: 1em;
    background: hsla(317,100%,54%,0.2);
    cursor: pointer;
}
.btn:hover,button:active{
    background: hsla(317,100%,54%,0.7);
    color: var(--clr-bg);
    box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 1.5em 0 var(--clr-neon);
    transition: 400ms;
}
.input-field {
    display: block;
    margin: 10px auto;
    padding: 10px;
    width: 80%;
    font-size: 16px;
}
.navbuttons{
        display: flex;
        justify-content: right;
        
        margin-top:0px;
}

#login-section{
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}

#email-login{
    padding-left: 50px;
    padding-right: 50px;
}

a{
    text-decoration: none;
    color: var(--clr-neon);
}

.optionbutton{
    background-color: rgb(255, 127, 80);
    display: block;
    width: 80%;
    max-width: 800px;
    color: black;
    margin-left: auto;
    margin-right: auto;

}
#chapter-options{
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
}

.neon{
    color: var(--clr-neon);
    border: var(--clr-neon) 0.125em solid;

    color: var(--clr-neon);
}
  
input{
    margin: 0.3em;
    padding: 0.5em;
    border-radius: 0.25em;
    box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
    background: var(--clr-bg);
    font-family: Libre;
    width: 100%;
    color: var(--clr-neon);
    border: var(--clr-neon) 0.125em solid;
}

#options-text{
    padding: 20px;
    font-weight: bolder;
}

#chapter-content{
    padding-bottom: 30px;
    width: 80%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    text-align-last: none;
    hyphens: auto;
}
.schnoerkel{
    width:200px;
    padding-bottom: 20px;
}