body{
  margin:0;
  font-family: "Aref Ruqaa", serif;
}

main{
  position:relative;
  top:4.84em;
}

footer{
  background-color:black;
  padding:40px;
  color:white;
  z-index:1;
  text-align:left;
}

footer h2{
  text-align: center;
  padding:10px;
}

footer a{
  line-height: 2.5em;
  color:inherit;
}

#loader{
  background-color:rgb(223,223,223);
  height:100%;
  width:100%;
  text-align:center;
  line-height:100vh;
  top:0;
  position:fixed;
  z-index: 2;
}

#loader img{
  vertical-align: center;
}

/* The header */

header {
  background-color: black;
  color:rgb(240,240,240);
  /* Center the title */
  text-align: center;
  position:fixed;
  top:0;
  z-index: 1;
  width:100vw;
}


#header-title{
  font-size: 1.5em;
  font-weight:bold;
  padding:0.5em;
  color:inherit;
  display:inline-block;
  line-height: 1.2em;
  text-decoration:none;
}

#navigation-links{
  background-color: inherit;
  /* Align the links */
  text-align: left;
}

#navigation-links a{
  font-size:1.1em;
  display:inline-block;
  font-weight: bold;
  color: inherit;
  margin:0.4em 0.6em;
  line-height:1.4em;
  text-decoration:none;
}

#menu-open, #menu-close, #menu-toggle{
  display:none;
}


@media screen and (hover: none), (max-width:500px){

  #navigation-links{
    position: fixed;
    width:100vw;
    height:100vh;
    top:0;
    right:100vw;
    transition:right 0.5s;
  }

  #navigation-links *{
    position:initial;
  }

  #menu-toggle:checked ~ #navigation-links{
    right:0;
  }

  #navigation-links a{
    display:block;
    padding:0.1em 1em;
    font-size:1.25em;
  }

  #menu-open, #menu-close{
    display:initial;
  }

  #menu-open{
    cursor:pointer;
    font-size:1.5em;
    padding:0.5em;
    float:left;
    line-height:1.2em;
  }

  #close-container{
    display:block;
    height:2em;
  }

  #menu-close{
    float:right;
    cursor:pointer;
    font-size:2em;
    padding:0.5em;
  }

  main{
    top: 2.7em;
  }
}