/*Nav Bar element*/

nav{
    background-color: var(--primary-color);
    border:solid 2px var(--primary-color);
    border-bottom-width:1px;
    display:flex;
    flex-direction: column-reverse;
    flex-wrap:wrap;
}
nav  header{
    background-color: var(--primary-color);
    padding:1rem 2rem 2rem;
    border-top: solid 1px var(--light-offset);
}

nav  header  h1{
    color:var(--light-offset);
    border-bottom: none; /*gets rid of the green border that's on every h1*/
}

/*get a hamburger menu in this thing!*/

.collapsible-menu label{
    font-family:var(--header-font);
    font-size:1.25rem;
    display:block;
    cursor:pointer;
    background:url(menu-icon.png) no-repeat left center;
    padding:1rem 0 1rem 3rem;
    color:var(--light-offset);
}

input#menu{
    display:none;
}

input:checked +label{
    background-image:url(close-icon-01.png);
}

.menu-content{
    max-height:0;
    overflow:hidden;
    margin:0;
}

ul.menu-content:last-child{
    margin:0;
}

input:checked ~ .menu-content{
    max-height:100%;
}

input:checked +label{
    border-bottom:1px solid var(--light-offset);
}

.menu-content li{
    border-bottom:solid 1px var(--secondary-color);
    list-style: none;
    text-align: center;
    padding:1rem 0;
    margin:0 2rem;
}

.menu-content li:last-child{
    border-bottom: none;
}



/*styling the menu links*/

.nav-link{
    color:var(--light-offset);
    font-family:var(--para-font);
    font-weight: 700;
    text-decoration: none;
}

.nav-link:hover{
    color:var(--secondary-color);
}

/*the main content & footer*/

main{
    margin:0 2rem;
    margin-bottom: 1rem;
}

footer{
    font-size:.8rem;
    font-family: var(--para-font);
    color:var(--light-offset);
    background-color: var(--primary-color);
    padding:.5rem;
}

/*styling the areas of the form*/

form{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.form-area{
    display:flex;
    flex-wrap: wrap;
    flex-direction: row;
    border-bottom:1px solid var(--secondary-color);
    padding:.5rem 0;
}

.form-area:last-of-type{
    border:none;
}

.form-sub-area{
    display:flex;
    flex-direction: column;
    width:50%;
}

output{
    line-height: 3rem; /*this adequately spaces the output from the label on the page*/
}