diff --git a/notitleyet/main_2.css b/notitleyet/main_2.css
new file mode 100644
index 0000000..0fd3ba3
--- /dev/null
+++ b/notitleyet/main_2.css
@@ -0,0 +1,206 @@
+@import url("main.css");
+
+
+body{
+	color:black;
+}
+
+#wrapper {
+	background-color:white;
+}
+
+/*header*/
+
+header{padding-bottom:2%;}
+
+header h1{float:none;}
+
+#homebttn{
+	background-color: inherit;
+	text-align:right;
+	color:black;
+	position:absolute;
+	top:0;
+	right:0;
+	margin-right:6%;
+	margin-top:15px;
+	padding:0.3% 0 0 0.3%;
+	font-size:0.6em;
+	z-index:44;
+}
+
+
+#project-title {
+	font-size:1.4em;
+	line-height:135%;
+	margin-bottom:1%;
+}
+
+#student-name {
+	margin-bottom:0;
+	font-weight:normal;
+	font-size:0.8em;
+}
+
+a#student-page{color:black;}
+
+#hleft-text{
+	overflow-y:auto;
+	overflow-x:hidden;
+	padding-right:1%;
+	box-sizing:border-box;
+	cursor:default;
+
+}
+
+#ihtp{
+	margin-top:3%;
+	width:80%;
+	color:black;
+}
+
+#about-student{
+	width:95%;
+	color:#2f2f2f;
+	font-size:1em;
+	font-style:italic;
+}
+
+object{
+	padding-bottom:7%;
+}
+
+hr{
+	width:50%;
+	color:#ccc;
+}
+
+.show{
+	font-size:1em;
+}
+
+#project-link{
+	color:black;
+}
+
+
+/*section*/
+
+section#main{
+	overflow:auto;
+	padding-left:1.5%;
+}
+
+#galleries{
+	padding-top:3%;
+}
+
+.gal-title{
+	font-size:0.8em;
+}
+
+#publist {
+	line-height:80%;
+}
+
+#galleries li, #galleries p{
+	color:black;
+	font-size:0.9em;;
+}
+
+.workimg{
+	max-width: 47%;
+  	height: auto;
+	padding: 0.5% 0.5% 0.5% 0;
+}
+
+@media all and (min-width: 600px) and (max-width: 720px){
+
+#galleries{
+	padding-top:1%;
+}
+
+#galleries li, #galleries p{
+	font-size:0.8em;
+}
+
+}
+
+@media all and (min-width: 720px) and (max-width: 992px){
+
+#galleries{
+	padding-top:1%;
+}
+
+#galleries li, #galleries p{
+	font-size:0.8em;;
+}
+
+}
+
+@media all and (max-width: 992px){
+
+/*header*/
+#sub{
+	width:30%;
+	padding-right:5%;
+	white-space:normal;
+}
+
+#student-name{
+	line-height:125%;
+}
+
+#ihtp, #about-student, #ihtp a{
+	color:white;
+}
+
+}
+
+@media all and (min-width: 992px){
+
+
+#homebttn{
+	margin-right:3%;
+	margin-top:0.7%;
+}
+
+/*header*/
+
+
+#student-name {
+	font-size:0.6em;
+}
+
+
+/*main*/
+section#main{
+	width:74%;
+	left:27%;
+
+
+}
+
+#galleries{
+	padding-left:1%;
+}
+
+#galleries li, #galleries p{
+	font-size:0.62em;
+}
+
+}
+
+@media all and (min-width: 1400px){
+
+#galleries li, #galleries p{
+	font-size:0.55em;
+}
+
+.gal-title{
+	font-size:0.73em;
+}
+
+
+}
+
diff --git a/notitleyet/style_2.css b/notitleyet/style_2.css
new file mode 100644
index 0000000..45c104e
--- /dev/null
+++ b/notitleyet/style_2.css
@@ -0,0 +1,900 @@
+@font-face {
+    font-family: inconsolata;
+    src: url(fonts/inconsolata.ttf);
+}
+
+@font-face {
+    font-family: inconsolatabold;
+    src: url(fonts/inconsolatabold.ttf);
+}
+
+@font-face {
+    font-family: courierprime;
+    src: url(fonts/courierprime.ttf);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body{
+	font-family:inconsolata, sans-serif;
+	color:white;
+}
+
+
+#wrapper {
+	position:fixed;
+  	top: 0;
+  	left: 0;
+  	bottom: 0;
+  	right: 0;
+  	z-index: -1;
+  	background-color:  #ff0000;
+}
+
+/*header*/
+
+header{
+	position:relative;
+	width:100%;
+	padding-bottom:5%;
+	display:block;
+	overflow:hidden;
+	margin-left:1.3%;
+	line-height:1.3vw;
+}
+
+header h1{
+	font-family:courierprime;
+	font-size:9vw;
+	float:left;
+	width:60%;
+	margin-bottom:5%;
+
+}
+
+
+#links{
+	white-space:nowrap;
+	font-family:inconsolata;
+	float:right;
+	padding-top:3%;
+	padding-right:3%;
+	width:40%;
+}
+
+
+#links > a {
+	display:inline-block;
+	width:45%;
+	text-align:right;
+	font-size:calc(9px + 0.9vw);
+}
+
+#links > a:visited {
+	color:white;
+	}
+
+
+#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:white;
+	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:calc(8px + 1.5vh);
+	line-height:130%;
+	
+	
+}
+
+#hleft-text:target{
+	 display:block;
+
+	
+}
+
+#getback{
+	text-decoration:underline;
+	text-decoration-color:#99ff99;
+
+}
+
+#getback:hover{
+	text-decoration: overline;
+	font-family:inconsolatabold;
+	text-decoration-color:magenta;
+}
+
+#back, #back:hover, #back:visited{
+	text-decoration:none;
+	color:white;
+}
+
+
+/*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:#99ff99;
+	position:relative;
+
+}
+
+.upbar a {
+	display:block;
+	height:100%;
+}
+
+.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:3vh;
+}
+
+.upclose {
+	color:black;
+	float:right;
+	text-decoration:none;
+	font-size:3vh;
+}
+
+.upclose:hover {
+	color:magenta;
+}
+
+
+
+.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%;
+}
+
+[id*="att-video"] > .wrap{
+	background:rgba(0,0,0,0);
+
+}
+
+/*main*/
+
+section#main{
+	position:relative;
+	margin-left:0;
+	left:0;
+	width:100%;
+	padding-left:1%;
+	display: flex;
+    flex-direction: column;
+}
+
+.logo{
+	display:none;
+}
+
+[class*="col"]{
+	float:left;
+	width:21.75%;
+	height:100%;
+	display: flex;
+    flex-direction: column;
+	padding-right:2%;
+}
+
+
+[class*="col"] p, img, h2{
+	padding-right:7%;
+
+}
+
+[class*="col"] p{
+	font-size:calc(9px + 0.6vw);
+	line-height:130%;
+
+}
+
+.col1 {
+	width:13%;
+	display:initial;
+}
+
+.col6 {
+	width:65.25%;
+	padding-right:0;
+
+}
+
+[class*="subcl"]{
+	width:33%;
+	float:left;
+	
+}
+
+.col2 p {
+	word-wrap:break-word;
+
+}
+
+p.subcl3{
+	padding-right:1%;
+}
+
+.row{
+	padding-bottom:2.2vh;
+	padding-top:2.2vh;
+	border-bottom-style:solid;
+	border-bottom-color:white;
+	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:2.7vw;
+}
+
+a{
+	color:white;
+	text-decoration-color:#99ff99;
+}
+
+.ext:hover {
+	text-decoration: overline;
+	font-family:inconsolatabold;
+	text-decoration-color:yellow;
+}
+
+.int:hover {
+	text-decoration: overline;
+	font-family:inconsolatabold;
+	text-decoration-color:magenta;
+}
+
+#show:hover{
+	font-family:courierprime;
+}
+
+
+.gradShow {
+	font-weight:bold;
+}
+
+
+.row::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+/* --------- 2nd case --------- */
+
+@media all and (min-width: 600px) and (max-width: 720px){
+
+/*header*/
+
+#ihtp{
+	font-size:calc(9px + 1.7vh);
+	line-height:130%;
+}
+
+#links > a {
+	width:47%;
+}
+
+/*xpuf*/
+
+.wrap {
+	height:85%;
+}
+
+
+/*main*/
+
+
+[class*="col"]{
+	width:20.75%;
+	
+}
+
+.col1 {
+	width:17%;
+}
+
+.col6 {
+	width:62.25%;
+}
+
+[class*="col"] p{
+	font-size:calc(10px + 0.6vw);
+
+	
+}
+
+.row{
+	border-bottom-width:4px;
+	
+}
+
+#categories{
+	border-bottom-width:4px;
+}
+
+#categories h2{
+	font-size:2.5vw;
+}
+
+
+
+}
+
+
+/* --------- 3rd case --------- */
+
+@media all and (min-width: 720px) and (max-width: 992px){
+
+
+/*header*/
+
+#ihtp{
+	font-size:calc(11px + 1.7vh);
+	line-height:130%;
+}
+
+#links > a {
+	width:47%;
+	font-size:2.1vw;
+}
+
+/*xpuf*/
+
+
+/*main*/
+
+[class*="col"]{
+	width:20.75%;
+	
+}
+
+.col1 {
+	width:17%;
+}
+
+.col6 {
+	width:62.25%;
+}
+
+
+[class*="col"] p{
+	font-size:calc(11px + 0.6vw);
+
+	
+}
+
+.row{
+	border-bottom-width:5px;
+	
+}
+
+p.subcl3{
+	padding-right:5%;
+}
+
+#categories{
+	border-bottom-width:5px;
+}
+
+
+#categories.row {
+	width:100%;
+
+}
+
+
+#categories h2{
+	font-size:2.1vw;
+}
+
+
+}
+
+/* --------- 4th case --------- */
+
+@media all and (min-width: 992px) and (max-width: 1400px) {
+
+/*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:7vw;
+	width:77%;
+	padding-bottom:3%;
+	-webkit-padding-after:7%;
+	float:none;
+}
+
+#show{
+	display:none;
+}
+
+#links{
+	padding-top:0;
+	float:none;
+	width:100%;
+}
+
+#links > a {
+	font-size:calc(10px + 0.6vw);
+	width: 35%;
+	text-align:left;
+}
+
+
+#hleft-text{
+	position:relative;
+	display:block;
+	background:none;
+	padding-top:5%;
+	width:100%;
+	overflow-y:auto;
+	overflow-x:hidden;
+	padding-right:30%;
+	box-sizing:initial;
+	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:calc(8px + 0.6vw);
+	line-height:120%;	
+	
+}
+
+#getback{
+	display:none;
+}
+
+#back, #back:hover, #back:visited{
+	background-color:none;
+	cursor:default;
+}
+
+/*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:25%;
+	width:75%;
+	padding-left:1%;
+
+}
+
+#content{
+	padding-top:1%;
+	overflow-y:auto;
+	overflow-x:hidden;
+
+}
+
+.logo{
+	display:block;
+	width:70%;
+}
+
+
+[class*="col"]{
+	width:20.75%;
+	
+}
+
+.col1 {
+	width:17%;
+}
+
+.col6 {
+	width:62.25%;
+}
+
+[class*="col"] p {
+	font-size:calc(10px + 0.6vw);
+}
+
+.subrow p{
+	padding-right:7%;
+
+}
+
+p.subcl3{
+	padding-right:5%;
+}
+
+.row{
+	border-bottom-width:5px;
+}
+
+
+#categories{
+	margin-left:0;
+	border-bottom-width:5px;
+	width:98%;
+}
+
+#categories h2{
+	font-size:calc(11px + 0.6vw);
+}
+
+}
+
+/* --------- 5th case --------- */
+
+@media all and (min-width: 1400px){
+
+/*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:7vw;
+	margin-bottom:13%;
+	width:77%;
+	float:none;
+}
+
+#show{
+	display:none;
+}
+
+#links{
+	padding-top:0;
+	float:none;
+	width:100%;
+}
+
+#links > a {
+	font-size:1.2em;
+	width: 35%;
+	text-align:left;
+}
+
+
+#hleft-text{
+	position:relative;
+	display:block;
+	background:none;
+	margin-top:9%;
+	width:100%;
+	overflow-y:auto;
+	overflow-x:hidden;
+	padding-right:30%;
+	box-sizing:initial;
+	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:calc(9px + 0.6vw);
+	line-height:125%;
+	
+}
+
+#getback{
+	display:none;
+}
+
+#back, #back:hover, #back:visited{
+	background-color:none;
+	cursor:default;
+}
+
+/*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:25%;
+	width:75%;
+	padding-left:1%;
+
+}
+
+#content{
+	padding-top:1%;
+	overflow-y:auto;
+	overflow-x:hidden;
+
+}
+
+.logo{
+	display:block;
+	width:70%;
+}
+
+
+[class*="col"]{
+	width:20.75%;
+	
+}
+
+.col1 {
+	width:17%;
+}
+
+.col6 {
+	width:62.25%;
+}
+
+
+[class*="col"] p {
+	font-size:calc(8px + 0.6vw);
+}
+
+.subrow p{
+	padding-right:7%;
+
+}
+
+
+p.subcl3{
+	padding-right:5%;
+}
+
+.row{
+	border-bottom-width:7px;
+}
+
+
+#categories{
+	border-bottom-width:7px;
+	width:99%;
+	margin-left:0;
+}
+
+#categories h2{
+	font-size:calc(12px + 0.6vw);
+}
+
+}
+
+/* --------- 6th case --------- */
+@media all and (max-height: 450px) {
+
+	[id*="att-video"] > .wrap{
+	width:400px;
+}
+	
+	.upbar{
+	height:7%;
+
+}
+}
\ No newline at end of file