header{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* margin: 0.5em 1em; */
    margin-top: 20px;
}

#main-app{
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.button .get-started-button{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.ui.attached.buttons .button {
    margin: 0px 5px;
}

.ui.attached.segment {
    /* padding: 1em; */
    border: none;
}

#main-app{
    /* background-color: blue; */
    /* border: 0.5px solid rgba(34,36,38,.15); */
    
}

#step0Box.ui.segment,
#step1Box.ui.segment,
#step2Box.ui.segment,
#step3Box.ui.segment,
#step4Box.ui.segment,
#step5Box.ui.segment,
#step6Box.ui.segment,
#step7Box.ui.segment {
    padding: 0;
}

.ui.styled.accordion .accordion .title, .ui.styled.accordion .title {
    color: rgb(0 0 0 / 55%);
    background-color: #545b610a;
}

.ui.steps .step {
    flex-wrap: nowrap;
}

.ui.segment {
    position:relative;
    box-shadow: 0 0px 0px 0 rgb(34 36 38 / 15%);
    margin: none;
    padding: none;
    border-radius: 0;
    border: 0px solid rgba(34,36,38,.15);
}
.ui.attached.segment {
  padding: 1em;
}
.button-container {
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0px; 
/* margin-bottom: 15px; */
}

.ui.buttons {
display: flex;
justify-content: center;
margin: 0px 10px; 
}

.ui.button {
    margin: 0 10px; /* Add some space between the buttons */
}

#age_groups{
    /* margin-top: 20px; */
    padding: 1rem;
}

.ui.segment:first-child{
    margin: inherit;
}

#tryitouter{
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 10px;
    padding: 1rem;
    width: 65%;
}

#tryit{
    /* display: flex; */
    /* justify-content: center; */
    margin-top: 10px;
    padding: 1rem;
    width: 80%;
    border: 1px solid rgba(34,36,38,.15);
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgb(100 102 106 / 10%), 0 8px 16px 0 rgb(100 102 106 / 23%);
}

form{
    padding: 20px;
}

.category {
    font-weight: bold;
    letter-spacing: 1pt;
    text-transform: uppercase;
}

.cat_amount{
    color: #1C7EC8;
    font-size: large;
}

#resources, #calculator{
    /* margin-top: 10px; */
    padding: 1rem;
}

.form {
    text-align: left;
}

footer{
    padding: 1rem;
    color: gray;
}