* {
  box-sizing: border-box;
}


body {
  margin: 0;
  min-height: 100vh;
    font-family: 'Kdam Thmor Pro', verdana, arial;
    letter-spacing: 0.05rem;
    text-shadow: 1px 1px 0 #000000c4;
    font-size: 11px;
    color: #C1C1C1;
    background-color: #111;
  background: #000 url("https://porcelainpills.neocities.org/me/links-bg.jpg")  center / cover
    no-repeat;
}

body::before {
    content:"";
    position:fixed;
    inset:0;
    background:url("https://porcelainpills.neocities.org/me/dither2.jpg") center / cover repeat;
    opacity:0.08;
    pointer-events:none;
    mix-blend-mode:color-dodge;
}

p {
    margin: 0 0 1em 0;
}

 
h1  {  margin: 0 0 3px 0;
    font-family: 'Genos', verdana, arial;
    font-size: 1.85rem;
    color: #e7e7e7;
    letter-spacing: 0.5px;
      -webkit-text-stroke: 0.8px #d9c4ff;
    text-shadow:
        0 0 4px #8741FF,
        0 0 10px #8741FF,
        0 0 20px rgba(135,65,255,.7);
    transition: all .25s ease;
}

h2 {
    margin: 0 0 3px 0;
    font-family: 'Genos', verdana, arial;
    font-size: 1.85rem;
    color: #6b6b6b;
    letter-spacing: 0.5px;
}

.spacing {
    margin-top: 25px;
    margin-bottom: 20px;
}




.links-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
     border-radius:40px 40px 0 0;
      margin:-40px -40px 25px;
    padding: 15px 30px 14px;
    background-color: rgba(89, 89, 89, 0.08);
}

.links-nav a {
        display: inline-block;
        padding: 4px 10px;
        background: transparent;
        border: none;
        font-family: Genos;
        font-size: 18px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #ccc;
        text-decoration: none;
        transition: all 0.2s ease;
        border-bottom:2px solid #433064;
        text-shadow:
    0 0 3px #8741FF,
    0 0 8px #8741FF,
    0 0 16px rgba(135,65,255,.7);
    }

        .links-nav a:hover {
            color: #d9c4ff;
            -webkit-text-stroke: 0.8px #8c8fca;
            text-shadow:
                0 2px 2px #433064,
                0 0 12px #433064;
            filter: blur(1px);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            transform: translateY(-1px);
            border-bottom: none;
    }

a {
  transition: all 0.2s ease-out;
  text-decoration: none;
  color: inherit;
  -webkit-text-stroke: 0.8px #d9c4ff;
  text-shadow: 1px 1px 0 #433064;
}

a:hover {
  color: #b0b4fd;
  -webkit-text-stroke: 0.8px #8c8fca;
  text-shadow:
    0 2px 2px #b0b4fd,
    0 0 12px #8c8fca;
  filter: blur(1px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateY(-1px);
}


.space {
  position: fixed;
  inset: 0;
  overflow: hidden;
  perspective: 700px;
}

.space::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;

  background:
    radial-gradient(circle at 20% 30%,
      rgba(135,65,255,.18) 0%,
      transparent 35%),

    radial-gradient(circle at 80% 20%,
      rgba(135,65,255,.12) 0%,
      transparent 30%),

    radial-gradient(circle at 60% 80%,
      rgba(170,120,255,.08) 0%,
      transparent 40%);

  filter: blur(90px);
  animation: nebulaFloat 40s ease-in-out infinite alternate;
}

@keyframes nebulaFloat {
  from {
    transform: translate(-2%, -1%) scale(1);
  }

  to {
    transform: translate(2%, 3%) scale(1.15);
  }
}

.stars {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}


.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #8741FF;
  border-radius: 50%;
  will-change: transform, opacity;
  box-shadow:
    0 0 6px rgba(255,255,255,.8);
}



.content {

  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.links-title {
    position: absolute;
    top: -101px;
    font-family: "Genos", serif;
    font-size: 6rem;
    color: #e7e7e7;
    z-index: 2;
    white-space: nowrap;
    mix-blend-mode: color-dodge;
    letter-spacing: 0.5px;
    -webkit-text-stroke: 0.8px #d9c4ff;
    text-shadow:
        0 0 4px #8741FF,
        0 0 10px #8741FF,
        0 0 20px rgba(135,65,255,.7);
    animation: titleGlow 4s ease-in-out infinite;
    margin:auto;
    text-align:center;
    transition:.6s ease-out;
}


@keyframes titleGlow {

    0%, 100% {
        text-shadow:
            0 0 4px #8741FF,
            0 0 10px #8741FF,
            0 0 20px white;
    }

    50% {
        text-shadow:
            0 0 8px #8741FF,
            0 0 18px #8741FF,
            0 0 35px rgba(135,65,255,.9);
    }
}



.page {
  isolation: isolate;
  width: min(900px,100%);
  min-height: 350px;
  padding: 40px;
  border-radius: 40px;
 border: 2px solid rgba(135,65,255,.45);
  backdrop-filter: blur(5px);
   box-shadow:
        0 0 0 1px rgba(135,65,255,.25),
        0 0 25px rgba(135,65,255,.18),
        0 25px 80px rgba(0,0,0,.6),
        inset 0 0 40px rgba(135,65,255,.08);
    background:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.08) 1px, transparent 2px),
        radial-gradient(circle at 75% 60%, rgba(255,255,255,.06) 1px, transparent 2px),
        rgba(20,20,28,.55);
            overflow: visible;
}
.page::before,
.page::after {
    content: "";
    position: absolute;
    width: 140px;
    height: 140px;
    pointer-events: none;
    filter: blur(30px);
}

