@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
    background: black url('https://i.gifer.com/81mg.gif') repeat 480px 480px;
    font-family: 'IBM Plex Mono', monospace;
    text-align: center;
    color: #ffffff;
    padding: 1rem;
}

p {
    word-wrap: break-word;
    white-space: normal;
}

#container {
    width: 90vw;
    max-width: 800px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.85);
    border: 2px solid transparent;
    border-image: linear-gradient(45deg, #00ffff, #00bfff, #00ffff) 1;
    box-shadow: 0 0 130px #00ffff;
    padding: 20px;
}

.title {
    font-size: 3rem;
    color: #0ff;
    text-align: center;
    margin: 20px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    animation: glitch 1s infinite;
}

.nav-menu {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    border-bottom: 1px solid #00FFFF;
    margin-bottom: 20px;
}

.nav-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 1rem;
    gap: 10px;
}

.nav-menu a {
    color: #00ffff;
    text-decoration: none;
    font-size: 1.25rem;
    position: relative;
    transition: color 0.3s;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 2px;
    background: #00ffff;
    transition: width 0.3s;
}

.nav-menu a:hover::after {
    width: 100%;
}

.nav-menu a:hover {
    color: #ffffff;
    text-shadow: 0 0 10px #00ffff;
}

.blog-posts {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post {
    border-left: 8px solid transparent;
    border-image: linear-gradient(45deg, #00ffff, #00bfff) 1;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 10px #00ffff88;
    transition: transform 0.3s;
}

.post p {
    white-space: pre-line;
}

.post:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px #00ffffcc;
}

.post-date {
    opacity: 0.7;
    font-size: 0.9rem;
}

.post-title {
    font-size: 1.1rem;
    color: #00ffff;
    margin-bottom: 10px;
}

.post-title:hover {
    color: #00bfff;
    text-shadow: 0 0 8px #00bfff;
}

.footer {
    font-size: 12px;
    color: #ccc;
    margin-top: 40px;
    border-top: 1px dashed #aaa;
    padding-top: 10px;
}

@media (max-width: 600px) {
  .nav-menu ul {
    flex-direction: column;
    align-items: center;
  }

  .post-title {
    font-size: 1.25rem;
  }
}

@keyframes glitch {
    0% {
        text-shadow: 2px 0 #00ffff, -2px 0 #00bfff;
    }
    20% {
        text-shadow: -2px 0 #00ffff, 2px 0 #00bfff;
    }
    40% {
        text-shadow: 2px 2px #00ffff, -2px -2px #00bfff;
    }
    60% {
        text-shadow: -2px -2px #00ffff, 2px 2px #00bfff;
    }
    80% {
        text-shadow: 0px 0px #00ffff, 0px 0px #00bfff;
    }
    100% {
        text-shadow: 2px 0 #00ffff, -2px 0 #00bfff;
    }
}