:root {
--bg-primary: #11302a;
--text-primary: #dac4d0;
--accent1: #046261;
--accent2: #55194F;
--accent3: #8f5774;
--accent4: #dac4d0;
--accent5: #e0829d;
--accent6: #046261;
--accent7: #11302a;
--global--size: clamp(2rem, 4vw, 5rem);
--anim--hover-time: 400ms;
--anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
}
/* width */
::-webkit-scrollbar {
width: 20px;
border-radius: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0px 5px 10px var(--accent6);
border-radius: 20px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--accent1);
border-radius: 20px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #812B5C;
}
@keyframes sparkle {
0%, 100% { opacity: 1 }
50% { opacity: 0.5 }
}
body {
background-color: var(--bg-primary) !important;
background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEhCTVfh6esrp-WT9OQMCVPo7ONoCp_kIFy7rWIlT7kcXJn5lUt0P1DikYTwzqbAQpij_CtJIM7uq6GMp6GAIQH57DRnBGVJk77orKIWPyisa8Uw5VENikl8pu9-3fh0XjrqUxiUvAMu0zJj4VXw1K_9KFdJXRvNQZSp8Ir3NpapsxSOasRIbh-jmLFBlYM=s1600);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
color: var(--text-primary);
font-family: "MS Gothic", "VT323", monospace;
cursor: url('data:image/svg+xml,'), auto;
margin: 0;
line-height: 1.6;
position: relative;
overflow-x: hidden;
}
body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
transparent 0px,
rgba(0, 0, 0, 0.1) 1px,
transparent 2px
);
pointer-events: none;
animation: scanline 10s linear infinite;
z-index: 999;
}
.main-container {
display: grid;
grid-template-columns: 250px 1fr;
gap: 2rem;
max-width: auto;
margin: 5px auto;
padding: 1rem;
}
.header {
text-align: center;
border: 3px solid var(--accent1);
padding: 3px;
margin-bottom: 2rem;
background: linear-gradient(45deg, #000000, #330033);
box-shadow: 0 0 20px var(--accent2);
position: relative;
overflow: hidden;
}
.marquee {
overflow: hidden;
white-space: nowrap;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%) }
100% { transform: translateX(-100%) }
}
.content-grid {
display: grid;
padding: 2rem;
}
.post {
background:var(--accent3) ;
border: 2px solid var(--accent1);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
border: 3px solid var(--accent1);
overflow: none;
margin:10px;
padding: 10px;
position: relative;
}
.post::before {
content: "✧";
position: absolute;
top: -10px;
left: -10px;
color: var(--accent3);
animation: sparkle 2s infinite;
}
details > summary {
padding: 4px;
width: fixed;
background-color: var(--accent1);
border: 2px double var(--accent2);
border-radius: 5px;
box-shadow: 2px 2px 2px var(--accent4);
list-style: none;
font-size: 20px;
cursor: url('data:image/svg+xml,'),e-resize;
}
details > p {
background-color: var(--accent3);
border: 2px double var(--accent2);
border-top:none;
border-radius: 5px;
padding: 4px;
margin: 0;
box-shadow: 2px 2px 2px var(--accent4);
overflow:none;
}
.shrine-section {
display: grid;
grid-template-columns: auto auto auto;
gap: 5px;
margin: 5px 0;
text-align: center;
}
.button {
backface-visibility: hidden;
position: relative;
cursor:url('data:image/svg+xml,'), pointer;
display: inline-block;
white-space: nowrap;
background: var(--accent5);
border-radius: 20px;
border: 04px solid var(--accent1);
border-width: 04px 04px 04px 04px;
padding: 015px 015px 015px 015px;
box-shadow: inset 0px 1px 0px rgba(255,255,255,1),0px 1px 3px rgba(0,0,0,0.3);
color: var(--accent1);
font-size: 16px;
font-family: Helvetica Neue;
font-weight: 900;
font-style: normal;
text-shadow: 0px -1px 2px rgba(0,0,0,0.4)
}
.button > div {
color: #999;
font-size: 10px;
font-family: Helvetica Neue;
font-weight: initial;
font-style: normal;
text-align: center;
margin: 0px 0px 0px 0px
}
.button > i {
font-size: 1em;
border-radius: 0px;
border: 0px solid transparent;
border-width: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
position: static
}
.button > .ld {
font-size: initial
}
.worldcontainer {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.worldbutton {
position: relative;
padding: 8px 15px;
font-size: 1.25rem;
color: var(--color);
border: 2px solid #046261;
background-color: #046261;
border-radius: 4px;
text-shadow: 0 0 15px var(--color);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.1rem;
transition: 0.5s;
z-index: 1;
}
.worldbutton:hover {
color: #fff;
border: 2px solid rgba(0, 0, 0, 0);
box-shadow: 0 0 0px var(--color);
}
.worldbutton::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color);
z-index: -1;
transform: scale(0);
transition: 0.5s;
}
.worldbutton:hover::before {
transform: scale(1);
transition-delay: 0.5s;
box-shadow: 0 0 10px var(--color),
0 0 30px var(--color),
0 0 60px var(--color);
}
.worldbutton span {
position: absolute;
background: var(--color);
pointer-events: none;
border-radius: 2px;
box-shadow: 0 0 5px var(--color),
0 0 10px var(--color),
0 0 15px var(--color),
0 0 25px var(--color),
0 0 50px var(--color);
transition: 0.5s ease-in-out;
transition-delay: 0.25s;
}
.worldbutton:hover span {
opacity: 0;
transition-delay: 0s;
}
.worldbutton span:nth-child(1),
.worldbutton span:nth-child(3) {
width: 20px;
height: 2px;
}
.worldbutton:hover span:nth-child(1),
.worldbutton:hover span:nth-child(3) {
transform: translateX(0);
}
.worldbutton span:nth-child(2),
.worldbutton span:nth-child(4) {
width: 2px;
height: 20px;
}
.worldbutton:hover span:nth-child(1),
.worldbutton:hover span:nth-child(3) {
transform: translateY(0);
}
.worldbutton span:nth-child(1) {
top: calc(50% - 2px);
left: -25px;
transform-origin: left;
}
.worldbutton:hover span:nth-child(1) {
left: 25%;
}
.worldbutton span:nth-child(3) {
top: calc(50% - 2px);
right: -25px;
transform-origin: right;
}
.worldbutton:hover span:nth-child(3) {
right: 25%;
}
.worldbutton span:nth-child(2) {
left: calc(50% - 2px);
top: -25px;
transform-origin: top;
}
.worldbutton:hover span:nth-child(2) {
top: 25%;
}
.worldbutton span:nth-child(4) {
left: calc(25% - 2px);
bottom: -25px;
transform-origin: bottom;
}
.worldbutton:hover span:nth-child(4 ) {
bottom: 25%;
}