.page::before {
    top: -30px;
    left: -30px;

    background:
        radial-gradient(circle,
            rgba(135,65,255,.25),
            transparent 70%);
}

.page::after {
    bottom: -30px;
    right: -30px;

    background:
        radial-gradient(circle,
            rgba(135,65,255,.18),
            transparent 70%);
}

.page {
    isolation: isolate;
}

.page > *:not(.page-planet) {
    position: relative;
    z-index: 2;
}

.page-planet {
    z-index: 3;
}

.page-planet {
    position: absolute;

    width: 300px;
    height: 300px;

    right: -100px;
    bottom: -128px;

    z-index: 3;

    animation: planetFloat 6s ease-in-out infinite;
}


.planet-image {
    position: relative;

    width: 100%;
    height: 100%;

    background: url("https://porcelainpills.neocities.org/me/link-planet-dithered.png")
        center / contain
        no-repeat;

    transform: rotate(12deg);

    opacity: .9;

    filter:
        drop-shadow(0 0 8px rgba(135,65,255,.7))
        drop-shadow(0 0 25px rgba(135,65,255,.35));
}


@keyframes planetFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }
}


.planet-overlay {
    position: absolute;

    inset: 0;

    background: url("https://porcelainpills.neocities.org/me/planet%20overlay.png")
        center / contain
        no-repeat;

    opacity: 0;

    transition:
        opacity .35s ease,
        transform .35s ease;

    pointer-events: none;

    z-index: 2;
}
.page-planet:hover .planet-overlay {
    opacity: 1;
    transform: scale(1.05);
}


.page-planet:hover .planet-overlay {
    opacity: 1;
    transform: scale(1.05);
}

.metal-box {
    position: relative;
    padding: 25px;
    border-radius: 12px;
    background-image: url("https://porcelainpills.neocities.org/me/four-bar-diamond-tread-aluminium-3000-mm-architextures.jpg");
background-repeat: repeat;
background-size: 250px;
    box-shadow:
        inset 0 0 20px rgba(0,0,0,.8),
        inset 0 2px 4px rgba(255,255,255,.35),
        0 10px 30px rgba(0,0,0,.5);
    overflow: hidden;
        z-index: 1;
}

.metal-box::before {
    z-index: -1;
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.08) 0px,
            rgba(255,255,255,.08) 1px,
            transparent 2px,
            transparent 5px
        );
    opacity: .25;
    pointer-events: none;
}

.metal-box::after {
      z-index: -1;
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(80, 80, 80,0.5),
            transparent 20%
        );
    mix-blend-mode: multiply;
    pointer-events: none;
}

.metal-box {
    --bolt: url("https://porcelainpills.neocities.org/me/rivet-head.png");
}


.metal-box .bolt {
    position: absolute;

    width: 16px;
    height: 16px;

    background:
        var(--bolt)
        center / contain
        no-repeat;
}


.bolt.tl {
    top: 8px;
    left: 8px;
}

.bolt.tr {
    top: 8px;
    right: 8px;
}

.bolt.bl {
    bottom: 8px;
    left: 8px;
}

.bolt.br {
    bottom: 8px;
    right: 8px;
}

@media (max-width: 600px) {

    .page {
        margin-bottom: 0;
         overflow: visible;
    }

    .page-planet {
        position: relative;

        width: 220px;
        height: 220px;

        right: auto;
        bottom: auto;

        margin: 40px auto 0;
 transform: translateY(40px);
        z-index: 1;
    }

    .content {
        flex-direction: column;
        justify-content: center;
    }

    .links-title {
    font-size: 3rem;
    position: absolute;
    top: -48px;
}

}


.button-viewer{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

#buttonImage{
    image-rendering:pixelated;
}

#buttonCode{
    resize:none;
    overflow-y:auto;
    overflow-x:auto;
    background:rgba(20, 20, 30, 0.8);
    color:#d9c4ff;
    border:1px solid #433064;
    border-radius:8px;
    padding:10px;
    font-family:monospace;
    white-space:pre;
    box-shadow:
        0 0 8px rgba(135,65,255,.25),
        inset 0 0 12px rgba(135,65,255,.08);
}


#nextButton,
.basic-button {
    background:rgba(26,26,26,.75);
    border:1px solid #433064;
    border-radius:6px;
    padding:5px 10px;

    font-family:'Hiragino Kaku Gothic ProN', verdana, arial;
    letter-spacing:0.08rem;
    text-transform:uppercase;

    font-size:11px;
    color:#ccc;

    cursor:pointer;
    text-shadow:
        0 0 3px #8741FF,
        0 0 8px rgba(135,65,255,.7);
    box-shadow:
        inset 0 0 10px rgba(135,65,255,.08);

    transition:
        transform .2s ease,
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


#nextButton:hover,
.basic-button:hover {

    color:#d9c4ff;

    background:rgba(67,48,100,.35);

    border-color:#8741FF;

    transform:translateY(-1px);

    text-shadow:
        0 0 4px #8741FF,
        0 0 10px #8741FF,
        0 0 20px rgba(135,65,255,.8);

    box-shadow:
        0 0 6px rgba(135,65,255,.6),
        0 0 14px rgba(135,65,255,.45),
        inset 0 0 12px rgba(135,65,255,.2);
}


#nextButton:active,
.basic-button:active {
    transform:translateY(1px);
}


#nextButton:focus,
.basic-button:focus {
    outline:none;

    box-shadow:
        0 0 6px #8741FF,
        0 0 18px rgba(135,65,255,.8);
}


.button-box {
  isolation: isolate;
  width: 100%;
  border-radius: 12px;
  padding: 12px;
 border: 1px solid #8741FF;
    box-shadow:
        inset 0 0 10px rgba(135,65,255,1);
    background-color: rgba(89, 89, 89, 0.08);
}