/* reset */
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0; padding: 0;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
    margin: 0; padding: 0;
}        
html, body {direction: rtl; box-sizing: border-box; font-family: Arial;}
a {transition: all 0.3s;}
a:hover {color: green;}

/* reusable elements */
.nice-button {border: 1px #622A69 solid; color: white; background-color: rgb(129,85,135); font-weight: bold; font-size: 120%; cursor: pointer;}

.boxer {margin: 50px auto; clear: both; color: #622A69; font-size: 95%; }
.boxer h2 {font-size: 120%; margin: 10px 0;}
.boxer a h2 {text-decoration: underline;}
.boxer p {text-align: justify;color: #818689;}
.boxer input[type="search"] {width: 75%;}

.top-explain {border: 1px solid gray; padding: 10px;}

.sider {background-color: white; text-align: right;}

/* specific elements */
header {background-color: #320539; text-align: center; padding: 10px; color: white; transition: all 0.5s;}
.header-internal {display: flex; width: 100%; max-width: 620px; margin: 0 auto; justify-content: space-between; align-content: center;}
.header-internal > img {height: 6vh;}
header a {text-decoration: none; color: inherit;}
header h1 {font-size: 130%;}
header #menu-button {transition: all 0.5s;}
header #menu-button img {height: 6vh; transition: all 0.5s;}
header #menu-button:focus img, header #menu-button:hover img, header #menu-button:active img {transform: rotate(90deg);}

.wrapper {display: flex; justify-content: center; align-content: center; flex-direction: column;}
.menu {background-color: white; min-width: 250px; overflow: hidden; height: 0; transition: all 0.5s; order: 1;}
.menu ul {list-style: none;}
.menu ul li {padding: 12px; border-bottom: 1px solid lightgray; border-right: 1px solid lightgray; transition: background 0.5s, color 0.5s;}
.menu ul li:hover {background-color: lightgray;}
.menu ul li:hover a {color: #622A69;}
.menu a {color: gray; text-decoration: none;}

main {max-width: 800px; background-color: white; padding: 0 3%; order: 3;}

.right-ad {text-align: center; padding: 3%; order: 2;}
.right-ad .boxer {text-align: right;}
.right-ad section {display: none;}

.dream-input {margin-top: 20px;}
.dream-input h2.highlight {font-size: 100%; padding: 5px; background-color: rgb(129,85,135); color: white; border: 1px #622A69 solid;}
.dream-input p {width: 97%; margin: 10px auto; text-align: justify;}
.dream-input textarea {width: 100%; height: 150px; padding: 5px; font-size: 120%; color: black;}
.dream-input input[type="submit"] {float: left; margin: 15px; padding: 5px 10px;}

.information p {color: rgb(129,85,135);}

.solve h2::first-letter {text-transform: capitalize; }
.solve a:hover {color: green;}

.dream-solve {}
.dream-solve > h2, .dream-solve > h3 {font-size: 100%; color: #622A69; margin: 20px 0;}
.solve {margin: 25px auto;}

.last-dreams {}
.last-dreams p {color: #818689;}

.last-dream {display: none;}

.navigation a {text-decoration: none;}
.navigation h2 {font-size: 110%;}
.navigation div {margin: 20px 0 20px 0; border-bottom: 1px solid transparent;}
.navigation div img {float: left; height: 35px; margin-top: 20px; padding-right: 15px;}

.dream-short {margin-top: 20px;}
.dream-short a {text-decoration: none; color: inherit;}
.dream-short a:hover {color: green;}
.dream-short time {font-size: 90%;}

.dreams-masters {text-align: center; margin: 30px auto; transition: all 0.7s; transform: rotateX(90deg); animation: rotatein 1.0s forwards; animation-delay: 2s;}
.dreams-masters h4 {font-size: 110%;}
.dreams-masters > div {display: flex; justify-content: space-evenly; }
.dreams-masters > div > a:hover {background-color: lightgray;}

.pager > div {display: flex; flex-wrap: wrap; justify-content: center;}
.pager > div a:hover {background-color: gray;}
.page-num {padding: 7px 0; border: 1px solid gray; text-decoration: none; font-size: 140%; font-weight: bold; width: 50px; text-align: center; vertical-align: middle;}

.letters {display: flex; flex-wrap: wrap; font-size: 160%;}
.letters a {padding: 5px 10px;}

.statistics {}
.statistics h3 {margin-top: 30px;}
.statistics section {display: flex; flex-wrap: wrap;}
.statistics section a {padding: 7px 0; display: inline-block; width: 70px; border: 1px solid lightgray; text-align: center; transition: all 0.3s;}
.statistics section a:hover, .statistics section a:focus {background-color: lightgray;}

.breadcrumb {list-style: none; color: gray;}
.breadcrumb li {display: inline-block; margin: 0 5px;}
.breadcrumb li a {color: gray; transition: all 0.3s;}
.breadcrumb li a:hover {color: purple;}

footer {text-align: center; color: black; padding: 20px 0; font-size: 85%;}
footer a {color: black; margin: 0 15px;}

#twitter-widget-0 {margin-top: 2px;}


.c-israel {width: 100%;}


/* */
@media (min-width: 900px) {
    .c-israel {width: 50%;}*/
    body {background-color: lightblue;}
    .wrapper {flex-direction: row;}
    .menu {height: initial; width: 300px; order: 4;}
    #menu-button {visibility: hidden;}
    .menu ul li {border: 0;}
    .last-dream {display: block;}
    .sider {width: 15%; min-width: 250px; padding: 10px;}
    .right-ad section {display: block;} /* to show the most viewed dreams */
}

@keyframes rotatein {
  from {
    transform: rotateX(90deg);
  }

  to {
    transform: rotateX(0);
  }
}