1 files changed, 249 insertions, 0 deletions

diff --git a/showcase/css/main.css b/showcase/css/main.css
new file mode 100644
index 0000000..866e464
--- /dev/null
+++ b/showcase/css/main.css
@@ -0,0 +1,249 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
+
+html{
+	background-color: #000000;
+	background-image: url("../i/bg.png");
+	background-repeat: no-repeat;
+	background-size: cover;
+}
+
+body{
+	background-color: #00000000;
+	color: #E8C0A0;
+	font-size: 1.1em;
+	margin: auto;
+}
+
+h1,h2,h3{
+	margin: .5em;
+	font-family: "Noto Serif", serif;
+}
+h1 a{
+	color: #E8C0A0;
+}
+h1 a:hover{
+	color: #F8D0B0;
+}
+
+p{
+	font-size: .95em;
+	padding-left: 3%;
+	padding-right: 3%;
+}
+
+a{
+	color: #FFB060;
+	text-decoration: none;
+}
+a:hover{
+	color: #FFE090;
+}
+
+img{
+	width: 50%;
+	padding-left: 20%;
+}
+
+video{
+	display: block;
+	max-width: 100%;
+	width: 80%;
+	padding-left: 4%;
+}
+
+hr{
+	color: #AA9988;
+}
+
+header{
+	font-size: .9em;
+}
+header a:nth-child(1){
+	background-color: #00000033;
+	padding: 0px 3px;
+	border-radius: 5px;
+}
+header i{
+	font-size: .6em;
+	font-weight: normal;
+	display: none;
+}
+
+nav{
+	text-align: center;
+	color: #998877;
+	display: none;
+}
+nav a{
+	font-size: 1.03em;
+	padding-left: 1%;
+	padding-right: 1%;
+	width: 80%;
+	margin-bottom: 5%;
+}
+nav i{
+	font-size: .85em;
+	color: #D4A470;
+	padding-left: 1%;
+	display: none;
+}
+
+main{
+	width: 95%;
+	padding: 5% 2% 5% 2%;
+}
+
+footer{
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	font-size: .8em;
+	font-family: "Noto Serif", serif;
+	background-color: #30180055;
+}
+footer p{
+	text-align: center;
+	margin: .0%;
+	padding: .2%;
+	color: #D4A470;
+	text-shadow: 2px 2px 5px #F8A870;
+}
+
+table{
+	font-size: .8em;
+}
+table tr:nth-child(odd){
+	background-color: #302000CC;
+}
+table tr:nth-child(even){
+	background-color: #382800CC;
+}
+td{
+	text-align: center;
+}
+
+form{
+	background-color: #30200088;
+	border-radius: 15px;
+	outline: none;
+}
+fieldset,input,textarea{
+	margin-bottom: 2%;
+	border-radius: 8px;
+	border-color: #807870;
+}
+fieldset legend{
+	font-weight: bold;
+	font-size: 1.25em;
+}
+label{
+	display: block;
+	padding-top: 1.3%;
+}
+input,textarea{
+	background-color: #00000055;
+	color: #FFDDBB;
+}
+textarea{
+	margin-left: 5%;
+	width: 85%;
+	height: 75%;
+}
+
+.btn{
+	background-color: #302000C0;
+	color: #E89050;
+	border: none;
+	font-size: 1.1em;
+	padding: 2px 3px;
+	display: inline-block;
+	border-radius: 3px;
+	box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(200,160,100,.7);
+}
+.btn:hover{
+	color: #DDC000;
+	background-color: #200000E0;
+	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2), 0 5px 8px 0 rgba(200,180,120,18.17);
+}
+nav .btn:nth-last-child(-n+3){
+	color: #E0A050;
+	font-size: .98em;
+}
+
+@media screen and (min-width:600px),print{
+	.grid{
+		display: grid;
+		grid-template-columns: auto auto;
+		grid-gap: 0px;
+	}
+
+	body{
+		width: 95%;
+	}
+
+	header{
+		width: 90%;
+		text-align: center;
+	}
+	#nav-btn{
+		display: none;
+	}
+
+	nav{
+		width: 95%;
+		display: block;
+		padding-top: .4em;
+		position: sticky;
+		top: 0;
+	}
+	nav a{
+		width: auto;
+		margin-bottom: auto;
+	}
+
+	footer{
+		width: 95%;
+	}
+
+	table{
+		font-size: .9em;
+	}
+
+	.btn{
+		font-size: 1.2em;
+		padding: 3px 5px;
+	}
+}
+
+@media screen and (min-width:900px),print{
+	body{
+		width: 85%;
+	}
+
+	header{
+		width: 80%;
+	}
+	header i{
+		display: inline;
+	}
+
+	nav{
+		width: 85%;
+	}
+	nav i{
+		display: inline;
+	}
+
+	main{
+		width: 70%;
+		padding: 3% 12% 3% 12%;
+	}
+
+	footer{
+		width: 85%;
+	}
+
+	table{
+		font-size: 1em;
+	}
+}