style.css

@font-face {
	font-family: pc;
	src: url('./PLANK___.TTF');
	font-weight: normal;
}

@font-face {
	font-family: toshiba;
	src: url('./Px437_ToshibaSat_8x14.ttf');
	font-weight: normal;
}
html{
}
:root{
	background-color: #3e424b;
	color:#fff;
	overflow:scroll;
	font: 16px toshiba;
}
*{
	box-sizing: border-box;
}
body{
	margin:0;
	height:100vh;
	background-image: url('https://i.gifer.com/WBVk.gif');
	background-repeat: repeat;
	display:flex;
	flex-direction: column;
}
h1{
	font: 64px pc;
}
h1, h2, h3, h4, h5, h6{
	margin:0;
}
/*custom scrollbar*/
::-webkit-scrollbar{
	width:5px;
	background-clip: padding-box;
}
::-webkit-scrollbar-track{
	background-color: transparent;
}
::-webkit-scrollbar-thumb{
	background-color: #49555e;
	border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover{
	background-color: #3b454b;
}
.navbar{
	position:sticky;
	top:0;
	background-color: #3e424b;
	padding:12px;
	display:flex;
	flex-direction: row;
	gap: 4px;
	width: fit-content
}
.container{
	padding:12px;
	flex:1;
}
.current{
	color: #44b287;
}
hr{
	margin-top:0;
	margin-bottom:4px;
	height:2px;
	width:70%;
	border:none;
	background-color:#fff;
}
.credit{
	color:rgb(153, 1, 255,0.4);
}
.credit p{
	margin:0;
}
.credit p a{
	color:rgb(153, 1, 255,0.4);
}
.credit p a:visited{
	color:rgb(153, 1, 255,0.4);
}
.credit p a:hover{
	color:rgba(1, 255, 170, 0.4);
}
.footer{
	/* margin-top:auto; */
	height:62px;
	clear: both;
	background-color: #3e424b;
	vertical-align: middle;
	overflow: hidden;
}
.footer p{
	margin:0;
	margin-bottom:2px;
}
.footer-text{
	padding-left:4px;
	padding-right:4px;
	display:inline-block;
	background-color:rgba(0,0,0,0.4);
	z-index: 99 !important;
	height:1.1lh;
	position:relative;
}
.rainbow{
	background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
	-webkit-background-clip: text;
	background-clip:text;
	color:transparent;
	animation: rainbow_animation 6s ease-in-out infinite;
	background-size: 400% 100%;
}
.audiobtn{
	position:fixed;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	top:0;
	right:0;
	background-color: #3e424b;
	width:100px;
	height:40px;
	transition: transform 0.3s ease-in-out;
}
.audiobtn-open{
	transform: translateX(-255px)
}
.clickable{
	cursor: pointer;
}
.link-container{
	margin-top:22px;
	display:flex;
	flex-direction: column;
	gap:12px;
	align-items: center;
	justify-content: flex-start;
}
.link-container a{
	text-align: center;
	text-decoration: none;
	font-size:32px;
	background-color: #6666ff;
	color:#fff;
	transition: width 0.6s ease-in-out, font-size 0.6s ease-in-out;
	width: 10%;
	padding-top:12px;
	padding-bottom:12px;
}
.link-container a:hover{
	width:15%;
	font-size: 42px;
}
.bio{
	background-color: #3e424b;
	margin-top:24px;
	padding:12px;
	display:flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	gap:12px;
	margin-left: 35%;
	margin-right: 35%;
	border: 1px solid #fff;
	border-radius: 5px;
}
.pfp img{
	border-radius: 50%;
	border: 3px solid #fff;
	width:128px;
	height:128px;
}
.bio-text{
	background-color: #2d3036;
	padding: 8px;
	margin-left: 15%;
	margin-right: 15%;
}
.link-container a:visited{
	color:#fff;
}
a{
	color:#6666ff;
}
a:visited{
	color:#6666ff;
}
.scroller{
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position:relative;
	width:100vw;
	vertical-align: middle;
	height:50%;
}
.scroller-item{
	white-space: nowrap;
	display:inline-block;
	position:absolute;
	vertical-align: middle;
}
.scroller-item p{
	display:inline-block; padding:0 20px;
}
@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}