6bit.ch/html/style.css

* {
	margin: 0;
	padding: 0;
	font-family: "deltarune", monospace;
	box-sizing: border-box;
}

body {
	background-color: #101010;
	padding: 0;
	margin:0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	-webkit-user-select: none; /* Chrome, Safari */
	-moz-user-select: none;    /* Firefox */
	-ms-user-select: none;     /* old IE/Edge */
	user-select: none;         /* standard */
}

#hdr {
	position: block;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	pointer-events: none;
}

#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

#particles {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

h1, h2, h3, h4, p {
	color: #F0F0F0;
}

.reroll-btn {
    background: none;
    border: none;
    color: magenta;
    font-size: 13px;
    cursor: pointer;
    opacity: 0.6;
    padding: 4px 0;
}

.reroll-btn:hover {
    opacity: 1;
}

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

.footer {
	width: 100%;
	flex-shrink: 0;
	text-align: center;
	padding: 15px;
	margin-top: auto;
}
	
.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 {
	max-width: 720px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-top: 1.5rem;
	flex-grow: 1;
}

.col {
	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%);

}

.col-full {
	grid-column: 1 / -1;
}

.contentindex {
	padding: 3%;
	width: 100%;
	text-align: left;
	border: 1px;
	border-style: dotted;
	border-color: cyan;
	text-align: center;
	background-color: rgba(16, 16, 16, 0.69);
}

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

.contentindexqlpycon {
	padding: 3%;
	width: 100%;
	border: 1px;
	border-style: dotted;
	border-color: cyan;
	text-align: center;
}

.contentindexqlpycon pre {
	font-size: 15px;
}

.contentindexqlpycon h1 {
	padding: 1.25rem 0;
}

.contentindexqlpycon h2 {
	padding: 1rem 0;
}

.contentindexqlpycon h3 {
	padding: 1rem 0;
}

.contentindexqlpycon h4 {
	text-align: left;
	padding-top: 1rem;
}

.contentindexqlpycon p {
	text-align: left;
}

.contentindexqlpycon a {
	color: white;
	text-decoration: none;
	border-bottom: 1px dotted magenta; 
}

.qlpyconcodeblock {
	font-size: 14px;
	border: 1px dotted #ff00ff;
	margin: 1rem;
	padding: 1rem 0.5rem;
}

.qlpyconcode {
	padding: 2px 16px;
	color: cyan;
	font-size: 14px;
	user-select: text;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
}

#qlpycon {
	max-width: 672px;
	height: 500px;
}

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

.contentindex p {
	margin-top: 0px;
	margin-bottom: 0px;
}

.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;
  }
}

.headerimg {
	text-align: center;
}

.headerimg img {
	height: 80px;
	width: auto;
	margin: 0 auto;
}

.linksblock {
	display: grid;
	gap: 1.5rem;
	border: 1px dotted magenta;
	padding: 1rem 1.25rem;
	justify-content: center;
        grid-template-columns: 1fr 1fr;
	background-color: rgba(16, 16, 16, 0.69);
}

.linkgroup {
	flex: 1;
}

.linkgroup-everywhere {
        grid-column: 1 / -1;
}

.linkgroup-everywhere ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 1.5rem;
	justify-content: center;
}

.linkgroup h4 {
	color: #101010;
	background: linear-gradient(90deg, rgba(255,0,255,1) 0%, rgba(10,10,10,0) 100%);
	font-size: 14px;
	font-weight: 500;
	padding: 2px 4px;
	margin-bottom: 4px;
}

.linkgroup ul {
	list-style: none;
	padding: 0;
}

.linkgroup a {
	color: #ffffff;
	text-decoration: none;
	font-size: 14px;
	display: block;
	padding: 2px 5px;
}

.linkgroup a:hover {
	color: magenta;
}

.things-block {
	border: 1px dotted magenta;
	background-color: rgba(16, 16, 16, 0.69);
}

.things-block summary {
	cursor: pointer;
	padding: 4px 4px;
	font-size: 14px;
	font-weight: 500;
	color: #101010;
	background: linear-gradient(90deg, rgba(255,0,255,1) 0%, rgba(10,10,10,0) 100%);
	list-style: none;
	user-select: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.things-block summary::-webkit-details-marker {
	display: none;
}

.things-block summary:hover {
	background: linear-gradient(90deg, rgba(255,0,255,0.8) 0%, rgba(10,10,10,0) 100%);
}

.things-block summary::after {
	content: '▼';
	display: inline-block;
	margin-right: 6px;
	color: white;
	transition: transform .2s;
}

.things-block[open] summary::after {
	transform: rotate(180deg);
}

.things-block[open] summary {
	margin-bottom: 1rem;
}

#game {
        display: block;
        width: 100%;
        border: 1px dotted cyan;
	background-color: rgba(16, 16, 16, 0.69);
}

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

@font-face {
	font-family: "deltarune";
	src: url("fonts/inconreg.ttf") format('truetype');
	font-display: swap;
}

@media (max-width: 480px) {
	.main {
		gap: 1rem;
	}
	.linksblock {
		gap: 1rem;
	}
	.artitem img {
		height: 100px;
	}
}