@font-face {
    font-family: nintendo;
    src: url(/css/nintendo_NTLGDB_001.ttf);
}

:focus {
    outline: 4px auto #00bcf1;
}

html,
body,
ul {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
}

html,
body,
div,
span,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

body {
    background: #fff url(/img/bg_tvii_hero_alt.png) 0px 0px;
    background-attachment: fixed;
    text-align: center;
    font-family: nintendo !important;
    animation: 20s bgAnim linear infinite;
    -webkit-animation: 20s bgAnim linear infinite;
}


@keyframes bgAnim {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -823px -392px;
    }
}

@-webkit-keyframes bgAnim {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -823px -392px;
    }
}

img.logo {
    width: 460px;
    padding-top: 40px;
    filter: drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.12));
}

.content {
    padding: 40px 20px;
}

.exp {
    padding: 20px 50px;
    font-size: 24px;
    line-height: 1.7;
}

.exp .select {
    font-size: 30px;
    display: block;
    color: #868686;
    border-bottom: 3px dashed #868686;
    width: 600px;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 20px;
    line-height: 1.55;
}

.exp p {
    margin: auto;
    width: 700px;
}

.exp a {
    position: relative;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), color-stop(0.001, #ffffff), color-stop(0.5, #ffffff), color-stop(0.8, #f7f7f7), color-stop(0.95, #e2e2e2), color-stop(0.96, #e9e9e9), to(#ffffff));
    border-radius: 14px;
    text-shadow: 0px 2px 0px #fff;
    -webkit-box-shadow: inset 0px 2px 0px -1px #e9e9e9, inset 0px 0px 0px 2px #fff, 0px 1px 6px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0px 2px 0px -1px #e9e9e9, inset 0px 0px 0px 2px #fff, 0px 1px 6px rgba(0, 0, 0, 0.35);
    min-height: 47px;
    line-height: 1.3;
    font-size: 27px;
    padding: 10px;
    color: #323232;
    margin: 20px auto;
    width: 560px;
    text-decoration: none;
}

.devs>p {
    display: block;
    font-size: 20px;
    margin-bottom: 35px;
    text-shadow: 0px 4px rgba(0, 0, 0, 0.10);
}

.devs>a {
    position: relative;
    background-size: cover !important;
    display: block;
    width: 500px;
    height: 200px;
    margin: 20px auto;
    padding: 5px;
    border-radius: 15px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.20);
    border-left: 1px solid rgba(0, 0, 0, 0.20);
    border-right: 1px solid rgba(0, 0, 0, 0.20);
    text-decoration: none;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.44);
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.44);
    text-align: left;
}

.devs>a:nth-child(2) {
    background: url(/img/cardboard.png) center center, #00c037;
}

.devs>a:nth-child(3) {
    background: url(/img/cardboard.png) center center, #ff1313;
}

.devs>a:nth-child(4) {
    background: url(/img/cardboard.png) center center, #ff6000;
}

.devs>a:nth-child(5) {
    background: url(/img/cardboard.png) center center, #f3145e;
}

.devs>a:nth-child(6) {
    background: url(/img/cardboard.png) center center, #7c00d6
}

.devs>a:nth-child(7) {
    background: url(/img/cardboard.png) center center, #00ebf7;
}

.devs>a:nth-child(8) {
    background: url(/img/cardboard.png) center center, #c700db;
}

.devs>a:nth-child(9) {
    background: url(/img/cardboard.png) center center, #6fed00;
}

.devs>a:nth-child(10) {
    background: url(/img/cardboard.png) center center, #ebca00;
}

.devs>a:nth-child(11) {
    background: url(/img/cardboard.png) center center, #ff34b8;
    margin-bottom: 80px;
}


.devs>a>div {
    width: 160px;
    height: 160px;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    border-radius: 20px;
    background: #dedede;
    position: relative;
    box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.40);
    -webkit-box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.40);
}

.devs>a>div>img {
    width: 160px;
    height: 160px;
    border-radius: 20px;
    filter: drop-shadow(0px -1px 2px rgba(0, 0, 0, 0.12));
}

