html, body {padding: 0;margin: 0;background: #bebdbe;}

#bg-img {position: fixed;z-index: 0;top: -20px;left: -20px;height: calc(100% + 40px);width: calc(100% + 40px);background-color: #2b2a2a;}
#bg-color {position: fixed;z-index: 0;top: 0;left: 0;height: 100%;width: 100%;background-color: rgba(0,0,0,.2);}
#main {position: relative;z-index: 1;width: 100%;padding: 0;background: white;}

#h1 {font-family: Georgia, serif;font-size: 0;line-height: 0;padding: 0;margin: 0 0 22px 0;text-align: center;-webkit-font-smoothing: antialiased;}
#baseline {display: block;font-size: 20px;line-height: 24px;color: black;font-weight: bold;}
#subline {display: block;font-size: 14px;line-height: 24px;color: #2b2a2a;font-weight: normal;font-style: italic;}
#banner {display: block;width: 100%;margin: 0 0 22px 0;}

@media screen and (min-width: 366px) {
#main {width: 365px;margin: 0 auto;}
}
@media screen and (min-width: 385px) {
#bg-img {background: url(./banner.png) 50% 50% no-repeat;background-size: cover;filter: blur(8px);}
#main {/* opacity: .8; */border-radius: 4px;box-shadow: 0 20px 70px rgba(0,0,0, .3);}
#banner {min-height: 204px;border-radius: 4px 4px 0 0;}
}
@media screen and (min-height: 641px) {
}
@media screen and (min-width: 385px) and (min-height: 641px) {
#main {position: fixed;z-index: 1;top: 50%;left: 50%;width: 365px;margin: -315px 0 0 -182px;margin: -275px 0 0 -182px;}
#main {/* opacity: .8; */border-radius: 4px;box-shadow: 0 20px 70px rgba(0,0,0, .3);}
#banner {border-radius: 4px 4px 0 0;}
#bg-img {background: url(./banner.png) 50% 50% no-repeat;background-size: cover;filter: blur(8px);}
}

#main * {cursor: default;}
#main a,
#main a * {cursor: pointer;}
#main svg {transition: color 0.1s linear;}

#links {display: table;width: 100%;margin: 0 0 22px 0;}
.links {display: table-cell;font-size: 0;line-height: 0;list-style: none;padding: 0;margin: 0;/* width: 140px; */}
#links-left {border-right: 1px solid #d9d9d9;padding: 0 20px 0 30px;}
#links-right {padding: 0 20px 0 30px;}
@media screen and (max-width: 364px) {
#links-left {padding: 0 10px 0 20px;}
#links-right {padding: 0 10px 0 20px;}
}
.links li {display: block;vertical-align: top;-webkit-font-smoothing: antialiased;}
.links li h2 {font-family: serif;font-weight: bold;font-size: 18px;line-height: 24px;padding: 0;margin: 0 0 10px 0;color: black;white-space: nowrap;}
.link {display: block;vertical-align: top;padding: 7px 10px;text-decoration: none;border-radius: 6px;color: #2b2a2a;white-space: nowrap;transition: color 0.2s linear, border-color 0.2s linear, background-color 0.2s linear;}
.link svg {height: 24px;width: 24px;margin: 0 10px 0 0;vertical-align: top;}
.link span {font-family: serif;font-size: 16px;line-height: 24px;vertical-align: top;}
.link:hover {color: blue;/*background: #F7F7F7;*/}
@media screen and (max-width: 364px) {
.link {padding: 7px 7px;}
.link svg {height: 16px;width: 16px;}
.link span {line-height: 16px;}
}
#link-instagram:hover {color: #E1306C;}
#link-facebook:hover {color: #3B5998;}
#link-pinterest:hover {color: #c61f28;}
#link-patreon:hover {color: #ff5900;}
#link-twitter:hover {color: #55ACEE;}
#link-messenger:hover {color: #0080f7;}
#link-whatsapp:hover {color: #00bb00;}
#link-discord:hover {color: #5562eb;}

#footer {font-size: 0;line-height: 0;padding: 0 0 22px 0;text-align: center;-webkit-font-smoothing: antialiased;}
#footer span {display: inline-block;font-family: serif;font-size: 14px;line-height: 16px;margin: 0 3px;vertical-align: top;}
#footer svg {height: 12px;width: 12px;vertical-align: top;margin: 3px 0 0 0;}
#link-paypal {display: inline-block;text-decoration: none;padding: 5px 10px;color: black;border: 1px solid black;border-radius: 5px;transition: color 0.2s linear, border-color 0.2s linear, background-color 0.2s linear;}
#link-paypal:hover {color: #142c8e;border-color: #142c8e;}
#link-paypal:hover svg:nth-of-type(1) {color: #CC0000;}