1 files changed, 211 insertions, 0 deletions

diff --git a/showcase/bike/css/main.css b/showcase/bike/css/main.css
new file mode 100644
index 0000000..0699fb7
--- /dev/null
+++ b/showcase/bike/css/main.css
@@ -0,0 +1,211 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+@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: 120%;
+	color: #EEBB99;
+}
+
+body{
+	margin: auto;
+}
+
+h1,h2,h3{
+	margin: .5em;
+	font-family: "Noto Serif", serif;
+}
+
+p{
+	font-size: .95em;
+	padding-left: 3%;
+	padding-right: 3%;
+}
+
+a{
+	color: #FFC400;
+	text-decoration: none;
+}
+a:hover{
+	color: #FFF400;
+}
+
+img{
+	width: 50%;
+	padding-left: 20%;
+}
+
+video{
+	display: block;
+	max-width: 100%;
+	width: 80%;
+	padding-left: 4%;
+}
+
+hr{
+	color: #AA9988;
+}
+
+header{
+	text-align: center;
+	font-size: .9em;
+}
+header i{
+	font-size: .6em;
+	font-weight: normal;
+	display: none;
+}
+
+nav{
+	text-align: center;
+	color: #998877;
+}
+nav a{
+	font-size: 1.03em;
+	padding-left: 1%;
+	padding-right: 1%;
+}
+nav i{
+	font-size: .85em;
+	color: #FFAA77;
+	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: #30000055;
+}
+footer p{
+	text-align: center;
+	margin: .0%;
+	padding: .3%;
+	text-shadow: 3px 3px 8px #FFAA77;
+}
+
+table{
+	font-size: .8em;
+}
+table tr:nth-child(odd){
+	background-color: #332000CC;
+}
+table tr:nth-child(even){
+	background-color: #443000CC;
+}
+
+form{
+	background-color: #33200055;
+	outline: none;
+}
+fieldset,input,textarea{
+	margin-bottom: 2%;
+	border-color: #8F8880;
+}
+fieldset legend{
+	font-weight: bold;
+	font-size: 1.25em;
+}
+label{
+	display: block;
+	padding-top: 1.3%;
+}
+textarea{
+	background-color: #33200088;
+	color: #FFDDBB;
+}
+
+.btn{
+	background-color: #332000CC;
+	color: #FFA000;
+	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;
+	box-shadow: 0 8px 15px 0 rgba(0,0,0,0.2), 0 5px 8px 0 rgba(220,180,18,18.17);
+}
+nav .btn:nth-last-child(-n+3){
+	color: #CCB000;
+	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%;
+	}
+
+	nav{
+		width: 95%;
+	}
+
+	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;
+	}
+}