.devs>a>div:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 160px;
    height: 160px;
    border-radius: 20px;
    background: url(/img/miiShine.png) 0px 0px no-repeat;
    background-size: cover !important;
    z-index: 3;
}

.devs>a>p {
    color: #323232;
    font-size: 30px;
    margin-top: 10px;
    padding-right: 10px;
    padding-left: 190px;
    text-shadow: 0px -2px rgba(255, 255, 255, 0.31);
}

.devs>a>span {
    margin-top: 5px;
    display: block;
    font-size: 20px;
    color: #fff;
    padding-right: 10px;
    padding-left: 190px;
    text-shadow: 0px 2px rgba(0, 0, 0, 0.41);
}

@media only screen and (max-width: 870px) {
    img.logo {
        width: 60%;
    }

    .exp {
        padding: 20px 20px;
    }

    .exp p {
        width: 90%;
    }

    .exp .select {
        width: 90%;
    }

    .exp a {
        width: 85%;
    }
}

@media only screen and (max-width: 620px) {
    img.logo {
        width: 80%;
    }

    .exp {
        padding: 20px 0px;
        font-size: 25px;
    }

    .exp p {
        width: 95%;
    }

    .exp .select {
        font-size: 28px;
        line-height: 1.6;
    }

    .exp a {
        font-size: 23px;
    }

    .devs>a {
        width: 96%;
    }

    .devs>a>div {
        width: 130px;
        height: 130px;
        margin-left: 15px;
        margin-right: 15px;
    }

    .devs>a>div:before {
        width: 130px;
        height: 130px;
    }

    .devs>a>div>img {
        width: 130px;
        height: 130px;
    }

    .devs>a>p,
    .devs>a>span {
        padding-left: 160px;
        padding-right: 20px;
    }

    .devs>a>p {
        font-size: 27px;
    }

    .devs>a>span {
        font-size: 18px;
        word-wrap: break-word;
    }
}

@media only screen and (max-width: 470px) {
    .devs>a>div {
        width: 120px;
        height: 120px;
        margin-left: 13px;
        margin-right: 13px;
    }

    .devs>a>div:before {
        width: 120px;
        height: 120px;
    }

    .devs>a>div>img {
        width: 120px;
        height: 120px;
    }

    .devs>a>p,
    .devs>a>span {
        padding-left: 145px;
        padding-right: 20px;
    }

    .devs>a>p {
        font-size: 25px;
    }

    .devs>a>span {
        font-size: 17px;
        word-wrap: break-word;
    }

    .exp a {
        font-size: 21px;
        height: 40px;
        width: 95%;
    }
}

@media only screen and (max-width: 420px) {

    img.logo {
        width: 90%;
    }

    .devs>a>div {
        width: 100px;
        height: 100px;
    }

    .devs>a>div:before {
        width: 100px;
        height: 100px;
    }

    .devs>a>div>img {
        width: 100px;
        height: 100px;
    }

    .devs>a>p,
    .devs>a>span {
        padding-left: 125px;
        padding-right: 18px;
    }

    .devs>a {
        height: 185px;
    }
}

.key-input {
    width: 400px;
    height: 70px;
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 40px;
    border-radius: 8px;
    color: #323232;
    text-align: center;
    line-height: 1.2;
    text-shadow: 0px -2px #f0f0f0;
    background: #ffffff;
    font-family: nintendo !important;
    border: 2px solid #747474;
    box-shadow: inset 0px 2px 7px -1px rgba(0, 0, 0, 0.40), 0px 2px 0px 0px #ffffff;
}

.key-input::-webkit-outer-spin-button,
.key-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.key-input {
    -moz-appearance: textfield;
}

.select.red {
    border-bottom-color: #f200dc;
    color: #f200dc;
}

.select.tumblr {
    color: #0044c6;
    border-bottom-color: #0044c6;
}

.select.twttr {
    color: #00aed1;
    border-bottom-color: #00aed1;
}

