/* =========================
   HEADER / NAVBAR
========================= */

header{
    width: 100%;
    background-color: rgb(16,16,16);
    position: sticky;
    top: 0;
    z-index: 999;
}

header .main{
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ========= LOGO ========= */

header .heading{
    display: flex;
    align-items: center;
    gap: 5px;
}

.heading .logo{
    width: 45px;
    height: 45px;
    overflow: hidden;
    margin: 7px 0;
}

.heading .logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.heading .name{
    display: flex;
    gap: 5px;
    color: #fff;
    letter-spacing: 5px;
    font-family: 'Oswald', sans-serif;
}

.heading .name .n1st{
    color: #00ffee;
    font-size: 17px;
    font-weight: 600;
}

/* ========= NAV MENU ========= */

header ul{
    list-style: none;
    display: flex;
    align-items: center;
}

header ul li{
    padding: 5px 10px;
}

header ul li a{
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    transition: .4s;
}

header ul li a:hover,
header ul li.active a{
    color: #00ffee;
}

/* ========= MENU BUTTON ========= */

.menu{
    width: 45px;
    height: 40px;
    border: 2px solid #00ffee;
    border-radius: 10px;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    margin-top: 8px;
}

.menu .m1{
    width: 25px;
    height: 3px;
    background: #00ffee;
    border-radius: 50px;
    margin: 3px 0;
    transition: .4s;
}










/* bodyyyyyy */


/* Reset CSS */

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

/* Selection */

::selection{
    background: #00bcd4;
    color: #000;
}

/* Body */

body{
    background:linear-gradient(135deg,#111827,#1f242d,#0f172a);
    position:relative;
    overflow-x:hidden;
    min-height:100vh;
}

/* Glow Effect */

body::before{
    content:'';
    position:fixed;
    width:450px;
    height:450px;
    background:#00ffee;
    border-radius:50%;
    filter:blur(180px);
    opacity:.08;
    top:-180px;
    left:-150px;
    animation:glow1 8s infinite alternate;
    z-index:-1;
}

body::after{
    content:'';
    position:fixed;
    width:350px;
    height:350px;
    background:#00ffee;
    border-radius:50%;
    filter:blur(160px);
    opacity:.06;
    bottom:-150px;
    right:-100px;
    animation:glow2 10s infinite alternate;
    z-index:-1;
}

@keyframes glow1{
    100%{
        transform:translate(100px,80px);
    }
}

@keyframes glow2{
    100%{
        transform:translate(-90px,-70px);
    }
}