body{


 

  background: -webkit-linear-gradient(85deg, rgb(0, 255, 164), rgb(0, 10, 111));
  background: linear-gradient(85deg, rgb(0, 255, 164), rgb(0, 10, 111));
  
    /*background-image : url("488713.jpg");*/
  
  }
  
  
  /*header cover style */
  .headerCover {
  
    /*height: 620px;*/
    height: 780px;
  
    /* background-image: url('https://source.unsplash.com/BtbjCFUvBXs/1920x1080');
     */

     background-image: url('backG.jpg');

  /*  

  background: -webkit-linear-gradient(90deg, rgb(5, 56, 107), rgb(92, 219, 149));
  background: linear-gradient(90deg, rgb(5, 56, 107), rgb(92, 219, 149));
  */
  
  background: #348F50;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #56B4D3, #348F50);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #56B4D3, #348F50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
  
    background-image : url("488713.jpg");
  
    /* background-image: url('https://source.unsplash.com/BtbjCFUvBXs/1920x1080'); */

    background-image: url('backG.jpg');
    
     /*background-image:none;*/
     
    /*background-image: url('photo-1528731708534-816fe59f90cb.jpg');*/
  
  
    /*background-image : url("488713.jpg");*/
  
  
  
  background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .headerCover h1
  {
      padding-top: 160px;
          color: #05386B;
      font-size: 45px;
      font-weight: 500;
  }

  
  
  
  /*form cover style */
  
  #formCover
  {
       padding-top: 12px;
       /*height: 690px;*/
  
      height: 730px;
       background-color:#EDEEE9;
  }
  
  /*create journal form style */
  
  #createForm{
      border-top: none;
  }
  
  
  
  /*join button style */
  
  #insert{
    margin-top: 20px;
  }
  
  /*insert image input style */
  
  #image{
    margin-right: 45px;
    width:30px;
    height:10px;
  
  }
  
  /*insert image icon style */
  
  #coverDiv{
    margin-top:25px;
  }
  
  #imageicon{
    font-size: 30px;
    color:white;
    
  
  }
  #imageicon:hover{
    cursor: pointer;
  
  }
  
  #imageP{
    padding: 10px;
          width: 50px;
  
      border-radius: 125px;
      /*background-image: linear-gradient(120deg, #505add 0%, #df42b1 100%);*/
       background-image: -webkit-linear-gradient(120deg, #379683 0%, #5CDB95 100%);
      background-image: -ms-linear-gradient(120deg, #379683 0%, #5CDB95 100%);
  }
  
  
  /*publish checkbox style */
  
  #publishC{
    font-size: 3px;
    display: inline;
    padding: 5px;
   width: 25px;
    
  }
  
  /*publish checkbox text style */
  
  #publishP{
    display: inline;
    margin: 5px;
    padding-bottom: 15px;
  
  }
  
  
  
  /*close form button style */
  
  #close:hover{
    cursor: pointer;
  }
  
  
  /*slider header style */
  
  #sliderHeader
  {
    margin: 60px auto ;
    color: white;
  }
  
  /*slider style */
  
  
  
  @media (min-width: 700px) {
  .carousel-multi-item-2 .col-md-3 {
  float: left;
  width: 50%;
  /*margin: auto;*/
  max-width: 100%; }
  
   
    }
  
  
  @media (min-width: 508px) {
  .carousel-multi-item-2 .col-md-3 {
  float: left;
  /*width: 70%;*/
  margin: auto;
  max-width: 100%; } }
  
  
  @media (min-width: 955px) {
  .carousel-multi-item-2 .col-md-3 {
  float: left;
  width: 33%;
  /*margin: auto;*/
  max-width: 100%; } }
  
  
  .carousel-multi-item-2 .card img {
  border-radius: 2px; }
  
  
  /*cards style*/
  
  .card-body{
    margin: auto;
    height: 50%;
  }
  
  .card{
    height: 450px;
      margin-bottom: 50px; 
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
      
  border-radius: 20px;
  border: 0px;
  /*overflow-x:  hidden;*/
  }
  .card-body{
    background-color: rgba(255, 255, 255, 0.76) ;
    margin-bottom: 0px;
    border-radius: 0px 0px 20px 20px;
  }
  .Jcard{
    /*padding: auto;*/
    margin: 0px;
  }
 
  .carousel-item{
    padding: auto;
    /*height: max-content;*/
  }
  
  #carouselCon{
     width: 70%;
    /* for example */
    margin: auto;
        /*height: -webkit-fill-available;*/
        margin-top: 70px;
       /* background-color: */
  
  }
   
  
   #addBtn{
  /*  position: absolute;
    bottom: 0px;*/
    /*margin-bottom: -100px;*/
    position: relative;
    /*bottom: -80px;*/
    top: -40px;
    /*width: 50px;*/
    width: max-content;
    margin:  auto;
  
  
   }
  #icon{
    margin-right: 0px;
    padding: 15px;
    height: 50px;
    width: 50px;
    border-radius: 125px;
  
  
  }
  .dirIcon{
    font-size: 40px;
    margin: 40px;
    color: white;
  }
  
  .fa-plus{
    margin: 0px;
  padding: 2px;
      font-size: 20px;
  }
  
  
  .carousel-inner{
      height: -webkit-fill-available;
      /*height: 600px;*/
  
  }
  
  
  .bg-dark {
      /*background-color:  rgb(5, 41, 78)!important;*/
      background-color: black;
    }
   .card-img{
          border-radius: 20px;
          /*overflow: hidden;*/
   }
     .card-img:hover{
        transform: scale(1.2);
          transition: transform .5s ease;
    }
    .imageCon{
      overflow: hidden;
      border-radius:  20px 20px 0px 0px;
    }
  
  /*form Container style */
  
  
    #formContainer
  {
     margin:0;
      background-color:#EDEEE9;
     
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.14);
  
      
         width: 30%;
      /*height: 670px;*/
  
      /*height: 790px;*/
      padding: 25px;
  
  }
  
  #createForm  .form-control{
   
    
    border-bottom: 1px solid rgba(5, 56, 107, 0.507);
  }
  
  #formCover
  {
       padding-top: 12px;
       /*height: 690px;*/
       
      height: 780px;
       background-color:#EDEEE9;
  }
  
  .headerBtn{
      height: 135px;
      width: 135px;
      border-radius: 125px;
      font-size: 20px;
      padding: 8px;
      margin: 20px;
  }
  .headerBtn > i {
    display: block;
    font-size: 30px;
  }
  
  #headerBtns{
    margin-top: 55px;
  }
  
  .headerBtn:hover{
     transform: scale(1.2);
          transition: transform .5s ease;
  }
  
  #card-title-index{
    overflow-y: auto;
    /* overflow-y: scroll; */
    height: 140px;
  }
  .container{
    overflow-y: auto;

  }