html, body {direction: rtl; font-family: Arial; margin: 0; padding: 0;}
header {margin: 0 auto; display: flex; justify-content: space-between; width: 100%; max-width: 850px; background-color: white; padding: 10px; box-sizing: border-box;}
header small {color: gray;}
header .logo {height: 70px;}
main {margin: 0 auto; max-width: 850px; background-color: white;}
main h1 {text-align: center; font-size: 160%;}
main h2, main h3, main h4 {color: #333; text-align: center; margin: 0; padding: 5px;}
.search-form {text-align: center; margin: 20px auto;}
.search-form input[type="search"] {width: 50%; min-width: 200px;}
.search-form input[type="submit"] {background-color: red; color: white; border: 2px solid #ddd; font-size: 125%; position: relative; top: 4px; border-radius: 4px; cursor: pointer;}
.search-form details {text-align: center; margin: 30px;}
.search-form details label {display: block; margin: 9px 5px;}
.share-buttons {text-align: center;}
.add-to-db {margin: 20px auto; text-align: center;}
.add-to-db img {height: 30px;}

.moretypes {padding: 20px;}

.gematria-results {display: flex; flex-wrap: wrap; justify-content: space-evenly; align-content: space-around; box-sizing: border-box; transition: all 0.3s;}
.gematria-results ul {list-style: none; margin: 0; padding: 20px; width: 50%; max-width: 210px; box-sizing: border-box; transition: all 0.3s; border: 1px solid transparent;}
.gematria-results ul:hover {border: 1px solid #bbb;}
.gematria-results li {margin: 7px 0;}

.pages {display: flex; width: 100%; margin-top: 20px; justify-content: center;}
.pages a {display: inline-block; width: 47%; max-width: 250px; text-align: center; margin: 4px; padding: 20px 0; border: 1px solid red; border-radius: 5px; transition: all 0.3s; text-decoration: none; font-weight: bold;}
.pages a:hover {background-color: red; color: white;}

.info-message {text-align: justify;}

.last {margin-top: 20px;}
.last h2 {margin: 0; padding: 10px; color: #444; text-align: center; font-size: 130%;}
.last ul {margin: 0 5%; padding: 0; list-style: none;}
.last li {padding: 7px 0;}
.local-ad {margin: 10px auto; text-align: center; width: 250px; display: block;}

.external {text-align: center;}
.external a {display: block; margin: 9px 0;}

footer {text-align: center; font-size: 90%; background-color: #ddd; padding: 10px;}
footer img {height: 30px;}

#menu {overflow: hidden; transition: all 0.4s; height: 0; background-color: #FAD7A0; list-style: none; margin: 0 auto; padding: 0 20px; width: 100%; max-width: 850px; box-sizing: border-box;}
#menu li {margin: 12px 0;}

/* when screen is bigger than */
@media (min-width: 851px) {
	html {
		background-color: #DFDBE5;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='126' height='84' viewBox='0 0 126 84'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M126 83v1H0v-2h40V42H0v-2h40V0h2v40h40V0h2v40h40V0h2v83zm-2-1V42H84v40h40zM82 42H42v40h40V42zm-50-6a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm96 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm-42 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm30-12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM20 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 24a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM8 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm54 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM50 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM50 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm54-12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm12 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM92 54a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM92 78a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24-42a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	}
	#menu {background-color: white; height: 55px; line-height: 25px; font-size: 90%; text-align: center;}
	#menu li {display: inline-block; margin: 0 0 0 10px;}
	#menu-opener {visibility: hidden;}
}