body, html {
  height: 100%;
  margin: 0;
  text-align: center;
  
}
.bg { 

  
      
    /* The image used */
    background-image: url("Images\\Book Covers\\background.png");
  
    /* Full height */
    height: 100%; 
  
    /* Center and scale the image nicely */
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;

}

#tablettext{
 position: absolute;
  background: url("Images\\Book Covers\\books.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  left: 3%;
  top: 25%;
  height: 55vh;
  width: 55vh;

  /* height: 28.12rem;
  width: 21.8rem ; */
}

#career-dream-collection{
  position: absolute;
   background: url("Images\\Book Covers\\Book_blue.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   left: 32%;
   top: 10%;
   /* height: 19.12rem;
   width: 12.8rem ; */
   height: 45vh;
   width: 30vh;

 }

 #lifestyle-collection{
  position: absolute;
   background: url("Images\\Book Covers\\Book_green.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   left: 47%;
   top: 10%;
   /* height: 19.12rem;
   width: 12.8rem ; */
   height: 45vh;
   width: 30vh;
 }

 #everythingpossible-collection{
  position: absolute;
   background: url("Images\\Book Covers\\Book_yellow.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   left: 62%;
   top: 10%;
  /* height: 19.12rem;
   width: 12.8rem ; */
   height: 45vh;
   width: 30vh;
 }


 #exploration-collection{
  position: absolute;
   background: url("Images\\Book Covers\\Book_purple.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   left: 77%;
   top: 10%;
    /* height: 19.12rem;
   width: 12.8rem ; */
   height: 45vh;
   width: 30vh;
 }


 #conversation-collection{
  position: absolute;
   background: url("Images\\Book Covers\\Book_blue.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   left: 39.5%;
   bottom: 2.5%;
   /* height: 19.12rem;
   width: 12.8rem ; */
   height: 45vh;
   width: 30vh;
 }


 #animals-collection{
  position: absolute;
   background: url("Images\\Book Covers\\Book_green.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   left: 54.5%;
   bottom: 2.5%;
    /* height: 19.12rem;
   width: 12.8rem ; */
   height: 45vh;
   width: 30vh;
 }


 #world-collection{
  position: absolute;
  background: url("Images\\Book Covers\\Book_yellow.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
   left: 69.5%;
   bottom: 2.5%;
   /* height: 19.12rem;
   width: 12.8rem ; */
   height: 45vh;
   width: 30vh;
 }


 .collectionimage{
  position: absolute;
  bottom: 8%;
  height: 19vh;
  width: 30vh;
 }

 .collectiontext{
  position: absolute;
  text-align: center;

  display: table;
	overflow: hidden;

  top: 8%;
  height: 18vh;
  width: 30vh;

  padding-left: 11%;
  padding-right: 9%;
  font-size: 3.5vh;

 }

 .collectiontext p{
	
	display: table-cell; vertical-align: middle;
	font-family: 'DM Serif Display', serif;
	color: rgb(0, 0, 0);
}

 .career-dream{
  background: url("Images\\Book Covers\\career_icon.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;

 }

 .lifestyle{
  background: url("Images\\Book Covers\\lifestyle_icon.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;

 }

 .everythingpossible{
  background: url("Images\\Book Covers\\everything_icon.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;

 }

 .exploration{
  background: url("Images\\Book Covers\\Exploration-_culture_icon.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;

 }

 .conversation{
  background: url("Images\\Book Covers\\Conversations_collections_icon.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;

 }
 .animals{
  background: url("Images\\Book Covers\\animal_floral_icon.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;

 }

 .world{
  background: url("Images\\Book Covers\\Expolre_the_world_icon.png");
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;

 }


   
  .container-fluid{
      padding-left: 0;
      padding-right: 0;
  }
  
  .navbar{
      padding-bottom: 0;
      padding-top: 0;
  }
  
  .nav-item{
      padding: 0 22px;
  }
  
  @media only screen and (max-width: 576px) {


    .bg{
      background-image: none;
      background-color: rgb(255,222,173);
      height: auto; 
    width: auto;
    }

    #tablettext {
     
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }  

    #career-dream-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #lifestyle-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #everythingpossible-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #exploration-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #conversation-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #animals-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #world-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    

  }
    
  
  @media only screen and (max-width: 768px) and  (min-width: 576px) {

    


    .bg{
      background-image: none;
      background-color: rgb(255,222,173);
      height: auto; 
    width: auto;
    }

    #tablettext {
      
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }  

    #career-dream-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #lifestyle-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #everythingpossible-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #exploration-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #conversation-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #animals-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #world-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    

  }


  @media only screen and (max-width: 992px)  and  (min-width: 768px){

    


    .bg{
      background-image: none;
      background-color: rgb(255,222,173);
      height: auto; 
    width: auto;
    }

    #tablettext {
      
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }  

    #career-dream-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #lifestyle-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #everythingpossible-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #exploration-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #conversation-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #animals-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    #world-collection{
      position: static;
      margin-left: auto;
      margin-right: auto; 
      left: 0;
      right: 0;
    }

    

  }


  @media only screen and (max-width: 1200px)  and  (min-width: 992px) {


  }