* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    font-family: 'IBM Plex Sans', sans-serif;
}


body{
    background-color: rgb(246, 248, 255);
    color: #141924;
}

main {
    max-width: 850px;
    margin: 0 auto;
    transition: 1s ease-in-out margin-top;
    margin-top: 25vh;
}
.main-compact {
    margin-top: 15vh;
}

.helix-title {
    margin-top: 3rem;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;

}

.helix-intro {
    text-align: center;
    margin-bottom: 4rem;
    margin-top: 1rem;
}

.helix-tips {
    display: flex;
    justify-content: center;
    align-items: center;

}

.tips-fixed {
    font-weight: 500;
    margin-right: 1ch;
}

.tips-dynamic {
    font-style: italic;
    opacity: .8;
}

.helix-bar {
    border: 3px solid rgb(1, 83, 207);
    border-radius: 99999px;
    background-color: #06f;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}
#hx-input {
    width: 100%;
    font-size: 1.2rem;
    background-color: transparent;
    border: 0px;
    outline: 0px;
    color: white;
}
.hx-ask {
    border: 2px solid white;
    color: white;
    border-radius: 99999px;
    padding: .5rem;
    height: 100%;
    text-align: center;
    font-weight: 600;

    padding-left: 1.2rem;
    padding-right: 1.2rem;
    cursor: pointer;

    transition: 0.2s ease all;
}

.hx-ask:hover {
    border: 2px solid #06f;
    background-color: white;
    color: #06f;
}

.helix-answers {
    margin-top: 4rem;
}



.hx-qa-obj {
    border: 2px solid #666;
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    background-color: transparent;
    color: black;
}
.hx-qa-current {
    background-color: #111;
    color: white;
    border: 2px solid #666;
}
.hx-qa-question {
    font-weight: 650;
    font-size: 1rem;
}

.hx-qa-answer {
    font-size: .9rem;
    margin-top: 1rem;
}

.dn {
    display: none !important;
}

.hx-current > .hx-qa-obj {
    background-color: #111;
    color: white;
    border: 2px solid #666;
}

nav {
    display: flex;
    justify-content: space-between;
    margin-left: 3rem;
    margin-right: 3rem;
    margin-top: 2rem;
}

.nav-title {
    font-size: 1.2rem;
}

.nav-links > a {
    color: #222;
    text-decoration: none;
    transition: .2s ease all;
    border-bottom: 1px solid transparent;
}

.nav-links > a:hover {
    border-bottom: 1px solid #222;
  
}