h1{
    text-align: center;
    font-size: 300%;
    font-family: monospace;
    color: #a855f7;
    margin: 1rem;
}
body{
    background-color: #121212;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}  
.question {
    font-style: italic;
    font-family: Arial, Helvetica, sans-serif;
}
.answer{
    color: #8A2BE2;
    font-family: monospace;
    font-size: large;
}
.faq-item{
    width: 50vw;
    min-width: 340px;
    margin: 1rem;
}
.item-question{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    padding: 1rem;
    background-color: #1e1a24;
    color: #4ade80;
    cursor: pointer;
}
.arrow-icon {
    transition: transform 0.3s ease;
    display: inline-block;
}
.answer-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
    overflow: hidden;
    background-color: #3d364a;
}
.item-answer{
    min-height: 0;
    color: #e2e8f0;
    padding: 0 1rem;
    transition: padding 0.3s ease;
}
.show-answer .answer-wrapper {
    grid-template-rows: 1fr;
}
.show-answer .item-answer {
    padding: 1rem;
}
.show-answer .arrow-icon {
    transform: rotate(180deg);
}