* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
    font-family: monospace;
    ;
}

body {
    background:black;
    color:#00ff88;
    overflow-x:hidden;
}

header {
    position:fixed;
    width:100%;
    padding:20px 50px;
    background:rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.section {
    min-height:100vh;
    padding:150px 10%;
}

form {
    display:flex;
    flex-direction:column;
    gap:20px;
}

input, textarea {
    padding:15px;
    background:black;
    border:1px solid #00ff88;
    color:white;
}


/*--------------------- Matrix ---------------------*/

#matrix {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.14;
    filter: blur(2px);
    z-index: -2;
}

.matrix-bg {
    position:fixed;
    width:100%;
    height:100%;
    background:
        radial-gradient(circle at center, rgba(0,255,100,0.08), transparent 70%);
    z-index:-1;
}

/*--------------------- Loader ---------------------*/

#loader {
    position:fixed;
    width:100%;
    height:100%;
    background:black;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:30000;
}

/*--------------------- Particle ---------------------*/

#particles{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none; /*Particles never in touch with buttons*/
    z-index:-1;
}

/*--------------------- Typing text ---------------------*/

.terminal-intro{
    margin-top:25px;
    font-size:1.2rem;
    color:#00ff88;
    font-family:monospace;
    min-height:160px;
    white-space:pre-line;
}

.cursor{
    animation:blink .8s infinite;
}

@keyframes blink{
    50%{
        opacity:0;
    }
}