@font-face {
  font-family: 'cozette';
  src: url('CozetteVector.ttf') format('truetype');
  font-weight: 400; /* or 700 for bold, etc. */
  font-style: normal; /* or italic */
}

::-webkit-scrollbar {
	width: 0px;
	background: transparent;
}

html{
	padding: 0px;
	margin: 0px;
	color: white;
	font-size: 18px;
    background-color: #1e1e2e;
	background-image: url('./img/index-background-v2.png?v=2');
}

.main{
    font-family: cozette;
	border: 2px solid #0050e0;	
	padding: 20px;

	display: grid;
	grid-template-columns: 1fr;
    width: 90%;
	min-height: 100vh;
	justify-items: center;
	margin-bottom: 100px;
	background-color: #1e1e2e;
}
.main-text{
    min-width: 50%;
    max-width: 100%;
}

code{
    font-family: cozette;
    background-color: #282828;
    padding-right: 1px;
    padding-left: 1px;
}

.spacer1{
	min-height: 300px;
	overflow: hidden;
}
.line-break{
	min-height: 20px;
    min-width: 90%;
	border-radius: 30px;
	background-image: linear-gradient(to right, #333333, #2d2d2d, #272727, #212121, #1b1b1b, #1b1b1b, #1b1b1b, #1b1b1b, #212121, #272727, #2d2d2d, #333333);
}


@keyframes Up-header {
	from {min-height:10px; padding: 80px 0; max-height:200px; top: 0px}
	to {min-height:0px; padding: 0; max-height:0px; top: -5px}
}
@keyframes Down-header {
	from {min-height:0px; padding: 0; max-height:0px; top: -5px}
	to {min-height:10px; padding: 80px 0; max-height:200px; top: 0px}
}

.header{
	overflow: hidden;
	position: fixed;

	padding: 80px 0;
	min-height: 10px;
	width: 100vw;
	left: 0px;
	font-size: 80px;
	color: white;
	text-shadow: 2px 2px 2px black;
	top: 0px;

	background-image: url("./img/index_banner.png");
	
	background-attachment: fixed;
	background-position: 0px -120px;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	border-bottom: 4px solid black;

	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-name: Down-header;
}

.header > img {
    position: sticky;
    width: 100px;
}


a{
	color: #009ff9;
	font-size: 20px;
}

.videos{
    position: relative;
    top: 10%;
    height: 80%;
}


.social-tray img{
    width: 50px;
    height: 50px;
}

.social-tray .yt{
    width: 71px;
    height: 50px;
}

.social-tray .discord{
    width: 67px;
}