From 5b21b33d091bf71acd1b0b1a0eef33fbc34b2837 Mon Sep 17 00:00:00 2001
From: martin <martin@xpub.nl>
Date: Thu, 9 Jun 2022 22:35:29 +0200
Subject: [PATCH] Upload files to 'notitleyet'

---
 notitleyet/grey-main.css    | 932 +++++++++++++++++++++++++++++++++++
 notitleyet/main-backup.css  | 926 +++++++++++++++++++++++++++++++++++
 notitleyet/main-squares.css | 948 ++++++++++++++++++++++++++++++++++++
 3 files changed, 2806 insertions(+)
 create mode 100644 notitleyet/grey-main.css
 create mode 100644 notitleyet/main-backup.css
 create mode 100644 notitleyet/main-squares.css

diff --git a/notitleyet/grey-main.css b/notitleyet/grey-main.css
new file mode 100644
index 0000000..5a0b21c
--- /dev/null
+++ b/notitleyet/grey-main.css
@@ -0,0 +1,932 @@
+@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;
+	color:white;
+    min-width:320px;        
+  
+}
+
+
+#wrapper {
+	position:fixed;
+  	top: 0;
+  	left: 0;
+  	bottom: 0;
+  	right: 0;
+  	z-index: -1;
+  	background-color: #2f2f2f;
+}
+
+/*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:tenor;
+	font-size:9vw;
+	float:left;
+	width:60%;
+	margin-bottom:5%;
+
+}
+
+.show{
+	font-size:0.9em;
+	color:#0f0;
+	text-decoration:none;
+}
+
+.show:hover{
+	color:magenta;
+}
+
+
+#sub{
+	white-space:nowrap;
+	font-family:inconsolata;
+	float:right;
+	padding-top:3%;
+	padding-right:3%;
+	width:40%;
+}
+
+
+#sub > a {
+	display:inline-block;
+	width:45%;
+	text-align:right;
+	font-size:0.8em;
+}
+
+#sub > 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;
+	
+}
+
+#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{
+	text-decoration:underline;
+	text-decoration-color:#0f0;
+	z-index:100;
+
+}
+
+#getback:hover{
+	text-decoration: overline;
+	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:#0f0;
+	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:white;
+	float:left;
+	font-size:3vh;
+}
+
+.upclose {
+	color:white;
+	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%;
+}
+
+.video-container{
+  overflow:hidden;
+  padding-top: 0%;
+  position: relative;
+}
+
+
+[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:0.65em;
+	line-height:1.5em;
+
+}
+
+.col1 {
+	width:13%;
+	display:initial;
+}
+
+.col6 {
+	width:65.25%;
+	padding-right:0;
+
+}
+
+[class*="subcl"]{
+	width:33%;
+	float:left;
+	
+}
+
+.col2 p,.col1 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:0.7em;
+}
+
+a{
+	color:white;
+	text-decoration-color:plum;
+
+	
+}
+
+.ext:hover {
+	text-decoration: overline;
+	text-decoration-color:#f3ca1b;
+}
+
+.int:hover {
+	text-decoration: overline;
+	text-decoration-color:magenta;
+}
+
+
+.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%;
+}
+
+#sub > 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%;
+}
+
+#sub > 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: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%;
+}
+
+#sub > a {
+	font-size:0.7em;
+	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:1em;
+	line-height:120%;	
+	
+}
+
+#getback{
+	display:none;
+}
+
+#back, #back:hover, #back:visited{
+	background-color:none;
+	cursor:default;
+	color:white;
+	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: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:0.55em;
+}
+
+.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:1.5em;
+}*/
+
+}
+
+/* --------- 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:4vw;*/
+	width:77%;
+	float:none;
+}
+
+#page-title {
+	margin-bottom:13%;
+}
+
+.show{
+	display:none;
+}
+
+#sub{
+	padding-top:0;
+	float:none;
+	width:100%;
+}
+
+#sub > 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:70%;
+	position:relative;
+	top:0;
+	left:0;
+	-webkit-transform:none;
+	-ms-transform:none;
+	transform:none;
+	/*font-size:calc(9px + 0.5vw);*/
+	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:5px;
+}
+
+
+#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%;
+
+}
+}
+
+/* hiding years */
+div#year2020 { display:none; }
\ No newline at end of file
diff --git a/notitleyet/main-backup.css b/notitleyet/main-backup.css
new file mode 100644
index 0000000..7297a92
--- /dev/null
+++ b/notitleyet/main-backup.css
@@ -0,0 +1,926 @@
+@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;
+}
+
+body{
+	font-family:inconsolata, sans-serif;
+	color:white;
+    min-width:320px;        
+  
+}
+
+
+#wrapper {
+	position:fixed;
+  	top: 0;
+  	left: 0;
+  	bottom: 0;
+  	right: 0;
+  	z-index: -1;
+  	background-color:  #2f2f2f;
+}
+
+/*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:tenor;
+	font-size:9vw;
+	float:left;
+	width:60%;
+	margin-bottom:5%;
+
+}
+
+.show{
+	font-size:7vw;
+	color:#0f0;
+	text-decoration:none;
+}
+
+.show:hover{
+	color:magenta;
+}
+
+
+#sub{
+	white-space:nowrap;
+	font-family:inconsolata;
+	float:right;
+	padding-top:3%;
+	padding-right:3%;
+	width:40%;
+}
+
+
+#sub > a {
+	display:inline-block;
+	width:45%;
+	text-align:right;
+	font-size:calc(9px + 0.9vw);
+}
+
+#sub > 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:#0f0;
+	z-index:100;
+
+}
+
+#getback:hover{
+	text-decoration: overline;
+	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:#0f0;
+	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%;
+}
+
+.video-container{
+  overflow:hidden;
+  padding-top: 0%;
+  position: relative;
+}
+
+
+[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,.col1 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:#0f0;
+
+	
+}
+
+.ext:hover {
+	text-decoration: overline;
+	text-decoration-color:#f3ca1b;
+}
+
+.int:hover {
+	text-decoration: overline;
+	text-decoration-color:magenta;
+}
+
+
+.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%;
+}
+
+#sub > 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%;
+}
+
+#sub > 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;
+}
+
+#page-title {
+	margin-bottom:13%;
+}
+
+.show{
+	display:none;
+}
+
+#sub{
+	padding-top:0;
+	float:none;
+	width:100%;
+}
+
+#sub > 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:6vw;
+	width:77%;
+	float:none;
+}
+
+#page-title {
+	margin-bottom:13%;
+}
+
+.show{
+	display:none;
+}
+
+#sub{
+	padding-top:0;
+	float:none;
+	width:100%;
+}
+
+#sub > 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:70%;
+	position:relative;
+	top:0;
+	left:0;
+	-webkit-transform:none;
+	-ms-transform:none;
+	transform:none;
+	font-size:calc(9px + 0.5vw);
+	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:5px;
+}
+
+
+#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%;
+
+}
+}
+
+/* hiding years */
+div#year2020 { display:none; }
\ No newline at end of file
diff --git a/notitleyet/main-squares.css b/notitleyet/main-squares.css
new file mode 100644
index 0000000..e42fdb4
--- /dev/null
+++ b/notitleyet/main-squares.css
@@ -0,0 +1,948 @@
+@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;
+}
+
+body{
+	font-family:inconsolata, sans-serif;
+	color:white;
+    min-width:320px;        
+  
+}
+
+
+#wrapper {
+	position:fixed;
+  	top: 0;
+  	left: 0;
+  	bottom: 0;
+  	right: 0;
+  	z-index: -1;
+  	background-color:  #2f2f2f;
+}
+
+/*header*/
+
+header{
+	position:relative;
+	width:100%;
+	padding-bottom:5%;
+	padding-left:1%;
+	display:block;
+	overflow:hidden;
+	margin-left:1.3%;
+	line-height:1.3vw;
+	background-color:#777;
+}
+
+header h1{
+	font-family:tenor;
+	font-size:9vw;
+	float:left;
+	width:60%;
+	margin-bottom:5%;
+
+}
+
+.show{
+	font-size:7vw;
+	color:#0f0;
+	text-decoration:none;
+}
+
+.show:hover{
+	color:magenta;
+}
+
+
+#sub{
+	white-space:nowrap;
+	font-family:inconsolata;
+	float:right;
+	padding-top:3%;
+	padding-right:3%;
+	width:40%;
+}
+
+
+#sub > a {
+	display:inline-block;
+	width:45%;
+	text-align:right;
+	font-size:calc(9px + 0.9vw);
+}
+
+#sub > 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:#0f0;
+	z-index:100;
+
+}
+
+#getback:hover{
+	text-decoration: overline;
+	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:#0f0;
+	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%;
+}
+
+.video-container{
+  overflow:hidden;
+  padding-top: 0%;
+  position: relative;
+}
+
+
+[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;
+}
+
+#content{
+	background-color:#555;
+	padding-left:1%;
+}
+
+.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;
+	box-shadow: 5px 10px:
+}
+
+.col6 {
+	width:65.25%;
+	padding-right:0;
+
+}
+
+.col6 p, .col1 p, .subcl3 p{
+	color:pink;
+}
+
+[class*="subcl"]{
+	width:33%;
+	float:left;
+	
+}
+
+.col2 p,.col1 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:#2f2f2f;
+	border-bottom-width:3px;
+	
+}
+
+#categories{
+	font-family:inconsolata, serif;
+	margin:0 auto;
+	width:100%;
+	border-bottom:none;
+	padding-left:1%;
+	/*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;
+	
+}
+
+.ext{
+	text-decoration-color:#0f0;
+}
+
+.ext:hover {
+	text-decoration: none;
+	/*text-decoration-color:#f3ca1b;*/
+	background-image: linear-gradient(to top, #555 , #555, #0f0, #555, #555);
+	
+}
+
+.int{
+	text-decoration-color:magenta;
+}
+
+.int:hover {
+	text-decoration: none;
+	background-image: linear-gradient(to top, #555 , magenta, #555);
+}
+
+
+.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%;
+}
+
+#sub > 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%;
+}
+
+#sub > 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:4vw;
+	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%;
+}
+
+#sub > 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:3vw;
+	width:77%;
+	float:none;
+}
+
+#page-title {
+	margin-bottom:13%;
+}
+
+.show{
+	display:none;
+}
+
+#sub{
+	padding-top:0;
+	float:none;
+	width:100%;
+}
+
+#sub > 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:70%;
+	position:relative;
+	top:0;
+	left:0;
+	-webkit-transform:none;
+	-ms-transform:none;
+	transform:none;
+	font-size:calc(9px + 0.5vw);
+	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:5px;
+}
+
+
+#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%;
+
+}
+}
+
+/* hiding years */
+div#year2020 { display:none; }
\ No newline at end of file