:root {
    --text-color: #ffffff;
    --primary-color: #821616;
    --secondary-color: #8c3131;
    --tertiary-color: #1f0d0d;
    --highlight-color: #126969;
    --dark-color: #4C5061;
    --black: #333333;
    --gray: #888888;
    --light-gray: #ededed;

    --max-width-container: 500px;

    /* gradient color */
    --pink: #FC4C7F;
    --magenta: #dc4f99;
    --violet: #b850b7;
    --purple: #8856e2;
    --darkblue: #627aff;
    --blue: #4BDCFF;

    --pink-a: rgba(252, 76, 127, 0.6);
    --magenta-a: rgba(220, 79, 153, 0.6);
    --violet-a: rgba(184, 80, 183, 0.6);
    --purple-a: rgba(136, 86, 226, 0.6);
    --darkblue-a: rgba(98, 122, 255, 0.6);
    --blue-a: rgba(75, 220, 255, 0.6);

    --swaggy-rainbow: linear-gradient(90deg, rgba(252,76,127,1) 0%, rgba(106,91,255,1) 64%, rgba(75,220,255,1) 100%);
}

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

body {
    height: 100%;
	width: 100vw;
	color: var(--text-color);
    font-family: Roboto, Geneva, Tahoma, sans-serif;
	font-size: 16px;
	background-color: var(--dark-color);
	scroll-behavior: smooth;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    background: var(--swaggy-rainbow);
}

#main-container {
    max-width: var(--max-width-container);
    width: 100%;
    display: flex;
    margin: 0 auto;
    background: var(--black);
    display: flex;
    flex-direction: column;

    -webkit-box-shadow: 8px 0px 21px 2px rgba(51,51,51,.33), -8px 0px 21px 2px rgba(51,51,51,.33);
    -moz-box-shadow: 8px 0px 21px 2px rgba(51,51,51,.33), -8px 0px 21px 2px rgba(51,51,51,.33);
    box-shadow: 8px 0px 21px 2px rgba(51,51,51,.33), -8px 0px 21px 2px rgba(51,51,51,.33);
}

#header {
    background: var(--swaggy-rainbow);
    display: inline-flex;
}

#footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 16px;
}

h1 {
    font-size: 16px;
    text-align: center;
    margin: 8px 0;
}

img {
    max-width: var(--max-width-container);
    width: 100vw;
    height: auto;
}

.link-button {
    background: rgba(76,80,97,.33);
    border-radius: 4px;
    border: 1px solid var(--dark-color);
    margin: 4px 16px;
    padding: 16px;
}

#link-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 8px 0;
}

.link-button.instagram:hover {
    background: var(--pink-a);
}

.link-button.youtube:hover {
    background: var(--magenta-a);
}

.link-button.playlist:hover {
    background: var(--violet-a);
}

.link-button.twitch:hover {
    background: var(--purple-a);
}

.link-button.facebook:hover {
    background: var(--darkblue-a);
}

.link-button.website:hover {
    background: var(--blue-a);
}

a {
    color: var(--text-color);
    font-style: normal;
    text-decoration: none;
    text-align: center;
}

a:hover .link-button {
    background-color: rgba(76,80,97,.50);
}

#footer a {
    color: var(--gray);
}

#footer {
    color: var(--gray);
}