#headline{
    font-weight: bolder;
}
#App {
    justify-content: center;
    height: 90vh;
    display: grid;
  }
#menu{
    top:1vh;
    font-size: 7vh;
}
#firstline{
    font-style: italic;
    height: 9vh;
    font-size: 3vh;
    display: flex;
  }
#adv{
    float: left;
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.card{
    border-radius: 35px;;
    border-style: groove;
    width: 25vw!important;
    height: 15vh;
    display: inline-block;
    border: 1px solid #ccc;
    padding: 10px;
    flex: 1;
}
.card h2{
    position: relative;
    top: 0.5vh;
    left: 0.5vw;
}
.card p{
    font-size: 1.9vh;
}
:root{
    --sWidth:50vw;
    
}
#productInput{
    width: var(--sWidth);
}
#usageInput{
    width: var(--sWidth);
}
#dropdown{
    border-style: ridge;
    width: var(--sWidth);
    height: 8vh;
    font-size: 2vh;
}
#output{
    resize: none;
    border-style:ridge;
    width: var(--sWidth);
    height: 40vh;
}
#generate{
display: block;
height: 15vh;
width: var(--sWidth);
font-size: 5vh;
border-radius: 5vh;
}
#headline{
    display: block;
}
#themeInput{
border-style: ridge;
border-radius: 2vh;
width: var(--sWidth);
height: 15vh;
font-size: 3.5vh;
}
#faq{
    height: auto;
    width: auto;
}
.faqcard{
    border-style: groove;
    display: list-item;
}
.faqcard .flip{
    text-align: left;
    font-style: oblique;
    font-weight: bolder;
}
#lands{
    width: 100vw;
}

.faqcard .panel{
    display: none;
    width: var(--sWidth);
}
#headpart{
    height: auto;
    display: grid;
}
#features{
    display: flex;
}