body {
    font-size: 20px;
    color: #333;
    width:100%;
}
.background {
    /* background from magicpatter.design */
    background-color: #e5e5f7;
    opacity: 0.1;
    background: radial-gradient(circle, transparent 20%, #e5e5f7 20%, #e5e5f7 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #e5e5f7 20%, #e5e5f7 80%, transparent 80%, transparent) 100px 100px, linear-gradient(#333 8px, transparent 8px) 0 -4px, linear-gradient(90deg, #333 8px, #e5e5f7 8px) -4px 0;
    background-size: 200px 200px, 200px 200px, 100px 100px, 100px 100px;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    position:absolute;
    z-index: -1;
}

.main-body {
    padding:1rem;
    max-width:800px;
    box-sizing:border-box;
}

h1 {
    font-size: 5rem;
    line-height: 5.8rem;
    margin-bottom: 0.5rem;
}

h2 {
    font-size: 3rem;
    line-height: 3rem;
    max-width: 75%;
}

p {
    max-width:75%;
    line-height:2rem;
    padding:1rem 0 0;
}

p .highlight {
    background: rgba(0,0,0,0.8);
    color: #FFF;
    padding:0.1rem;
    display:inline-block;
    box-sizing:border-box;
    margin:2px;
}

.ibot-prompt-keyword {
    cursor:help;
    border:1px solid #333;
    border-radius: 1rem 0;
}
.ibot-prompt-keyword:hover {
    border:1px solid #666;
}

.bottom-separator {
    border-bottom: 1px solid blue;
    padding-bottom:1rem;
}

a.learn-more {
    text-decoration: none;
    padding: 0.5rem;
    border:1px solid blue;
    border-radius: 1rem 0;
    box-sizing:border-box;
    font-weight:bold;
    display:inline-block;
}
.hide-i-bot .i-bot {
    opacity:0;
}

.i-bot {
    position:absolute;
    bottom:1rem;
    right:1rem;
    font-size:2rem;
    transition: opacity 0.5s ease-in 0.1s;
}

.i-bot-prompt {
    position:absolute;
    bottom:2rem;
    right:4rem;
    transition: opacity 0.5s ease-in 0.2s;
    font-size:0.7rem;
    padding:0.5rem;
    border:1px solid;
    border-radius:1rem 1rem 0 1rem;
    max-width: 300px;
}

.i-bot-prompt-topic {
    padding-left:1.5rem;
    padding-bottom:0.5rem;
    border-bottom:1px solid #333;
    margin-bottom:0.5rem;
   
}

.i-bot-prompt-topic::before {
    content:"🤖";
    margin-left:-1.5rem;
}

.i-bot-prompt input {
    border-width: 0 0 1px 0;
    width:100%;
    background-color:rgba(177, 175, 175, 0.8);
}

.community-quote {
    display:block;
    color:#666;
    font-style:italic;
    padding: 0.25rem 0.5rem;
}
.community-quote::before {
    content:"📢";
    margin-left:-2rem;
    font-style:normal;
}

@media (max-width: 550px) {
    body {
        text-align: center;
    }
    h1 {
        font-size:3rem;
        line-height:3rem;
    }
    h2 {
        font-size: 2rem;
        line-height: 2rem;
    }
    h2, p, .main-body {
        max-width:100%;
        width:100%;
    }
    p {
        line-height: 2rem;
    }
}


@media (max-width: 450px) {
    body {
        text-align: center;
        font-size:18px;
    }
    p {
        line-height: 1rem;
    }
}