0xab178613…feaasent to0xd6878475…ab48·#21,063,952·view on Etherscan
html,
body {
background: black;
width: 100%;
height: 100%;
font-size: 1.6dvmax;
position: relative;
margin: 0;
color: white;
overflow: hidden;
font-variant-ligatures: none;
font-weight: 300;
}
.LQ-font-loaded .title,
.LQ-font-loaded .coverTitle {
font-family: "Silver-lq", "Font-Bold", sans-serif;
-webkit-filter: brightness(1.2) contrast(1.2) url(#Sharpen);
filter: brightness(1.2) contrast(1.2) url(#Sharpen);
}
.HQ-font-loaded .title,
.HQ-font-loaded .coverTitle {
font-family: "Silver", "Silver-lq", "Font-Bold", sans-serif;
-webkit-filter: brightness(1.2) contrast(1.2) url(#Sharpen);
filter: brightness(1.2) contrast(1.2) url(#Sharpen);
}
body {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 1dvmax;
padding: 7dvmax;
font-family: "Font-Light", sans-serif;
font-optical-sizing: auto;
font-style: normal;
perspective: 200dvmax;
}
.cover {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
text-align: center;
justify-content: center; /* This centers content vertically */
align-items: center; /* This centers content horizontally */
}
.talisman,
.coverTalisman {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
mix-blend-mode: lighten;
position: relative;
}
.metadata {
display: flex;
flex-direction: column;
}
.metadataContainer {
display: flex;
flex-direction: column;
gap: 2dvmax;
width: 100%;
justify-content: center;
align-items: center;
position: relative;
overflow: visible;
}
.title,
.coverTitle {
font-family: "Silver", "Silver-lq", "Font-Bold", sans-serif;
margin-top: -1dvmax;
filter: brightness(1.2) contrast(1.2);
font-weight: bold;
}
.title {
font-size: 5.5dvmax;
text-align: left;
}
.coverTitle {
text-align: center;
font-size: 13dvmin;
}
.author {
font-size: 2.1dvmax;
}
.metadata > .container {
flex-direction: column;
gap: 0.5dvmax;
height: auto;
}
.container {
display: flex;
box-sizing: border-box;
height: calc(50% - 1dvmax);
gap: 1.5dvmax;
}
.obfuscated {
font-family: "Braille", sans-serif;
}
.code {
text-align: justify;
font-size: 1.4dvmax;
text-align-last: justify;
margin: 0;
padding-left: 0;
height: 100%;
}
.context {
font-size: 1.4dvmax;
}
.signature {
background-size: contain;
width: 15dvmax;
height: 7dvmax;
background-repeat: no-repeat;
background-position: center;
position: absolute;
bottom: 4dvmax;
right: 2dvmax;
}
.tile {
overflow-y: scroll;
width: 100%;
height: 100%;
border-radius: 1dvmax;
padding: 2.5dvmax;
box-sizing: border-box;
transition: flex-grow 0.2s;
color: rgba(255, 255, 255, 1);
}
.scrollArea {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.scrollArea::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
/* Hide scrollbar for IE, Edge and Firefox */
.scrollArea,
.tile {
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
/* Additional Safari-specific rule */
@supports (-webkit-overflow-scrolling: touch) {
.scrollArea {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
}
.right {
font-family: "Font-Bold", sans-serif;
font-weight: bold;
}
.console {
white-space: pre-line;
word-wrap: break-word;
height: 100%;
}
.tile > span {
width: 100%;
text-align: left;
word-break: break-word;
overflow-wrap: break-word;
}
.coverData {
width: calc(100% - 12dvmax);
height: calc(100% - 12dvmax);
position: absolute;
top: 0;
left: 0;
margin: 6dvmax;
user-select: none;
pointer-events: none;
}
.data:first-child {
position: absolute;
top: 0;
left: 0; /* top left corner */
}
.data:nth-child(2) {
position: absolute;
top: 0;
right: 0; /* top right corner */
}
.data:nth-child(3) {
position: absolute;
bottom: 0;
left: 0; /* bottom left corner */
}
.data:last-child {
position: absolute;
bottom: 0;
right: 0; /* bottom right corner */
}
.cover {
position: relative;
}
.left,
.right {
position: relative;
}
.top,
.bottom {
height: 0;
opacity: 0;
}
@media (max-aspect-ratio: 3/4) {
body {
display: flex;
flex-direction: column;
height: 100vh;
text-align: center;
overflow: auto;
padding: 4dvmax;
}
html {
overflow: auto;
}
.coverData {
margin: 4dvmax;
width: calc(100% - 8dvmax);
height: calc(100% - 8dvmax);
}
.covered > .coverTalisman {
height: 50%;
}
.title,
.coverTitle {
text-align: center;
}
.coverTitle {
font-size: 10dvmax !important;
}
.container {
flex-direction: column-reverse;
}
.metadata > .container {
margin-left: 0;
align-items: center;
}
.talisman {
margin-right: 0;
background-position: center;
}
.metadata {
height: auto;
margin-bottom: 4dvmax;
order: 2;
}
.left {
order: 2;
}
.tile {
height: 50%;
}
}
.open > .cover,
.open > .coverData {
opacity: 0;
}
.open > .cover {
height: 0;
}
.open > .top,
.open > .bottom {
height: 50%;
opacity: 1;
}
.cover > .top {
flex-direction: column-reverse;
height: 100%;
text-align: center;
padding: 5dvmax;
gap: 3dvmax;
}
dialog {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.8rem;
width: 30dvmax;
background: white;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(2px);
}
#modalText {
margin: 0;
}
.buttons {
display: flex;
gap: 0.3rem;
justify-content: right;
}
dialog:not([open]) {
display: none;
}