.container{
    margin-top: 90px;
    padding: 0px 10%;
}

.main{
    display: flex;
    flex-direction: row;
}

.content{
    display: flex;
    flex-direction: column;
    width: 75%;
    border-right: 1px var(--offwhiteshadow);
    border-style: none solid none none;
}

.masthead{
    background-color: var(--blue);
}

.mastheadtext{
    padding: 40px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--offwhite);
}

.sidebar{
    padding: 40px 40px ;
    display: flex;
    flex-direction: column;
    gap: 60px;
    width: 25%;
}

.submission{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

input[type=text] {
    display: flex;
    border: 1px solid var(--offwhiteshadow);

}

.submissiontitle{
    display: flex;
    padding: 20px;
    background-color: white;
    border-radius: 4px 4px 0px 0px;
    color: var(--brown);
}

.submissionbody{
    display: flex;
    padding: 20px;
    background-color: white;
    border-radius: 0px 0px 4px 4px;
    color: var(--brown);
}

.submitbutton{
    display: flex;
    padding: 10px 20px;
    background-color: var(--blue);
    border-radius: 4px;
    color: var(--offwhite);
    border-style: solid ;
    border: 1px var(--blue);

}

.selectcatergories{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.categoriesparent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.newsletter{
    width: 80%;
    padding: 60px 10%;
    overflow: hidden;
    background-color: var(--brown);
    bottom: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 1200px;
    gap: 40px;
}

.newslettersubmission{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.newsletterform{
    display: flex;
    flex-direction: column;
    gap:20px;
    max-width: 50%;
}

.submitnewsletter{
    display: flex;
    padding: 20px;
    background-color: white;
    border-radius: 4px;
    color: var(--brown);
}

.card-anchor {
    text-decoration: none;
    color: inherit;
}

.card-anchor:hover {
    text-decoration: none;
    color: inherit;
}

.submissioncategory {
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    border: 1px solid var(--offwhiteshadow);
}

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {

    .container{
        margin-top: 90px;
        padding: 0px 5%;
    }
    .main{
        display: flex;
        flex-direction: column;
    }
    .content{
        display: flex;
        flex-direction: column;
        width: 100%;
        border-right: 1px var(--offwhiteshadow);
        border-style: none;
    }
    .sidebar{
        padding: 40px 40px ;
        display: flex;
        flex-direction: column;
        gap: 60px;
        width: 90%;
    }

}