@import url('https://fonts.googleapis.com/css2?family=Mali&display=swap');
/* The Overlay (background) */
span{
    font-size:40px;
  }
  .overlay {
      /* Height & width depends on how you want to reveal the overlay (see JS below) */   
      height: 100%;
      width: 0;
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      background-color: #9dabcf; /* Black fallback color */
      background-color: #9dabcf; /* Black w/opacity */
      overflow-x: hidden; /* Disable horizontal scroll */
      transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
    }
    
    /* Position the content inside the overlay */
    .overlay-content {
      position: relative;
      top: 25%; /* 25% from the top */
      width: 100%; /* 100% width */
      text-align: center; /* Centered text/links */
      margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
    }
    
    /* The navigation links inside the overlay */
    .overlay a {
      padding: 8px;
      text-decoration: none;
      font-size: 36px;
      color: #ece7e7;
      display: block; /* Display block instead of inline */
      transition: 0.3s; /* Transition effects on hover (color) */
    }
    
    /* When you mouse over the navigation links, change their color */
    .overlay a:hover, .overlay a:focus {
      color: #f1f1f1;
    }
    
    /* Position the close button (top right corner) */
    .overlay .closebtn {
      position: absolute;
      top: 20px;
      right: 45px;
      font-size: 60px;
    }
    
    /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
    @media screen and (max-height: 450px) {
      .overlay a {font-size: 20px}
      .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
      }
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #a0abca;
      }
      li {
        float: left;
      }
      li a {
        display: block;
        color: rgb(255, 255, 255);
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      li a:hover {
        background-color: #c5cee7;
      }
      header {
        height: 10%;
        padding:0 1% 0 1%;
      }
    
      h1{
        text-align: center;
        color: #a0abca;
        font-size: 60px;
        font-family: 'Mali', cursive;
      }
      body{
        background-color: #dfdddd;
      }

div1 {
  width: 42%;
  float: left;
  padding: 1% 1% 0 1%;
  margin: 0% 3% 0% 3%;
  background-color: #a0abca;
  
}

h2{
  text-align: center;
  color: #a0abca;
  font-size: 45px;
  font-family: 'Mali', cursive;
}

body {
  background: #eeeeee;
  font-size: 16px;
  font-family: 'Mali', cursive;
  margin: 0;
}

a {
  color: rgb(107, 69, 211);
  text-decoration: none;
}

a:hover {
  color: red;
}


/* Layout
------------------------------------------*/

header,
.container,
footer {
  margin: 0 auto;
  width: 88%;
  max-width: 1080px;
}

.wrapper {
  padding-bottom: 1em;
  background: #ffffff;
}


/* Layout
------------------------------------------*/

.parallax,
.parallax-2,
.parallax-3 {
  height: 500px;
  background-position: 50% 50%;
  background-attachment: fixed;
  background-size: cover;
}

.parallax {
  background-image: url(phone.jpg);
}

.parallax-2 {
  background-image: url(child.jpg);
}

.parallax-3 {
  background-image: url(ipad.jpg);
}