/* Whatch Out! Property of PWNZ WORLD!© :D */
html {scrollbar-width: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
::-webkit-scrollbar {display: none;}
body {display: flex; flex-direction: column; background-image: url(nasty-fabric-3.png); background-position: center; margin: 0; background-color: #000; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; font-size: 20px;}
object {pointer-events: none;}
a {text-decoration: none;}
.main {display: flex; flex-direction: column; width: 100%;}
.gold-text {background: linear-gradient(135deg, #dfc68e 10%, #9f7f45 24%, #d5bb84 35%, #8a703c 55%, #dfc68e 65%, #8a6e3f 84%); color: #ddcba4; position: relative; font-family: serif; font-size: 97px; letter-spacing: 7px; font-weight: 400; -webkit-background-clip: text; -webkit-text-fill-color: transparent; float: left; margin: 10px 0 0 50px; line-height: 1.17;}
.top {width: 100%;}
.company {display: inline-block; float: left; margin: 15px 0 5px 50px;}
.company .text {width: 720px; margin: 0 0 0 50px; filter: drop-shadow(rgba(0,0,0,0.7) 2px 2px 2px);}
.transition {transition: all 1.5s cubic-bezier(0.43,0.01,1,1);}
.hat-logo {display: inline-block; float: left; filter: drop-shadow(rgba(0,0,0,0.7) 2px 2px 2px); width: 150px; height: 155px;} .hat-logo svg {width: 150px; height: 150px; fill: url('#pwnz-gold'); filter: url('#pwnz-light');}
.hat-logo.music {display: block; float: none; margin: 50px auto; transform: scale(1); transition: all 0.1s cubic-bezier(0.43,0.01,1,1);}
.hat-logo.change {transform: scale(1.1);}
.login-modal {display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);}
/*.login-modal .platforms {filter: url('#pwnz-light'); clip-path: polygon(20px 0px, 810px 0px, 810px 210px, 790px 230px, 0px 230px, 0px 20px); background: linear-gradient(135deg, #cfba8c 10%, #927749 24%, #cfba8c 35%, #957a50 55%, #cfba8c 65%, #8b7348 84%); margin: auto; width: 810px; height: 230px;}*/
.login-modal .platforms {filter: url('#pwnz-light'); clip-path: polygon(20px 0px, 810px 0px, 810px 210px, 790px 230px, 0px 230px, 0px 20px); background: linear-gradient(135deg, #e2c689 10%, #936f2f 24%, #e2c689 35%, #967436 55%, #e2c689 65%, #896829 84%); margin: auto; width: 810px; height: 230px;}
.login-modal .close {color: #856d3d; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 1%; left: 96%; filter: url('#pwnz-shadow') drop-shadow(rgba(255,255,255,0.2) 1px 1px 1px);}
.login-modal .close:hover {color: #000; text-decoration: none; cursor: pointer;}
.login-modal .inner {width: 200px; margin: 0 auto;}
.login-modal .title {margin: 20px 0 20px 0; display: inline-block; width: 200px; background: linear-gradient(135deg, #7f6019 32%, #82611d 44%, #7f6019 56%, #82611d 98%); color: #ddcba4; font-family: 'Times New Roman', Times, serif; font-size: 57px; letter-spacing: 2px; font-weight: 400; text-align: center; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: url('#pwnz-shadow') drop-shadow(rgba(255,255,255,0.2) 1px 1px 1px);}
.login-modal .twitch svg {width: 200px; height: 100px;}
.twitch-login {width: 200px; height: 100px; float: left;} .twitch-login svg {width: 200px; height: 100px; filter: url('#pwnz-light');}
.login-twitch {display: inline-block; width: 100px; height: 100px; background: linear-gradient(135deg, #cfba8c 10%, #927749 24%, #cfba8c 35%, #957a50 55%, #cfba8c 65%, #8b7348 84%); clip-path: polygon(20px 0px, 80% 0px, 100px 0px, 100px 80px, 80px 100px, 20px 100px, 0px 100px, 0px 20px);}
/*.login-twitch div {width: 80px; height: 80px; margin: 10px 0 0 10px; background: url(me_1.33.png); clip-path: polygon(20% 0%, 80% 0%, 100% 0%, 100% 80%, 80% 100%, 20% 100%, 0% 100%, 0% 20%);}*/
/*.top-border {width: 98%; margin: 0 0 0 1%; height: 5px; background: linear-gradient(45deg, #dfc68e 20%, #a58f61 45%, #8a6e3f 100%); float: left; filter: drop-shadow(rgba(0,0,0,0.7) 2px 2px 2px);}*/
.top-border {width: 98%; margin: 0 0 0 1%; height: 5px; background: linear-gradient(135deg, #dfc68e 5%, #9f7f45 18%, #d5bb84 22%, #8a703c 51%, #cab278 72%, #8a6e3f 84%); float: left; filter: drop-shadow(rgba(0,0,0,0.7) 2px 2px 2px);}
/* Menu Content */
.menu {width: 300px; height: 1000px; margin: 0 0 0 20px;}
.menu .button {width: 300px; height: 80px; margin: 20px 0 0 0; filter: url('#pwnz-light'); transition: all 0.1s cubic-bezier(0.43,0.01,1,1); cursor: pointer;}
.menu .button:hover {transform: scale(1.05);}
.menu .button svg {width: 300px; height: 80px; position: absolute;}
.menu .button .text {display: inline-block; width: 300px; font-size: 60px; text-align: center; background: linear-gradient(135deg, #dfc68e 10%, #9f7f45 24%, #d5bb84 35%, #8a703c 55%, #dfc68e 65%, #8a6e3f 84%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: 'STIX Two Text', serif; font-weight: 500; margin: 7px 0 0 0;}
.cards {display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; /* justify-content: space-around; */ margin: 20px 0 0 0;}
/* Profile */
.profile {display: inline-block; margin: 10px 0 0 0;}
.profile-card {display: inline-block; margin: 10px; height: 500px; width: 500px;}
.info {float: left;}
.gold-text.name {background: linear-gradient(135deg, #dfc68e 5%, #8f7241 20%, #d5bb84 55%, #dfc68e 60%, #8a6e3f 80%); font-size: 97px; letter-spacing: 7px; font-weight: 400; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.gold-text:after {position: absolute; left: 0; top: 0; background: none; content: attr(inner-text); z-index: -1; text-shadow: -1px 0 0px #ab986b, 0 1px 1px #000, 5px 5px 10px rgba(0, 0, 0, 0.39), -5px -5px 10px rgba(0, 0, 0, 0.39);}
.avatar-circle {display: inline-block; float: left; padding: 4px 0 0 4px; margin: 20px 0 0 50px; width: 146px; height: 146px; border-radius: 50%; background: linear-gradient(135deg, #cfba8c 25%, #856d3d 32%, #cfba8c 38%, #e5d190 68%, #8b7348 84%); box-shadow: 2px 2px 4px 0px #000;}
.avatar {width: 142px; height: 142px; background-size: 142px; border-radius: 50%; box-shadow: inset 2px 2px 4px 0px rgba(0,0,0,0.89), 1px 1px 0px 0px rgba(255,255,255,0.25);}
.avatar .photo {width: 142px; height: 142px; border-radius: 50%;}
.name {display: inline-block; float: left; margin: 0 0 0 50px;}
.socials {margin: 0 0 0 50px; filter: drop-shadow(rgba(0,0,0,0.7) 2px 2px 1px);}
.socials div {display: inline-block; float: left;}
.socials.transition div {transition: all 0.2s cubic-bezier(0.43,0.01,1,1);}
.socials div:hover {transform: scale(1.1);}
.socials svg {fill: url('#pwnz-gold'); filter: url('#pwnz-light');}
.socials .youtube-logo {width: 62px; height: 48px; margin: 11px 0 0 21px;} .socials .youtube-logo svg {width: 62px; height: 48px; fill: url('#pwnz-gold-youtube');}
.socials .twitch-logo {width: 46px; height: 53px; margin: 8px 0 0 0;} .socials .twitch-logo svg {width: 46px; height: 52px;}
/* Profile Card */
.profile .card {display: flex; flex-direction: row; width: 500px; height: 500px; position: absolute;} .profile .card svg {width: 500px; height: 500px; filter: url('#pwnz-light');}
.profile-card .avatar-circle {display: flex; flex-direction: row; padding: 4px 0 0 4px; margin: 36px 0 0 42px; width: 146px; height: 146px; border-radius: 50%; background: linear-gradient(135deg, #cfba8c 25%, #856d3d 32%, #cfba8c 38%, #e5d190 68%, #8b7348 84%); box-shadow: 2px 2px 4px 0px #000;}
.profile-card .avatar {width: 142px; height: 142px; background-size: 142px; border-radius: 50%; box-shadow: inset 2px 2px 4px 0px rgba(0,0,0,0.89), 1px 1px 0px 0px rgba(255,255,255,0.25);}
.profile-card .avatar .photo {width: 142px; height: 142px; border-radius: 50%;}
.profile-card .gold-text.name {font-size: 62px; letter-spacing: 3px; margin: 10px 0 0 42px;}
/* Legal */
.legal {display: inline-block; margin: 0 0 0 1%; width: 98%;}
.legal .caption {display: block;}
.legal h2, .legal h3 {background: linear-gradient(135deg, #dfc68e 3%, #9f7f45 11%, #d5bb84 15%, #8a703c 47%, #cab278 65%, #9d7f4d 73%); font-size: 59px; letter-spacing: 3px; color: #ddcba4; position: relative; font-family: 'Times New Roman', Times, serif; font-weight: bold; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.17; margin: 20px 0 20px 20px;}
.legal h3 {font-size: 49px; font-weight: normal;}
.legal h2:after, .legal h3:after {position: absolute; left: 0; top: 0; background: none; content: attr(inner-text); z-index: -1; text-shadow: -1px 0 0px #ab986b, 0 1px 1px #000, 5px 5px 10px rgba(0, 0, 0, 0.39), -5px -5px 10px rgba(0, 0, 0, 0.39);}
/*.legal .text {background: linear-gradient(135deg, #ddcba4 15%, #ab9975 25%, #cebf9e 29%, #e9d7a3 30%, #9b8c6b 55%, #dbcb9b 65%, #a38f6c 84%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(rgba(0,0,0,0.7) 2px 2px 2px);} c3b697*/
.legal .text {background: linear-gradient(135deg, #dfc68e 3%, #9f7f45 11%, #d5bb84 15%, #8a703c 47%, #cab278 65%, #9d7f4d 73%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(rgba(0,0,0,0.7) 2px 2px 2px);}
.legal a {font-weight: bold; font-style: italic;}
.bottom {margin: 400px 0 20px 0; height: 50px; filter: drop-shadow(rgba(0,0,0,0.7) 2px 2px 2px);}
/*.bottom-border {width: 98%; margin: 0 0 0 1%; height: 3px; background: linear-gradient(45deg, #cfba8c 20%, #a58f61 45%, #8b7348 100%);}*/
.bottom-border {width: 98%; margin: 0 0 0 1%; height: 3px; background: linear-gradient(135deg, #dfc68e 3%, #9f7f45 11%, #d5bb84 15%, #8a703c 47%, #cab278 65%, #8a6e3f 73%);}
.links {margin: 20px 1% 0 0; background: linear-gradient(135deg, #dfc68e 3%, #9f7f45 11%, #d5bb84 15%, #8a703c 47%, #cab278 57%, #896f43 73%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: right;}
.links a {font-weight: bold; margin: 0 10px 0 10px;}
.links br {display: none;}

@media only screen and (max-width: 1000px) {
.company {margin: 0px 0 0px 5px;}
.hat-logo {width: 62px; height: 62px;} .hat-logo svg {width: 62px; height: 62px;}
.gold-text {font-size: 30px; letter-spacing: 3px; margin: 16px 0 0 12px;}
.gold-text.name {font-size: 30px; letter-spacing: 3px; margin: 0 0 0 12px;}
.avatar {box-shadow: inset 2px 2px 4px 0px rgba(0,0,0,0.89);}
.top-border {margin: 5px 0 0 1%; height: 3px;}
.menu {margin: 0 auto;}
.avatar-circle {padding: 2px 0 0 2px; margin: 5px 0 0 10px; width: 52px; height: 52px;}
.avatar {width: 50px; height: 50px; background-size: 50px;}
.socials {margin: 0 0 0 12px;}
.socials .youtube-logo {width: 35px; height: 29px; margin: 5px 0 0 10px;} .socials .youtube-logo svg {width: 35px; height: 29px;}
.socials .twitch-logo {width: 28px; height: 29px; margin: 4px 0 0 0;} .socials .twitch-logo svg {width: 28px; height: 32px;}
.legal h2 {font-size: 29px;}
.legal h3 {font-size: 25px; letter-spacing: 1px; font-weight: bold;}
.legal h2:after, .legal h3:after {display: none;}
.legal .text {font-size: 15px; margin: 0 0 0 1%; width: 98%;}
.bottom-border {}
.links {margin: 20px 2% 0 0;}
.links a {margin: 0;}
.links br {display: block;}
}