@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dokdo&family=PT+Mono&family=Pragati+Narrow:wght@400;700&family=Roboto:wght@500;700;900&display=swap');
:root{
    --primary-color: #333232;
    --secondary-color: #000;
    --text-color: #000;
}
*{
    margin: 0;
    padding: 0;    
}
html{
    font-size: 14pt;
    font: 14pt;
    color: var(--text-color);    
}
body{
    min-height: 100vh;
    /*background-size: 400% 400%;*/
    background: linear-gradient(45deg, rgba(20,22,22,1) 0%, rgb(35, 40, 43) 100%);
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

header{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
header .container{
    width: 700px;
    max-width: 100%;
}
header img{
    height: 70vh;
}
header h1{
    font-family: 'Pragati Narrow', sans-serif;
    text-transform: uppercase;
    margin-top: 200px;
    font-size: 4rem;
}
header h2{
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: 'Pragati Narrow', sans-serif;
    font-weight: 300;
}
header p{
    font-family: 'Roboto', sans-serif;
}
header .go-to-discord{
    display: inline-block;
    background-color: #5865f2;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-style: italic;
    font-size: 1.25rem;
    font-weight: 900;
    border-radius: 1000px;
    padding: .5em 1.25em;
}
header .go-to-discord:hover{
    background-color: #fff;
    color: #5865f2;
    transition: 200ms ease;
    cursor: pointer;
}

@media(max-width: 1000px){
    header{
        padding: 100px 20px;
        text-align: center;
    }
    header h1{
        margin-top: 0;
        font-size: 10vw;
    }
    header h2{
        font-size: 1.3rem;
    }
}