/* The star here mean everything in style....because by default 
the style of the page web take a measure....like margin take 8px by 
default.....So, make it zero is more suitable for the code. */

*{
    margin: 0;
    padding: 0;
}

body{
  background: linear-gradient(#200016,#10001f);
  height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
/* linear-gradient().......a function to mix color like: background:
linear-gradient(black,white); */

/* vh.....make the height of any screen like: height: 100vh; */ 

a{
  text-decoration: none;
  color: white;
}
/* text-decorition......for the line that under the text like the <a>
 */

 header{
  position: absolute;
  width: 100%;
  z-index: 100; /* the hover of links after doing position: absolute; and width: 100%; ,
  are stops suddenly, so we doing the z-index: 100 ( or any number you want); and the problem fixed.
  /* */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px;
 }

 header .logo{
  font-size: 30px;
  text-transform: uppercase;
 }

 header ul{
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
 }

 header ul li{
  margin-right: 30px;
 }

 header ul li a{
  padding: 6px 15px;
  border-radius: 20px;
 }

 header ul li a:hover, .active{
  background: white;
  color: black;
 }

 .main{
  position: relative;
  height: 100vh;
  width: 100%;
  /**/
  display: flex;
  justify-content: center; /* x from left to right */
  align-items: center; /* y from up to down  */
  overflow: hidden; /* hidden the picture moon behinde the mountain*/

 }

 main::after{
  content: '';
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: linear-gradient(to top, #200016, transparent); /* to top: from down to up.....transparent: فراغ */
 }

 .main img{
  position: absolute;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  
 }

 #moon{
  mix-blend-mode: screen; /* the color that around moon has take the same color of moon: white. */
  transform: translateY(80px); /* The sign + make it down */
 }

 .nouvil{
  color: white;
  font-size: 25px;
  text-transform: uppercase;
  transform: translateY(-140px); /* The sign - make it up */
 }
 /* When we have a parent like <header>, and into the parent have 
 childerns, and we need to sparated the childerns from each other;
 we should make an attrbuit display; that will saparte the childerns of
 the same parent, like: display: flex; */

 /* justify-content.....will make spaces or orgnaizing the childerns. */

 /* align-items......will move the text in left, right, center, etc.. */

 /* and this two: justify and align, is the benefit of the display */

 /* list-style.....تبعد الشوائب الموجوده في النص like: list-style: none;
  */

/* text-transform.....make the words Uppercase or Lowercase. */

/* padding.......when you write padding: 2px(this for the upper and
 down 6px(this for the left and right); */

 /* border-radius.......يضبط الحواف حق الوسم like: border-radius: 20px; */

 /* object-fit........return aything to its original*/

 .content{
  color: white;
  padding: 30px;
 }

 .content h2{
  margin: 20px;
  font-size: 30px;
 }
 
 .content p{
  margin: 20px;
 }