.confirm-input {
    background: -webkit-gradient(linear, left top, left bottom, from(#666666), color-stop(0.65, #212121), color-stop(0.65, #161616), to(#595959)) !important;
    color: #fff !important;
    text-shadow: 0px -2px 0px #000 !important;
    -webkit-box-shadow: inset 0px 2px 0px -1px #000000, inset 0px 0px 0px 2px #2e2e2e, 0px 1px 6px rgba(0, 0, 0, 0.35) !important;
    box-shadow: inset 0px 2px 0px -1px #000000, inset 0px 0px 0px 2px #2e2e2e, 0px 1px 6px rgba(0, 0, 0, 0.35) !important;
}

.exp a {
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

.exp a:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}

div.success {
    mask-image: url(/img/checkmark-mask.png);
    mask-size: 140px;
    mask-repeat: no-repeat;
    height: 140px;
    width: 140px;
    background: #00f120;
    display: inline-block;
    margin-bottom: -10px;
    margin-top: -15px;
}

div.success {
    mask-image: url(/img/checkmark-mask.png);
    mask-size: 140px;
    mask-repeat: no-repeat;
    height: 140px;
    width: 140px;
    background: #00f120;
    display: inline-block;
    margin-bottom: -10px;
    margin-top: -15px;
}

div.error {
    mask-image: url(/img/error-mask.png);
    mask-size: 140px;
    mask-repeat: no-repeat;
    height: 140px;
    width: 140px;
    background: #ff253e;
    display: inline-block;
    margin-bottom: -20px;
    margin-top: -20px;
}

.select.pink {
    border-bottom-color: #ec79e2;
    color: #ec79e2;
}

.miiverse-modal .post {
    position: relative;
    display: table;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 15px;
    margin-left: 70px;
    height: auto;
}

.miiverse-modal .post .mii {
    width: 70px;
    height: 70px;
    float: left;
    position: relative;
    top: 10px;
    margin-right: 8px;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.miiverse-modal .post .post-content {
    float: left;
    position: relative;
    background: #fff;
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.40);
    border-radius: 14px;
    z-index: 1;
    margin: 8px 10px;
    padding: 10px;
    padding-bottom: 7px;
    min-width: 330px;
    max-width: 500px;
}

.miiverse-modal .post .post-content:before {
    content: url(/img/miiversebubble.png);
    position: absolute;
    left: -13px;
    top: 16px;
    z-index: 2;
}

.miiverse-modal .post header {
    position: relative;
    margin-top: -30px;
    width: 100%;
    height: 26px;
    display: block;
}

.miiverse-modal .post .username {
    background: #3a3a3a;
    color: #fff;
    height: 19px;
    float: left;
    line-height: 19px;
    font-size: 17px;
    border-radius: 50px;
    padding: 3px 15px;
    position: relative;
    z-index: 2;
}

.miiverse-modal .post .date {
    font-size: 15px;
    float: right;
    color: #858585;
    position: relative;
    z-index: 20;
    margin-left: 15px;
}

.miiverse-modal .post .content.hidden {
    height: 80px;
}

.miiverse-modal .post .content {
    position: relative;
    padding-bottom: 5px;
    padding: 0;
    clear: both;
    padding-top: 5px;
    text-align: left;
}

.miiverse-modal .post .content.hidden p,
.miiverse-modal .post .content.hidden div,
.miiverse-modal .post .content.hidden img {
    display: none !important;
}

.miiverse-modal .post .content .memo {
    margin: auto;
    display: block;
    height: 120px;
    width: 320px;
    padding-top: 4px;
    image-rendering: pixelated;
}

.miiverse-modal .post .content .screenshot {
    width: 361px;
    height: 203px;
    margin: 8px;
    background: url(/img/bg-doodle.png) center center no-repeat #d4d4d4;
    box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.30);
}

.miiverse-modal .post .spoiler {
    position: relative;
    display: block;
    padding: 10px;
    font-size: 21px;
    height: 50px;
    z-index: 2;
    margin: 10px auto;
    max-width: 450px;
    min-width: 300px;
    border-radius: 8px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA2CAIAAACJCGTLAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA5SURBVBhXjY83DgAwDALP/P/JLilStkTxgCiCASJCZkZVCdDkrY8/uPm5++bd3ivv9DJT7q71ZQEYLr9IGbcPEZEAAAAASUVORK5CYII=) 0 bottom repeat-x, #fff;
    border: 1px solid #aaaaaa;
    font-family: nintendo !important;
}

