/* style.css */
body {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    font-family: "Anton", sans-serif;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 80% 45%, #323238 0%, #000000 100%);
}

.glow-center {
    position: absolute;
    top: 45%;
    left: 80%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 60%, rgb(184, 184, 184) 100%);
    box-shadow: 0 0 60px 30px rgba(255, 255, 255, 0.3);
    filter: blur(2px);
    animation: pulseGlow 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes pulseGlow {
    0%   { box-shadow: 0 0 60px 30px rgba(255, 255, 255, 0.3); }
    30%  { box-shadow: 0 0 80px 40px rgba(255, 255, 255, 0.6); }
    50%  { box-shadow: 0 0 100px 50px rgba(255, 255, 255, 0.8); }
    70%  { box-shadow: 0 0 80px 40px rgba(255, 255, 255, 0.6); }
    100% { box-shadow: 0 0 60px 30px rgba(255, 255, 255, 0.3); }
}

.top-band {
    position: absolute;
    position: absolute;
    top: 10px;
    left: 15px;
    width: 1800px;
    height: 20px;
    padding: 20px;
    border: 2px solid rgb(58, 101, 146);
    border-radius: 12px;
    background: rgba(32, 36, 61, 0.32);
    color: #3a6592;
    font-family: sans-serif;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 10px rgb(61, 80, 102);
    transition: border 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}

.about-me {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 1000px;
    height: 200px;
    padding: 20px;
    border: 2px solid rgb(58, 101, 146);
    border-radius: 12px;
    background: rgba(32, 36, 61, 0.32);
    color: #ffffff;
    font-family: sans-serif;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 10px rgb(61, 80, 102);
    transition: border 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}

.cybersecurity{
    position: absolute;
    top: 100px;
    left: 1100px;
    width: 500px;
    height: 200px;
    padding: 20px;
    border: 2px solid rgb(58, 101, 146);
    border-radius: 12px;
    background: rgba(32, 36, 61, 0.32);
    color: #3a6592;
    font-family: sans-serif;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 10px rgb(61, 80, 102);
    text-align: center;
    transition: border 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}

.about-me:hover {
    background: rgba(176, 176, 176, 0.28);
    box-shadow: 0 0 15px rgba(193, 193, 193, 0.99);
    border: 2px solid rgba(255, 255, 255, 0.94);
}

.top-band:hover {
    background: rgba(176, 176, 176, 0.28);
    box-shadow: 0 0 15px rgba(193, 193, 193, 0.99);
    border: 2px solid rgba(255, 255, 255, 0.94);
}

.cybersecurity:hover {
    background: rgba(176, 176, 176, 0.28);
    box-shadow: 0 0 15px rgba(193, 193, 193, 0.99);
    border: 2px solid rgba(255, 255, 255, 0.94);
}

.dev:hover {
    background: rgba(176, 176, 176, 0.28);
    box-shadow: 0 0 15px rgba(193, 193, 193, 0.99);
    border: 2px solid rgba(255, 255, 255, 0.94);
}

.night {
    position: absolute;
    width: 300vw;
    height: 300vh;
    top: -25vh;
    left: -25vw;
    transform: rotateZ(45deg);
}

.shooting_star {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(-45deg, #f6f6f6, rgba(0, 0, 255, 0));
    border-radius: 999px;
    filter: drop-shadow(0 0 6px #bababa);
    animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
    animation-delay: var(--delay);
    transform: rotateZ(45deg);
}

.shooting_star::before,
.shooting_star::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    height: 2px;
    background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #bcbcbc, rgba(0, 0, 255, 0));
    border-radius: 100%;
    animation: shining 3000ms ease-in-out infinite;
    animation-delay: var(--delay);
}

.shooting_star::before {
    transform: translateX(50%) rotateZ(45deg);
}

.shooting_star::after {
    transform: translateX(50%) rotateZ(-45deg);
}

@-webkit-keyframes tail {
    0% {
        width: 0;
    }
    30% {
        width: 100px;
    }
    100% {
        width: 0;
    }
}

@keyframes tail {
    0% {
        width: 0;
    }
    30% {
        width: 100px;
    }
    100% {
        width: 0;
    }
}
@-webkit-keyframes shining {
    0% {
        width: 0;
    }
    50% {
        width: 30px;
    }
    100% {
        width: 0;
    }
}
@keyframes shining {
    0% {
        width: 0;
    }
    50% {
        width: 30px;
    }
    100% {
        width: 0;
    }
}
@-webkit-keyframes shooting {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(300px);
    }
}
@keyframes shooting {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(300px);
    }
}
@-webkit-keyframes sky {
    0% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(405deg);
    }
}
@keyframes sky {
    0% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(405deg);
    }
}

h1 {
    font-size: 3em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}