body{
font-family: 'Roboto Mono', monospace !important;
}

#particles-js{
	height:150px;
	margin:0 auto;
	z-index: -1;
}

.title_container{
background-color: #fff;
width:1200px;
height:250px;
color:#444;
z-index:1;
float:left;
display:block;
}
.main_title{
  font-family: 'Roboto Mono', monospace ! important;
  padding:8% 1% 3% 20%;
  font-size:40px;
  float:left;
  width:1000px;
}

.all_blocks_cont{
  height:275px;
  width:1200px;
  margin:0% 7% 7% 4%;

  float:left;
}
.block_container{
	width:335px;
	height:195px;
	background-color:#fff;
	display:block;
	float:left;
	margin:20px;
	border-radius:5px;
	border:1px;
	border-color:#ddd;
	border-style: solid;
}

.bck_img{
  width:95%;
  height:60%;
  margin:0.3em ;

}

.block_title_cont{
  font-family: 'Roboto Mono', monospace;
  font-size:14px;
	margin:0px 0px 0px 8px;
	padding:5px;
	border-width:5px 0px 0px 0px;
	border-color:#bbb;
	border-style:solid;
	border-radius:3px;
	height:50px;
}

.chapters{
	height:50px;
	min-width:55px;
	Float:left;
	display:block;
	margin-right:5px;
}


/* #########################NOTEBOOK CSS ############## */
a { color: #000;text-decoration:none;}
a:hover{ color:#ade;text-decoration: underline;}

p {width:80%;}

#notebook{
  margin-top:30px ! important;
  font-family: "Roboto Mono", monospace;
}
.input_area{
  width:75% !important;
  margin-left:5%
}
.output_area{
  width:75%;
  margin-left:4%
}
.text_cell_render{
  margin-left:4%;
}
#notebook-container{
  box-shadow:0px 0px 4px 1px rgba(87, 87, 87, 0.1)
}

.prompt{
  min-width:15ex;
}
/*
#################MEDIA DIMENSIONS ######################### */

@media only screen  and (max-width : 650px) {
.title_container{
  height:200px;
  width:500px;
}
.main_title{
    font-size: 28px;
    padding:10% 1% 5% 0%;
    width:360px;
    margin-left:5%;
		text-align:center;
  }
.all_blocks_cont{
  height:875px;
  width:400px;
  margin-left:2%;
  }
.block_container{
	width:340px;
	height:200px;
  }
  .block_title_cont{
  	margin-top:10px;
  }

}



@media only screen and (min-width : 650px) and (max-width : 1023px) {
  .title_container{
    width:800px;
    height:200px;
  }
  .main_title{
      font-size: 35px;
      padding:12% 1% 5% 4%;
      width:680px;
      margin-left:10%
  }

  .all_blocks_cont{
      height:900px;
      width:900px;
      margin-left:3%;
  }
  .block_container{
  	  width:350px;
  	  height:225px;
      margin-left:4%;
  }

  .block_title_cont{
  	margin-top:10px;
  }
}

@media only screen  and (min-width : 1400px) {
  .title_container{
  width:1200px;
  height:225px;

  }
  .main_title{
    padding:8% 1% 5% 40%;
    font-size:45px;
    float:left;
    width:1200px;
  }

  .all_blocks_cont{
    height:425px;
    width:1350px;
    margin:0% 10%;
    float:left;
  }
  .block_container{
  	width:375px;
  	height:200px;
  }
}