* {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
    text-align: center;
    background-color: rgba(76, 131, 100, 1);
    box-sizing: border-box;
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 10px 0px;
}

h1 {
    font-size: 2.5rem;
    color: white;
}

section{
    display: flex;
    flex-direction: column;
}

button, input[type=submit] {
    width: 10rem;
    height: 4rem;
    margin: 0.5rem;
    color: #f6f1db;
    background-color: rgba(200, 110, 21, 0.692);
    border: solid 2px rgb(200, 110, 21);
    border-radius: 5px;
    box-shadow: 2px 5px 1px rgba(200, 110, 21, 0.912);
    font-size: 1.2rem;
}

button:hover, input[type=submit]:hover {
    position: relative;
    top: 4px;
    box-shadow: 1px 1px 1px rgba(200, 110, 21, 0.912);
}

#submitForm legend {
    margin: 1rem auto;
    font-size: 1.7rem;
    color: rgb(56, 98, 74);
    width: 75vw;
}
#submitForm label {
    font-size: 1.5rem;
    padding: 1rem;
}
#submitForm > div{
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    color: rgb(56, 98, 74);
}

#backgroundContainer, #favoriteMessageBoard, #removeMessageBoard {
    display: flex;
    flex-direction: column;
    background-image: url(../image/zenMobile.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 2rem;
}
#removeMessageBoard {
    align-items: center;
    justify-content: center;
}
.allButtonsContainer {
    display: flex;
    align-items: start;
    justify-content: center;
}

#submitMessage {
    margin: 1rem;
    color: rgb(56, 98, 74);
    background-color:#f6f1db;
    padding: 5px;
    border: solid 1px #f6f1dbbe;
    border-radius: 5px;
    box-shadow: 2px 3px 1px #f6f1dbbe;
}
#submitMessage:hover {
    position: relative;
    top: 2px;
    box-shadow: 1px 1px 1px #f6f1dbbe;
}


.buttonAddFavoriteAndReset {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

}

.questionMark, .answer, #createNewMessage {
    background-color: #498364ed;
    max-width: 75vw;
    min-height: 40vw;
    margin: 5px auto;
    border-radius: 15px;
    justify-content: center;
    align-items: center;
}

.questionMark {
    display: flex;/*change*/
}
.questionMark p {
    font-size: 7rem;
    color: #f6f1db;
}

.answer {
    display: none;
}
.answer p {
    font-size: 2rem;
    color: #f6f1db;
}

#createNewMessage {
    display: none; 
    flex-direction: column;
    color: #f6f1db;
    font-size: 2rem;
}
#createNewMessage label {
    font-size: 1.7rem;
    margin: 1rem;
}
#createNewMessage select {
    background-color: #f6f1db;
    border-radius: 5px;
    color: rgb(56, 98, 74);
    margin: 2rem;
    font-size: 1.5rem;
}
#submitMessage {
    font-size: 1.2rem;
}

#addMessage {
    width: 45vw;
    height: 20vw;
    background-color: #f6f1db;
    border: solid 2px #f7eec4;
    border-radius: 5px;
    color: rgb(56, 98, 74);
    font-size: 1.2rem;
}

#favoriteMessageBoard {
    padding-top: 50px;
    justify-content: center;
    align-items: center;
    min-height: 300px;
}
.favoriteSentences, .divContainer {
    margin: 1rem;
    padding: 1rem;
    font-size: 2rem;
    background-color: #498364ed;
    color: white;
    max-width: 70vw;
    border-radius: 15px;
}

@media screen and (min-width: 780px) {
    #backgroundContainer {
        background-image: url(../image/zen.jpg);
        padding-bottom: 2rem;
    }
    .questionMark, .answer, #createNewMessage {
        max-width: 50vw;
        min-height: 20vw;
    }
}