* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
}

html body {
	height: 100%;
	margin: 0;
	background-color: snow;
}


img {
	width: 100%;
	height: 100%;
}

.logoFront {
	max-width: 100%;
	text-align: center;

}

.logoSend {
	max-width: 100%;
	text-align: center;
	height: 0;
}

#image-logoFront {
	width: 461px;
	height: 183px;
	display: inline-block;/
}

.mainText {
	text-align: center;
	margin-top: 3rem;
}

.block {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: 8rem;
	gap: 7rem;
}

.blockL {
	border: 2px solid #1a1a1a;
	border-radius: 10px;
	width: 250px;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f3f3f3;
	color: black;
	position: relative;
	font-weight: bold;
}

.blockR {
	border: 2px solid #1a1a1a;
	border-radius: 10px;
	width: 250px;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: #f3f3f3;
	color: black;
	font-weight: bold;
}

#paperPlane {
	width: 83px;
	height: 87px;
	position: absolute;
	top: -1%;
	left: 64%;
}

#receiveMail {
	width: 70px;
	height: 70px;
	position: absolute;
	top: 2%;
	left: 68%;
}

@media (max-width: 625px) {


	/* .mainText {
    width: 40rem;
  } */

	.block {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.frontContainer {
		min-width: 178%;
	}
}

/* sendMessage Page */

.Container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 15rem;
	position: relative;
}

.sendContainer {
	width: 600px;
	height: 450px;
	border: 2px solid #1e1d19;
	border-radius: 12px;
	background-color: ghostwhite;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-auto-columns: 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas:
		"nameBox nameBox nameBox"
		"message message message";
}

.nameBox {
	grid-area: nameBox;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width: 95%;
	height: 100%;
}

.message {
	grid-area: message;
	gap: 10%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}


.container {

	margin: 0;
}

.messageTitle {
	position: absolute;
	left: 38%;
	top: 5%;
	color: #3f3f3f;
}

input {
	background-color: #fdfdff;
	border: 2px solid #555247;
	border-radius: 8px;
	text-align: center;
	width: 39%;
	height: 23%;
	color: #202020;
}

input[type="submit"] {
	width: 100%;
	height: 160%;
	position: relative;
	left: 100%;
	top: -226%;
	cursor: pointer;
	font-weight: bold;
	font-size: 17px;
	color: #202020;
}

::placeholder {
	color: #202020;
}

.sidebar {
	position: fixed;
	left: 0;
	width: 150px;
	height: 100%;
	background-color: #3f3f3f;
}

.inner_sidebar {
	text-align: center;
}

.contentSidebar {
	margin-top: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6rem;
}

.buttonSidebar {
	width: 100px;
	height: 100px;
	background-color: #f3f3f3;
	display: flex;
	align-items: center;
	border-radius: 8px;
	color: black;
}

#home2-image {
	width: 60px;
	margin-top: 0.5rem;
}

@media (max-width: 875px) {

	.sidebar {
		display: none;
	}
}

@media (max-width: 625px) {


	.sendContainer {
		width: 30rem;

	}
}

/* seeMessage Page */

.textMessage {
	text-align: center;
	margin-top: 8rem;
	padding-bottom: 2rem;
}

#home-image {
	width: 60px;
	margin-left: 2rem;
	margin-top: 0.5rem;
}

.seeMessageContainer {
	background-color: white;
}

.messageFieldContainer {
	min-height: 90vh;
	background-color: #f3f3f3;
	padding-bottom: 2rem;
}

.messageField {
	margin-bottom: 2rem;
	background-color: #f3f3f3;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.header {
	width: 100%;
	height: 80px;
	display: block;
	background-color: #3f3f3f;
	position: fixed;
	z-index: 1;
}

._innder_header_ {
	width: 1000px;
	height: 100%;
	display: block;
	margin: 0 auto;
}

.messageBox {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 0px 0px;
	grid-auto-flow: row;
	grid-template-areas:
		"Firstname Lastname Date"
		"Message Message ."
		" . . Photo";
	width: 56rem;
	height: 20rem;
	background: white;
	border-radius: 8px;
	word-wrap: break-word;
	box-shadow: 1px 1px 3px #1a1a1a, -2px -1px 7px #242424;
}

.Photo {
	grid-area: Photo;
	width: 12rem;
	height: 12rem;
	margin-left: 2rem;
	margin-top: -7rem;
}

.Firstname {
	grid-area: Firstname;
	margin-top: 2rem;
	margin-left: 1rem;
	font-weight: 600;
	font-size: 1.7rem;
}

.Lastname {
	grid-area: Lastname;
	margin-top: 2rem;
	margin-left: 1rem;
	font-weight: 600;
	font-size: 1.7rem;
}

.Message {
	grid-area: Message;
	margin-top: 1rem;
	font-size: normal;
	margin-left: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-size: large;
}

.Date {
	grid-area: Date;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	font-size: 1.2rem;
}


.messageBox {
	margin: 0;
}

.messageBoxContainer {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 6rem;
	margin-top: 2rem;
	justify-content: center;
	width: 85%;
}

.sendMessageContainer {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.send {
	width: 350px;
	height: 300px;
	background-color: snow;
	border-radius: 8px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #f6f6f6;
	font-size: large;
}

.bericht {
	font-size: smaller;
	word-wrap: break-word;
}

.go-Back {
	background: #ececec;
	width: 265px;
	height: 50px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 5rem;
	color: black;
}

@media (max-width: 725px) {
	.messageField {
		position: absolute;
		left: 0;
	}
}