/* Add the Bahij font  */
@font-face {
    font-family: 'Bahij';
    src: url(assets/fonts/Bahij_TheSansArabic-Bold.woff2) format('woff2'),
        url(assets/fonts/Bahij_TheSansArabic-Bold.woff) format('woff');
}

/* Set the assets/background.png file as the background of the body. */
body {
  /* Background is a gradient from #92549d on top to #225ca5 on the bottom */
  background: linear-gradient(to bottom, #92549d, #2c3171 50%, #225ca5);
  height:100vh;
  font-family: 'Bahij', Arial, Helvetica, sans-serif;
}
img#upper_left{
  position: absolute;
  top: 3%;
  left: 3%;
  width: 15vw;
}
img#upper_right{
  position: absolute;
  top: 5%;
  right: 3%;
  width: 25vw;
}

div#message{
  /* Center div vertically. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  width: 90%;
  padding:20px;
}
p{
  /* Make the font size depend on the size of the device. */
  font-size: 2rem;
  /* Make the font size smaller on mobile devices. */
  @media (max-width: 600px) {
    font-size: 1rem;
  }
}

h1{
  font-size: 4rem;
  /* Make the font size smaller on mobile devices. */
  @media (max-width: 600px) {
    font-size: 2rem;
  }
}

/* A transparent button with white characters, and a thick white border, with slightly rounded edges. */
button{
  color:white;
  font-family: 'Bahij', Arial, Helvetica, sans-serif;
  background-color: transparent;
  border: 0.4rem solid white;
  border-radius: 0.5rem;
  padding: 0.5rem 1.5rem;
  font-size: 2rem;
  margin: 1rem;
  cursor:pointer;
  @media (max-width: 600px) {
    font-size: 1rem;
  }
}

/* Add a nice hover effect on the button. */
button:hover{
  background-color: white;
  color: #2c3171;
}