6bit.ch/html/style.css

* {
	margin: 0;
	padding: 0;
	font-family: "FiraSans", sans-serif;
}

body {
	padding: 0;
	margin:0;
	background-color: #101010
}

div {box-sizing: border-box;}

#starshine {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -5;
	overflow: hidden;
}    
         
.shine {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	background-image: url(https://6bit.ch/spark.png);
	background-repeat: no-repeat;
	background-position:center;
	background-size: 100% 100%;
	overflow: hidden;
	z-index: 2;
	color: transparent;
	-moz-opacity: 0.0;
	opacity: 0.0;
	animation: glitter 6s linear 0s infinite normal;
	-webkit-animation: glitter 6s linear 0s infinite normal;
	-moz-animation: glitter 8s linear 0s infinite normal;
	-ms-animation: glitter 8s linear 0s infinite normal;
	-o-animation: glitter 8s linear 0s infinite normal;
}

.shine.small {
	width: 1px;
	height: 1px;
}

.shine.medium {
	width: 3px;
	height: 3px;
}

.shine.large {
	width: 5px;
	height: 5px;
}

/*CSS3 keyframes for glittering effect*/
@-webkit-keyframes glitter {
	0% {
		-webkit-transform: scale(0.3) rotate(0deg);
		opacity: 0;
	}
	25% {
		-webkit-transform: scale(1) rotate(360deg);
		opacity: 1;
	}
	50% {
		-webkit-transform: scale(0.3) rotate(720deg);
		opacity: 0;
	}
	100% {
		-webkit-transform: scale(0.3) rotate(0deg);
		opacity: 0;
	}
}

.snake-box {
	width: 99%;
	position: relative;
	top: 0px;
	text-align: center;
	margin-bottom: 1%;
	z-index: 500;
	text-align: center;
	margin-bottom: 1%;
	border: 1px cyan dotted;
}

.footer {
	width: 100%;
	color: #101010;
	position: relative;
	text-align: center;
	padding-top: 3%;
	background-color: #101010;
}
	
.footer p {
	font-size: 13px;
	color: #FFFFFF;
	padding: 0px;
	margin-top: 0px;
}

.footer a {
	font-size: 13px;
	color: #FFFFFF;
	text-decoration: none;
	padding: 0px;
	margin-top: 0px;
}

.headerimg img {
	width: auto;
	margin: 50px;
	height: auto;
	max-height: 125px;
}

.main {
	width: 100%;
	height: auto;
}

.main:after {
	content:"";
	display: table;
	clear: both;
}

.col {
	position: relative;
	color: white;
}

.navblock {
	border: 1px;
	border-style: dotted;
	border-color: magenta;
	padding-right: 25px;
	padding-bottom: 5px;
}

.active {
	background: linear-gradient(90deg, rgba(255,0,255,0.2) 0%, rgba(10,10,10,0) 100%);

}

.left {
	width: 15%;
	float: left;
	left: 3%;
}

.left h4 {
	text-decoration: none;
	padding-right: 50px;
	padding-left: 5px;
	padding-bottom: 2px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 3px;
	color: #101010;
	background: rgb(0,255,255);
	background: linear-gradient(90deg, rgba(255,0,255,1) 0%, rgba(10,10,10,0) 100%);
	font-size: 17px;
	font-weight: 500;
}

.left ul {
	display: flex;
	width: auto;
	padding: 5px;
	color: #FFFFFF;
	text-decoration: none;
	padding-left: 15px;
	font-size: 15px;
	list-style-type: none;
}

.left li {
	width: 100%;
	text-decoration: none;
}

.left a {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
}

.left a:hover {	
	background: linear-gradient(90deg, rgba(255,0,255,0.2) 0%, rgba(10,10,10,0) 100%);
}

.right {
	position: relative;
	width: 69%;
	float: left;
	left: 7%;
}

.contentindex {
	padding: 3%;
	width: 100%;
	z-index: 2200;
	text-align: left;
	border: 1px;
	border-style: dotted;
	border-color: cyan;
	text-align: center;
}

.contentindexart {
	padding: 3%;
	width: 100%;
	z-index: 2200;
	text-align: left;
	border: 1px;
	border-style: dotted;
	border-color: cyan;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
}

.contentindex img {
	width: 250px;
	height: auto;
	padding-top: 25px;
	padding-bottom: 25px;
	margin: auto;
	display: block;
}

.contentindex p {
	margin-top: 5px;
	margin-bottom: 5px;
	padding-bottom: 25px;
}

.contentindex a {
	margin-top: 5px;
	margin-bottom: 5px;
	color: white;
	text-decoration: none;
	border-bottom: 1px dotted magenta; 
}

.contentindex a:hover {
	color: magenta;
}

.break {
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0;
}

.artdesc {
	text-align: center;
	font-size: 13px;
}

.artitem img {
	padding: 0;
	height: 150px;
	width: auto;
}

.artitem p {
	animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 5px magenta;
  }

  to {
    text-shadow: 0 0 5px magenta;
  }
}

#@-webkit-keyframes glow {
#  from {
#    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
#  }
#
#  to {
#    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
#  }
#}

@font-face {
	font-family: FiraSans;
	src: url("fonts/FiraSans-Medium.otf") format: ("opentype");
}

@media(max-width: 1350px) {
	.main {
		overflow: hidden;
		padding: 0;
		margin: 0;
	}
	.headerimg {
		width 248px;
		margin-left: 5%;
		margin-right: 5%;
	}
	.headerimg img {
		display: block;
		position: center;
		margin: 0;
		padding-top: 33px;
		padding-bottom: 33px;
		width: auto;
		height: auto;
		max-height: 69px;
		margin: auto;
	}
	.col {
		overflow: hidden;
		width: 100%;
		left: 0;
		right: 0;
	}
	.left {
		overflow: hidden;
		width: 100%;
	}
	.navblock h4 {
		font-size: 14px;
	}
	.navblock ul {
		font-size: 14px;
	}
	.right {
		overflow: hidden;
		margin-top: 100px;
		border: 1px cyan dotted;
		width: 100%;
		overflow: hidden;
	}
	.contentindex {
		overflow: hidden;
		border: none;
		padding: 0;
		margin: 0;
	}
	.contentindexart {
		overflow: hidden;
		border: none;
		margin: 0;
		padding: 0;
		display: block;
		justify-content: center;
	}
	.artitem {
		padding-top: 25px;
		padding-bottom: 25px;
	}
	.artitem img {
		padding: 0;
		height: auto;
		width: 69%;
	}
	.right p {
		margin: auto;
		font-size: 12px;
	}
	.footer {
		margin-top: 100px;
	}
	.footer a {
		font-size: 11px;
	}
	.footer p {
		font-size: 11px;
	}
}