.miiverse-modal .post .post-meta {
    position: relative;
    bottom: 5px;
    display: block;
    height: 40px;
    padding-top: 10px;
    margin-left: 5px;
}

.miiverse-modal .post .post-href:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.miiverse-modal .post .post-meta span {
    float: right;
    height: 40px;
    color: #323232;
    font-size: 16px;
    padding-left: 25px;
    line-height: 46px;
    padding-right: 8px;
}

.miiverse-modal .post .post-meta span.yeahs {
    background: url(/img/yeahcounter.png) 0px 10px no-repeat;
    padding-right: 15px;
}

.miiverse-modal .post .content>p {
    color: #323232;
    font-size: 20px;
    padding: 2px 8px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.miiverse-modal .post .post-tag {
    color: #e756d4;
    position: relative;
    z-index: 2;
    display: inline-block;
    line-height: normal;
    padding: 0 5px;
    padding-top: 6px;
    padding-left: 28px;
    text-align: left;
    text-decoration: none;
}

.miiverse-modal .post .empathy-bar {
    border-top: 1px solid #dddddd;
    background: #f0f0f0;
    margin-left: -10px;
    margin-top: 10px;
    margin-right: -10px;
    position: relative;
    margin-bottom: -7px;
    text-align: left;
    padding: 6px 13px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.miiverse-modal .post .empathy-bar p {
    color: #646464;
    padding: 5px 8px;
    padding-bottom: 2px;
    font-size: 18px;
}

.miiverse-modal .post .empathy-bar:before {
    position: absolute;
    top: -17px;
    right: 35px;
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAASCAQAAACUNMTkAAAAoElEQVR4AaXSF3QDcBzE8e6BXVStVuuv/uqv7tVS3CHuFopbxmVS9t5bssclv/f+nHX39Q/dxeHBg78LZUZkmSZ+RaLPFjHHt0SMdtWIET4lwioTNbxLhFUkkniWCCtPBPEoEVaO8OFaIqws4RUJx/xLhNVz5xMIq0Ws8CMRVoOY4EsirArRwYdEWCUiizeJsArufALhzufH3QXoiLOZCLeS8V8w+KJYSQAAAABJRU5ErkJggg==);
}

.miiverse-modal .post.post-full {
    padding-bottom: 70px;
}

.miiverse-modal .post .empathy-bar a {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 7px 5px;
    border-radius: 10px;
    background: #fff;
    position: relative;
    z-index: 10;
}

.miiverse-modal .post .empathy-bar a img {
    width: 60px;
    height: 60px;
}

.miiverse-modal .post .post-tag::before {
    content: "";
    position: absolute;
    display: inline-block;
    height: 20px;
    top: 7px;
    left: 6px;
    width: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAkCAYAAADsHujfAAAEaElEQVR4AayX3W8UVRjGnzm7y2637sdsWyUltrulFyIxGpRGJbHtrqgXRmM0aP1Cu0r8IN2slnChN0QNkhrFeFsSbwzhSvHW78QEwr8AhJAQuCIFUqDb7uzwvLMfzA7T5ewym3kyMz1n3vOb533PmVO1sP+nxd/nztb+mLts/1laWld/l686bT9//tfSgX0HXkfAP7UjtHt2+/CYMZHNYPto2lcT2TQmRpJ4/ME0psx8+hnj06MHvzgYKIwaTSSMjSaQTK2vRBLop9JpYHQQ2Do4YOywPgkURsUj9DhE2RpiF4SBIUI9ZCaNp6sfHw0qTUpiowlR4x3f2H6b5yJQe4Fn6dFsb54JLjBbMiljSpUCgVF2M7ic1zj484ARhfNTm4BKjpcWJe1uCUwCeNiswxyaP7zIXj0fbSDLK4CK4QqArMEfgPJytAqbgC3XPDCDhNlKZwqhUlFmIJ/p6VBuR2pMzS/fHT9FhvMS7Zv5L3+9ePJ6zXIP7r2mMwOEGWdKC9jbM4xy3lRGpfpYiNuuvPzckf3HT/+w78i/T4T2nLn/ZkqFpU7Yvu7B9lQccGDs3mDqIHQCVIQzaIRTOR97afzF6OzkttRIeKifw3Mgae8oA0j0AZvpTL7WPUxbasBg/TGuFSaLZAAYouWKcI5r3pT43fP5JGHG+Oy0tbd4aP5H7QKuO+IOSgMMpigsAOKEu03nmjDpOCAwBcwVv9WcTUqNc2SmRfutNWFMwuQyQMEuacGoxE5gjW8RKIjAMmZG0kSYfO3uMCpi4hJeAyxJgzgTpFww01ZnGBl+V2QjbOtVoCp38jZBijAD4owJ5NdKxa8/+963gBUXr/9ZJTMbCKM+BFbTvBNXgoZhzXCngZ1W2RdGPABhjnH4GS7vdoi7jBuEkVXWJlBQYnyYdCbrOFMuflVaaHPGAZFODZhcqA83ozP82DVggiziENMkMGMs4II13wbTAmnAyDdmi8BseJMwpLfEFaZJvklBqAnjTG0XTBuIFyb6FmEazgSVIonD7yQyXMFzjJ1fozNzC4t3gHhhYu8AK3TGqZkAnVGNNOUYe3K1XPQF8cL0CQzzKjAdP3xMY7Pd4maqOsYl4UnAmgRsTgKvFGvRnAWGP7rwz7ogXpj4u0CFMJaGK9JnhX1ju4DYFBB9Cojk/BUj7OZHR6eVDNhJnE2tAo7v1oMRN67XI19i7P+o36hyB71R784enQ43TP97t2FqdMdPVaboWmXF5nPD1BT1CnW4g45pgQgkg7Scue99rsC0XmaA3zojfw+PVFgl8qSetEEkXBsMi2yVuzFZW7ww4oglVslDmuoKRGJ6YSrcjcmYAtQSU3N1eWlZ+uuqaxAJ7IZJ8B8xPxjp11ntrT2BSAg3TPID1oyPM9JPVz2DyABtMNxCVAkj6XFqRjp0oXsCkXHcMIk9dIYFLDUjbd3onkFkMDdMijDGY0B8k3FN2nQVCIgM5oZ5gFuIR57NnpO/6yowEBmwCcPrM9QJSvu4BQAA//+NZJCqAAAABklEQVQDAAaPB+5xkzG3AAAAAElFTkSuQmCC) no-repeat center center;
    background-size: 16px 16px;
}

.miiverse-modal .post .post-tag:hover {
    text-decoration: underline;
}

.pagination {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    padding: 20px 15px;
    box-sizing: border-box;
    width: 100%;
}


.pagination ul {
    list-style: none;
}

.pagination ul li {
    margin: 5px;
    padding: 5px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    color: #7e7e7e;
    display: inline-block;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #7d7d7d;
}

.pagination ul li.active {
    background: #ffc7e1;
    color: #db00a3;
}

.pagination ul li a {
    color: #000000;
    text-decoration: none;
}

.miiverse-modal {
    margin: auto;
    display: block;
    width: 800px;
}

@media only screen and (max-width: 800px) {
    .miiverse-modal {
        width: 100%;
    }

    .miiverse-modal .post {
        box-sizing: border-box;
        margin: 0;
        width: 100%;
    }

    .miiverse-modal .post .mii {
        margin-right: 0;
        margin-bottom: 29px;
        float: none;
    }

    .miiverse-modal .post .post-content:before {
        content: none;
    }

    .miiverse-modal .post .post-content {
        min-width: initial;
        float: none;
        max-width: none;
        box-sizing: border-box;
    }
}

@media only screen and (max-width: 460px) {
    .miiverse-modal .post .content .screenshot {
        width: 96%;
        height: auto;
    }

    .miiverse-modal .post .empathy-bar {
        padding: 5px 5px;
    }
}