body {
	margin: 0;
	font-family: 'Noto Sans Arabic', sans-serif;
}

header {
	padding: 20px;
	background-color: #333;
	color: #fff;
	text-align: center;
	font-size: 36px;
	line-height: 100%;
}

footer {

	padding-top: 20px;
	padding-bottom: 20px;
	padding-left:5%;
	padding-right:5%;
	background-color: #333;
	color: #fff;
	font-size: 12px;
	text-align: center;
	line-height: 100%;

}

	
#boxes {
	content: "";
	display: flex;
	flex-wrap: wrap; 
	clear: both;
	align-items: stretch;
	font-family: 'Noto Sans Arabic', sans-serif;
}

main {
	
	padding: 1%;
	font-size: 8;
	text-align: center;
	line-height: 100%;
	font-family: 'Noto Sans Arabic', sans-serif;
}


img {
	margin: 0 auto;
	max-width: 100%;
	}

.centered-image {
  display: block;
  margin: 0 auto;
}

.button {
	display: inline-block;
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 0;
	background: linear-gradient(to bottom, #777777, #333333);
	border: none;
	border-radius: 5px;
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	font-family: 'Noto Sans Arabic', sans-serif;
}
.button:hover {
	background: linear-gradient(to bottom, #000000, #000000)
		font-family: 'Noto Sans Arabic', sans-serif;
}

.button:active {
	background: linear-gradient(to bottom, #86b300, #708d00);
	box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
	font-family: 'Noto Sans Arabic', sans-serif;
}

.container {
	display: grid;
	text-align: center;
	grid-template-columns: repeat(4, 50px);
	grid-gap: 5px;
	align-items: center;
	justify-content: center;
	width:100%;
	direction: rtl;
	padding-bottom: 30px;
	padding-top: 30px;
	padding-right: 0%;
	padding-left: 0%;
	font-family: 'Noto Sans Arabic', sans-serif;

}

@media screen and (max-width: 480px) {
  .container div {
    width: 100%;
  }
	
  #boxes {
 	display: flex;
    flex-direction: column;
	font-family: 'Noto Sans Arabic', sans-serif;
  }
  
	#column1, #column2 {
    width: 100%;
  }
	
	.container {
		width: 100%;
		grid-template-columns: repeat(4, 50);
		grid-gap: 5px;
		font-family: 'Noto Sans Arabic', sans-serif;
	}

	div {
		width: 100%; 
		font-family: 'Noto Sans Arabic', sans-serif;
	}


	
}

	
div {
	float: left;
	width: 50%;
	font-family: 'Noto Sans Arabic', sans-serif;
}

.m {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align:center;
}

.topleft, .topright{
  width: 100%;
  height: 5%;
  display:flex;
  justify-content:center;
}

.topleft {
  background-color: cadetblue;
  align-items:flex-end;
  padding-top:10px;
  padding-bottom:10px;
}

.topright {
  background-color: lightcoral;
  align-items:flex-end;
  padding-top:10px;
  padding-bottom:10px;
}




#column1 {
	background-color: lightblue;
	font-family: 'Noto Sans Arabic', sans-serif;}

#column2 {
	background-color: lightpink;
	font-family: 'Noto Sans Arabic', sans-serif;}