/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}

body{
background-image: url('https://sadhost.neocities.org/images/tiles/starsagain.gif');
background-color: #05004a;
margin: 7%;
font-family: 'Passero One', sans-serif;
font-size: 16px;
color: #00f7ff;
}

.sidebg{
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a023d5b0-5495-4037-b50a-818837258cb1/dairdgu-ff7360e0-ca9d-4c8d-b050-a86556ed5437.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiIvZi9hMDIzZDViMC01NDk1LTQwMzctYjUwYS04MTg4MzcyNThjYjEvZGFpcmRndS1mZjczNjBlMC1jYTlkLTRjOGQtYjA1MC1hODY1NTZlZDU0MzcuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.8YAM0KaPXigTtZXQADRdvhueNkAkhLNqf3m01djRcxk');
background-repeat: repeat-y;
background-position: top right;
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: 0;
}

.side{
background-color: #00095e;
width: 176px;
height: 100%;
padding: 1rem 0.5rem 1rem 1rem;
text-align: justify;
font-size: 15px;
display: flex;
flex-direction: column;
gap: 1rem;
background-image: url("https://www.transparenttextures.com/patterns/axiom-pattern.png");
}

.avatar{
width: 100%;
opacity: 0.9;
}

.desc{
padding: 0.5rem;
}

.sideheaders{
font-family: 'Bagel Fat One', serif;
font-weight: normal;
font-size: 28px;
color: #ff00d9;
}

.side ul{
padding-left: 2.5rem;
}

.side li{
list-style-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a023d5b0-5495-4037-b50a-818837258cb1/d8hjkfr-e0a44680-ec8a-4a39-8d25-d728d89676f1.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiIvZi9hMDIzZDViMC01NDk1LTQwMzctYjUwYS04MTg4MzcyNThjYjEvZDhoamtmci1lMGE0NDY4MC1lYzhhLTRhMzktOGQyNS1kNzI4ZDg5Njc2ZjEuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.AuZ5eR5DBTP5p8lNco4dVJ7tR_TzyGVqWisuBRn2eS0');
font-size: 16px;
font-family: "Underdog", serif;
margin-bottom: 5px;
}

.container{
display: flex;
flex-direction: column;
margin-left: 200px;
}

.headerwrapper{
display: flex;
flex-direction: row;
justify-content: space-between;
}

.title{
font-family: 'Bagel Fat One', sans-serif;
font-weight: normal;
color: #ff00d9;
font-size: 46px;
align-self: end;
margin-left: -1rem;
}

.h1{
font-family: 'Bagel Fat One', sans-serif;
font-weight: normal;
color: #ff00d9;
font-size: 20px;
align-self: end;
margin-left: -1rem;
}

.headerimg{
width: 285px;
align-self: end;
margin-right: -1rem;
margin-bottom: -1rem;
position: relative;
z-index: 1;
}

.boxgap{
display: flex;
flex-direction: column;
gap: 1rem;
}

.box{
display: flex;
flex-direction: row;
background-color: #00095e;
border: 3px solid #ff00d9;
background-image: url("https://www.transparenttextures.com/patterns/axiom-pattern.png");
}

.left{
border-right: 3px solid #ff00d9;
padding: 0.7rem;
text-align: center;
}

.icon{
border: 2px solid #ff00d9;
}

.right{
padding: 1rem;
}

a{
color: #ff00d9;
text-decoration: none;
}

a:visited{
color: #15ff00;
}

a:hover{
color: #00f7ff;
font-weight: bold;
}

a:active{
font-style: italic;
font-weight: normal;
}



::-webkit-scrollbar{
width: 8px; 
}
    
::-webkit-scrollbar-track{
background-color: transparent;
}

::-webkit-scrollbar-thumb{
background-color: #00f7ff;
}

#credit{
font-size: 12px;
position: fixed;
bottom: 0;
right: 0;
}

@media(max-width:760px){
body{
margin: 0;
padding: 1rem;
}
.sidebg{
background-image: none;
position: relative;
top: 0;
margin-bottom: 1rem;
width: 100%;
height: auto;
}
.side{
height: auto;
width: 100%;
text-align: center;
padding: 1rem;
}
.desc{
font-size: 16px;
}
.side ul{
padding: 0;
}
.side li{
display: inline;
margin-left: 4px;
}
.avatar{
width: 50%;
margin: 0 auto;
}
.container{
margin: 0;
}
.headerimg{
width: 180px;
}
.title{
font-size: 36px;
margin: 0;
}
}

	@-webkit-keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@-webkit-keyframes snowflakes-shake {
		0%,
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		50% {
			-webkit-transform: translateX(80px);
			transform: translateX(80px)
		}
	}
	
	@keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@keyframes snowflakes-shake {
		0%,
		100% {
			transform: translateX(0)
		}
		50% {
			transform: translateX(80px)
		}
	}
	
	.snowflake {
		position: fixed;
		top: -10%;
		z-index: 9999;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-animation-name: snowflakes-fall, snowflakes-shake;
		-webkit-animation-duration: 10s, 3s;
		-webkit-animation-timing-function: linear, ease-in-out;
		-webkit-animation-iteration-count: infinite, infinite;
		-webkit-animation-play-state: running, running;
		animation-name: snowflakes-fall, snowflakes-shake;
		animation-duration: 10s, 3s;
		animation-timing-function: linear, ease-in-out;
		animation-iteration-count: infinite, infinite;
		animation-play-state: running, running
	}
	
	.snowflake:nth-of-type(0) {
		left: 1%;
		-webkit-animation-delay: 0s, 0s;
		animation-delay: 0s, 0s
	}
	
	.snowflake:nth-of-type(1) {
		left: 10%;
		-webkit-animation-delay: 1s, 1s;
		animation-delay: 1s, 1s
	}
	
	.snowflake:nth-of-type(2) {
		left: 20%;
		-webkit-animation-delay: 6s, .5s;
		animation-delay: 6s, .5s
	}
	
	.snowflake:nth-of-type(3) {
		left: 30%;
		-webkit-animation-delay: 4s, 2s;
		animation-delay: 4s, 2s
	}
	
	.snowflake:nth-of-type(4) {
		left: 40%;
		-webkit-animation-delay: 2s, 2s;
		animation-delay: 2s, 2s
	}
	
	.snowflake:nth-of-type(5) {
		left: 50%;
		-webkit-animation-delay: 8s, 3s;
		animation-delay: 8s, 3s
	}
	
	.snowflake:nth-of-type(6) {
		left: 60%;
		-webkit-animation-delay: 6s, 2s;
		animation-delay: 6s, 2s
	}
	
	.snowflake:nth-of-type(7) {
		left: 70%;
		-webkit-animation-delay: 2.5s, 1s;
		animation-delay: 2.5s, 1s
	}
	
	.snowflake:nth-of-type(8) {
		left: 80%;
		-webkit-animation-delay: 1s, 0s;
		animation-delay: 1s, 0s
	}
	
	.snowflake:nth-of-type(9) {
		left: 90%;
		-webkit-animation-delay: 3s, 1.5s;
		animation-delay: 3s, 1.5s
	}
	
	.snowflake:nth-of-type(10) {
		left: 25%;
		-webkit-animation-delay: 2s, 0s;
		animation-delay: 2s, 0s
	}
	
	.snowflake:nth-of-type(11) {
		left: 65%;
		-webkit-animation-delay: 4s, 2.5s;
		animation-delay: 4s, 2.5s
	}