body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bg {
    background-image: url("/brick.jpg");
    background-position: center;
    background-size: 100%;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    filter: grayscale(100%) brightness(20%) contrast(110%);
    z-index: 0 !important;
}

*{
    z-index: 10;
    box-sizing: border-box;
}

canvas{
    z-index: 5;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}

.neon {
    animation: flicker 1.5s infinite alternate;
    color: #fff;
    text-align: center;
}

h1{
    margin: 0;
    padding: 0;
    margin-top: 16px;
    line-height: 90%;
    font-size: 78px;
    font-family: "Neonderthaw", cursive;
    transform: translate3d(0,0,0)
}

h2{
    font-size: 36px;
    text-align: center;
    margin: 0;
    padding: 0;
    color: #e2e2e2;
    letter-spacing: 6px;
    font-family: "Permanent Marker", cursive;
}

.chalkboard-frame {
    margin-top: 56px;
    background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwFoIovH-W1qe6erjZRxDe0XJuG5t8Z3perw&s'); /* replace with real base64 or hosted URL for image turn0image5 */
    background-size: cover;
    background-repeat: no-repeat;
    padding: 8px;            /* Thickness of the wooden frame */
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    display: inline-block;
}

.chalkboard {
    background: linear-gradient(135deg, #1f1f1f, #090909);
    padding: 1rem;
    border-radius: 6px;
    position: relative;
    max-width: 800px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.chalkboard::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://www.transparenttextures.com/patterns/black-paper.png');
    opacity: 0.4;
    z-index: 0;
}

.chalk-text {
      position: relative;
      z-index: 1;
      color: rgba(255,255,255,0.85);
      text-shadow:
        1px 1px 0 #bbb,
        -1px -1px 0 #bbb,
        1px -1px 0 #bbb,
        -1px 1px 0 #bbb;
      filter: blur(0.3px);
      word-wrap: break-word;
      text-align: center;

    }

h3{
    font-size: 42px;
    color: #e2e2e2;
    font-family: "Permanent Marker", cursive;
    letter-spacing: 20%;
    margin: 0;
    padding: 0;
}

img {
    margin-top: 48px;
    border: 0.2rem solid #fff;
    border-radius: 100%;
    box-shadow: 0 0 .2rem #fff,
            0 0 .2rem #fff,
            0 0 3rem #ff13f0,
            0 0 1.2rem #ff13f0,
            0 0 5rem #ff13f0,
            inset 0 0 1.3rem #ff13f0; 
    aspect-ratio: 1;
}

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 7px #fff,
      0 0 13px #fff,
      0 0 20px #ff13f0,
      0 0 40px #ff13f0,
      0 0 45px #ff13f0,
      0 0 50px #ff13f0,
      0 0 75px #ff13f0;
  }
  20%, 24%, 55% {       
    text-shadow: none;
  }
}

    @media (max-width: 768px) {
    .bg {
        background-size: 250%;
    }
    .chalk-text {
        filter: blur(0px);
        text-shadow: none;
    }
    h1 {
        font-size: 64px;
    }
    h2{
        font-size: 24px;
    }

    @keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 2px #fff,
      0 0 3px #fff,
      0 0 5px #fff,
      0 0 8px #ff13f0,
      0 0 10px #ff13f0,
      0 0 15px #ff13f0,
      0 0 20px #ff13f0,
      0 0 30px #ff13f0;
  }
  20%, 24%, 55% {       
    text-shadow: none;
  }
}

    
}