/* Imports */
@import url("reset.css");
@import url("font-awesome.min.css");
:root {
    --main-bg-color: #F00;
    --secondary-bg-color: #282828;

    --twitch-color: #9146FF;
    --twitter-color: #1DA1F2;
    --patreon-color: #F96854;
}
body { font-size: .8em; }
body:after { content: ""; display: block; position: fixed; width: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background: var(--main-bg-color); background: linear-gradient(0deg, var(--main-bg-color), var(--secondary-bg-color)); }
@media only screen and (min-width: 300px) {
body { font-size: 1em; }
}
/* Css */
body { background: #3d3b3c; }
.link-container, .channel-info { width: auto; max-width: 700px; margin: auto; padding: 0 1em; }
.link-container a { display: flex; justify-content: center; margin-bottom: 16px; color: #fff; background: transparent; border: #fff 2px solid; padding: 16px 0; text-decoration: none; font-size: 1.25em; transition: background .3s ease-in-out, color .3s ease-in-out; }
.link-container a:hover { background: #fff; color: var(--secondary-bg-color); }
.link-container a.twitch:hover { color: var(--twitch-color); }
.link-container a.youtube:hover { color: var(--main-bg-color); }
.link-container a.twitter:hover { color: var(--twitter-color); }
.link-container a.patreon:hover { color: var(--patreon-color); }
.link-container a i { margin-right: 5px; }
.channel-info { text-align: center; margin: 1.25em auto; }
.channel-info img { max-width: 100%; }