diff --git a/how-to-make-a-notebook-that/main.css b/how-to-make-a-notebook-that/main.css
new file mode 100644
index 0000000..9d49c73
--- /dev/null
+++ b/how-to-make-a-notebook-that/main.css
@@ -0,0 +1,935 @@
+@font-face {
+    font-family: inconsolata;
+    src: url(fonts/inconsolata.ttf);
+}
+
+@font-face {
+    font-family: inconsolatabold;
+    src: url(fonts/inconsolatabold.ttf);
+}
+
+@font-face {
+    font-family: tenor;
+    src: url(fonts/tenor.ttf);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+html{
+	font-size: calc(0.85em + 1vw);
+}
+
+body{
+	font-family:inconsolata, sans-serif;
+    min-width:320px;      
+  
+}
+
+
+#wrapper {
+	position:fixed;
+  	top: 0;
+  	left: 0;
+  	bottom: 0;
+  	right: 0;
+  	z-index: -1;
+  	background-color: white;
+
+}
+
+a{
+	color:black;
+	text-decoration:none;
+	background:transparent;
+	border-bottom:1.5px solid #99f;
+	padding-top:.05rem;
+	padding-bottom:.05rem;
+	background:linear-gradient(to bottom, #99f 0, #99f 100%);
+	background-position:0 100%;
+	background-repeat:repeat-x;
+	background-size: 0 0;
+	transition:background .2s ease-in-out;
+}
+
+.ext {
+	border-bottom-color: #99f;
+	background:linear-gradient(to bottom, #99f 0, #99f 100%);
+	background-position:0 100%;
+	background-repeat:repeat-x;
+	background-size: 0 0;
+	transition:background .2s ease-in-out;
+}
+
+.int {
+	border-bottom-color:#c6f;
+	background:linear-gradient(to bottom, #c6f 0, #c6f 100%);
+	background-position:0 100%;
+	background-repeat:repeat-x;
+	background-size: 0 0;
+	transition:background .2s ease-in-out;
+}
+
+a:hover, a:active, a:focus {
+	outline:0;
+	background-size:.5rem .3rem ;
+}
+
+/*header*/
+
+header{
+	position:relative;
+	width:100%;
+	padding-bottom:5%;
+	display:block;
+	overflow:hidden;
+	margin-left:1.3%;
+	line-height:1.5vh;
+}
+
+header h1{
+	font-family:tenor;
+	font-size:2em;
+	float:left;
+	width:60%;
+	margin-bottom:5%;
+
+}
+
+.show{
+	font-size:0.8em;
+	color:#c6f;
+	border-bottom:none;
+	background:none;
+}
+
+.show:hover{
+	color:magenta;
+}
+
+
+#sub{
+	white-space:nowrap;
+	font-family:inconsolata;
+	float:right;
+	padding-top:3%;
+	padding-right:3%;
+	width:40%;
+}
+
+
+#sub{
+	display:inline-block;
+	text-align:right;
+	font-size:0.7em;
+}
+
+#sub > span:first-child{
+	margin-right:20%;
+}
+
+#sub > a:visited {
+	color:black;
+	}
+
+
+#hleft-text{
+	display:none;
+	margin-top:0;
+	background:rgba(0,0,0,0.5);
+	width:100%;
+	height:100%;
+	left:0;
+	top:0;
+	position:fixed;
+	color:black;
+	z-index:55;
+	cursor:pointer;
+	overflow:hidden;
+	
+}
+
+#inner-hleft-text{
+	background-color:black;
+	width:90vw;
+	height:95vh;
+	position:fixed;
+	top: 50%;
+  	left: 50%;
+  	-webkit-transform: translate(-50%, -50%);
+  	-ms-transform:translate(-50%, -50%);
+  	transform: translate(-50%, -50%);
+	overflow-y:auto;
+
+}
+
+#ihtp{
+	width:80%;
+	height:95%;
+	position:fixed;
+	top: 50%;
+  	left: 50%;
+  	-webkit-transform: translate(-50%, -50%);
+  	-ms-transform:translate(-50%, -50%);
+  	transform: translate(-50%, -50%);
+  	font-size:0.8em;
+	line-height:130%;
+	
+	
+}
+
+
+#hleft-text:target{
+	 display:block;
+
+	
+}
+
+#getback{
+	z-index:100;
+	color:white;
+
+}
+
+
+#back, #back:hover, #back:visited{
+	text-decoration:none;
+	color:white;
+	display:block;
+	border-bottom:none;
+	background:none;
+}
+
+
+/*xpuf*/
+
+[id*="att"]{
+	background:rgba(0,0,0,0.7);
+	overflow:hidden;
+	height:100%;
+	width:100%;
+	top:0;
+  	left:0;
+	margin:0 auto;
+	position:fixed;
+	z-index:10;
+	display:none;
+}
+
+
+.wrap{
+	background:rgba(0,0,0,0.3);
+	position:fixed;
+	top: 50%;
+  	left: 50%;
+  	-webkit-transform: translate(-50%, -50%);
+  	-ms-transform:translate(-50%, -50%);
+  	transform: translate(-50%, -50%);
+	overflow-y:hidden;
+	height:80%;
+	width:90%;
+	display:flex;
+	flex-direction:column;
+
+}
+
+.upbar {
+	height:5%;
+	width:100%;
+	background-color:#f9f9eb;
+	position:relative;
+
+}
+
+.upbar a {
+	display:block;
+	height:100%;
+	border-bottom:none;
+	background:none;
+}
+
+.upbar p {
+	position:absolute;
+	width:97%;
+	margin:0 auto;
+	position: absolute;              
+   	top: 50%;
+   	left:50%;                        
+   -webkit-transform: translate(-50%, -50%);
+  	-ms-transform:translate(-50%, -50%);
+  	transform: translate(-50%, -50%);
+}
+
+.uptitle {
+	color:black;
+	float:left;
+	font-size:0.8em;
+}
+
+.upclose {
+	color:black;
+	float:right;
+	text-decoration:none;
+	font-size:0.8em;
+}
+
+.upclose:hover {
+	color:#000099;
+}
+
+
+
+.twowrap {
+	height:95%;
+	overflow-y:auto;
+	overflow-x:hidden;
+}
+
+
+[id*="att"] img{
+	width:100%;
+	padding:1% 3%;
+}
+
+
+[id*="att"]:target{
+  display: block;
+  }
+
+
+.twowrap-trailer{
+	overflow-x:hidden;
+	overflow-y: auto;
+	height:91%;
+
+}
+
+.iframe-container {
+  overflow:hidden;
+  padding-top: 56%;
+  position: relative;
+}
+
+.iframe-container iframe {
+   border: 0;
+   height: 100%;
+   left: 0;
+   position: absolute;
+   top:0;
+   width: 100%;
+}
+
+.video-container{
+  overflow:hidden;
+  padding-top: 0%;
+  position: relative;
+}
+
+/*main*/
+
+section#main{
+	position:relative;
+	margin-left:0;
+	left:0;
+	width:100%;
+	padding-left:1%;
+	display: flex;
+    flex-direction: column;
+}
+
+.logo{
+	width:70%;
+}
+
+[class*="col"]{
+	float:left;
+	width:28%;
+	height:100%;
+	display: flex;
+    flex-direction: column;
+	padding-right:2%;
+}
+
+
+[class*="col"] p, img, h2{
+	padding-right:7%;
+
+}
+
+[class*="col"] p{
+	font-size:0.65em;
+	line-height:1.5em;
+
+}
+
+.col1 {
+	display:initial;
+}
+
+
+.short{
+	display:block;
+}
+
+.long{
+	display:none;
+}
+
+.col5 {
+	width:16%;
+}
+
+.col6 {
+	width:72%;
+	padding-right:0;
+
+}
+
+[class*="subcl"]{
+	width:38.5%;
+	float:left;
+	
+}
+
+.subcl3{
+	width:22.5%;
+}
+
+.col1 p {
+	word-wrap:break-word;
+
+}
+
+.attch {
+	padding-top:7%;
+}
+
+p.subcl3{
+	padding-right:1%;
+}
+
+.row{
+	padding-bottom:2.2vh;
+	padding-top:2.2vh;
+}
+
+.row:not(:last-child){	
+	border-bottom-style:solid;
+	border-bottom-color:black;
+	border-bottom-width:3px;
+	
+}
+
+#categories{
+	font-family:inconsolata, serif;
+	margin:0 auto;
+	width:100%;
+	border-bottom-style:double;
+	border-bottom-width:4px;
+
+
+}
+
+
+#categories.row {
+	padding-top:0.7%;
+	padding-bottom:0.5%;
+	-webkit-padding-after:0.5%;
+
+}
+
+#categories h2{
+	font-size:0.7em;
+}
+
+
+.gradShow {
+	font-weight:900;
+}
+
+
+.row::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+
+
+
+
+/* --------- 2nd case --------- */
+
+@media all and (min-width: 600px) and (max-width: 720px){
+
+a{
+	border-bottom:2px solid #99f;
+}
+/*header*/
+
+#ihtp{
+	/*font-size:calc(9px + 1.7vh);*/
+	line-height:130%;
+}
+
+#sub > span:first-child {
+	margin-right:22%;
+}
+
+/*xpuf*/
+
+.wrap {
+	height:85%;
+}
+
+
+/*main*/
+
+.short{
+	display:none;
+}
+
+.long{
+	display:block;
+}
+
+.row:not(:last-child){
+	border-bottom-width:4px;
+	
+}
+
+#categories{
+	border-bottom-width:4px;
+}
+
+}
+
+
+/* --------- 3rd case --------- */
+
+@media all and (min-width: 720px) and (max-width: 992px){
+
+a{
+	border-bottom:2px solid #99f;
+}
+
+
+/*header*/
+
+#ihtp{
+	font-size:calc(11px + 1.7vh);
+	line-height:130%;
+}
+
+#sub > span:first-child{
+	margin-right:22%;
+	/*font-size:2.1vw;*/
+}
+
+.show{
+	font-size:0.6em;
+}
+
+/*xpuf*/
+
+
+/*main*/
+
+.short{
+	display:none;
+}
+
+.long{
+	display:block;
+}
+
+.row:not(:last-child){
+	border-bottom-width:5px;
+	
+}
+
+p.subcl3{
+	padding-right:5%;
+}
+
+#categories{
+	border-bottom-width:5px;
+}
+
+
+#categories.row {
+	width:100%;
+
+}
+
+}
+
+/* --------- 4th case --------- */
+
+@media all and (min-width: 992px) and (max-width: 1400px) {
+
+a{
+	border-bottom:2px solid  #99f;
+}
+
+/*header*/
+
+header{
+	width:25%;
+	position:fixed;
+	left:0;
+	top:2%;
+	bottom:0;
+	padding-bottom:0;
+	float:left;
+	margin-left:2%;
+	display:flex;
+	flex-direction: column;
+}
+
+header h1{
+	font-size:2.3em;
+	width:77%;
+	padding-bottom:3%;
+	-webkit-padding-after:7%;
+	float:none;
+}
+
+#page-title {
+	margin-bottom:13%;
+}
+
+.show{
+	display:none;
+}
+
+#sub{
+	padding-top:0;
+	float:none;
+	width:100%;
+	font-size:0.6em;
+	text-align:left;
+}
+
+
+#sub > span:first-child{
+	margin-right: 20%;
+}
+
+#hleft-text{
+	position:relative;
+	display:block;
+	background:none;
+	margin-top:7%;
+	width:100%;
+	overflow-y:auto;
+	overflow-x:hidden;
+	padding-right:1%;
+	box-sizing:border-box;
+	cursor:default;
+
+}
+
+#inner-hleft-text{
+	width:100%;
+	height:inherit;
+	position:relative;
+	top:0;
+	left:0;
+	transform:none;
+	-webkit-transform:none;
+	-ms-transform:none;
+	overflow-y:hidden;
+	background-color:initial;
+
+}
+
+#ihtp{
+	width:80%;
+	position:relative;
+	top:0;
+	left:0;
+	-webkit-transform:none;
+	-ms-transform:none;
+	transform:none;
+	font-size:1em;
+	line-height:130%;	
+	
+}
+
+#getback{
+	display:none;
+}
+
+#back, #back:hover, #back:visited{
+	background-color:none;
+	cursor:default;
+	color:black;
+	font-size:0.55em;
+}
+
+/*xpuf*/
+
+.wrap{
+	width:60%;
+	height:82%;
+	
+}
+
+.uptitle {
+	font-size:2.5vh;
+}
+
+.upclose {
+	font-size:2.5vh;
+}
+
+/*main*/
+
+section#main{
+	position:fixed;
+	top:0;
+	bottom:0;
+	overflow:hidden;
+	left:27%;
+	width:73%;
+	padding-left:1%;
+
+}
+
+#content{
+	padding-top:1%;
+	overflow-y:auto;
+	overflow-x:hidden;
+
+}
+
+.logo{
+	display:block;
+	width:70%;
+}
+
+[class*="col"] p {
+	font-size:0.55em;
+}
+
+.short{
+	display:none;
+}
+
+.long{
+	display:block;
+}
+
+.subrow p{
+	padding-right:7%;
+
+}
+
+p.subcl3{
+	padding-right:5%;
+}
+
+.row:not(:last-child){
+	border-bottom-width:5px;
+}
+
+
+#categories{
+	margin-left:0;
+	border-bottom-width:5px;
+	width:98%;
+}
+
+}
+
+/* --------- 5th case --------- */
+
+@media all and (min-width: 1400px){
+
+
+a{
+	border-bottom:2px solid  #99f;
+}	
+
+/*header*/
+
+
+header{
+	width:25%;
+	position:fixed;
+	left:0;
+	top:2%;
+	bottom:0;
+	padding-bottom:0;
+	float:left;
+	margin-left:2%;
+	display:flex;
+	flex-direction: column;
+}
+
+header h1{
+	font-size:2.3em;
+	width:77%;
+	float:none;
+}
+
+#page-title {
+	margin-bottom:13%;
+}
+
+.show{
+	display:none;
+}
+
+#sub{
+	padding-top:0;
+	float:none;
+	width:100%;
+	font-size:0.6em;
+	text-align:left;
+}
+
+#sub > span:first-child{
+	margin-right: 20%;
+}
+
+#hleft-text{
+	position:relative;
+	display:block;
+	background:none;
+	margin-top:9%;
+	width:100%;
+	overflow-y:auto;
+	overflow-x:hidden;
+	padding-right:1%;
+	box-sizing:border-box;
+	cursor:default;
+
+}
+
+#inner-hleft-text{
+	width:100%;
+	height:inherit;
+	position:relative;
+	top:0;
+	left:0;
+	transform:none;
+	-webkit-transform:none;
+	-ms-transform:none;
+	overflow-y:hidden;
+	background-color:initial;
+
+}
+
+#ihtp{
+	width:70%;
+	position:relative;
+	top:0;
+	left:0;
+	-webkit-transform:none;
+	-ms-transform:none;
+	transform:none;
+	line-height:130%;
+	
+}
+
+#getback{
+	display:none;
+}
+
+#back, #back:hover, #back:visited{
+	background-color:none;
+	cursor:default;
+	color:black;
+	font-size:0.65em;
+}
+
+/*xpuf*/
+
+.wrap{
+	height:70%;
+	width:53%;
+	
+}
+
+.uptitle {
+	font-size:2vh;
+}
+
+.upclose {
+	font-size:2vh;
+}
+
+/*main*/
+
+section#main{
+	position:fixed;
+	top:0;
+	bottom:0;
+	overflow:hidden;
+	left:27%;
+	width:73%;
+	padding-left:1%;
+
+}
+
+#content{
+	padding-top:1%;
+	overflow-y:auto;
+	overflow-x:hidden;
+
+}
+
+.logo{
+	display:block;
+	width:70%;
+}
+
+
+[class*="col"] p {
+	font-size:0.55em;
+}
+
+.short{
+	display:none;
+}
+
+.long{
+	display:block;
+}
+
+
+.subrow p{
+	padding-right:7%;
+
+}
+
+
+p.subcl3{
+	padding-right:5%;
+}
+
+.row:not(:last-child){
+	border-bottom-width:5px;
+}
+
+
+#categories{
+	border-bottom-width:7px;
+	width:99%;
+	margin-left:0;
+}
+
+}
+
+/* --------- 6th case --------- */
+@media all and (max-height: 450px) {
+
+	
+	.upbar{
+	height:7%;
+
+}
+}