body {
    background-color:#0d0e3b ;
    margin:0 ;
}

body   h1 {
    color:rgb(255,255,255);
    font-size : 50px;
    font-family: monospace;
    text-indent: 100px ;
    word-spacing: -15px;
    line-height: 25px;
}

.neon-text {
    font-size:3rem ;
    color : #00d4ff;
    text-shadow:0 0 10px #00d4ff , 0 0 20px #00d4ff;
}

.title{
    margin-top:100px;
}

ul {
    list-style-type:none;
    margin:0;
    padding :0;
    overflow:hidden;
    background-color:#04040f ;
    position: sticky;
    top:0 ;
}

li b{
    float:left;
}

li a {
    float : right;
}

li a{
    margin-right:20px ;
    font-size :30px;
    font-family:monospace;
     display:block;
    color:white ;
    text-align:center;
    padding:14px 16px;
    text-decoration:none;
}

li b {
    margin-left :20px;
    font-size:30px ;
    font-family : monospace;
    display:block;
    color:#00d4ff;
    text-shadow:0 0 10px #00d4ff,0 0 20px #00d4ff ;
    text-align:center;
     padding:14px 16px;
    text-decoration:none;
}

.selected{
    border-radius:20px ;
    background-color:#0b0c34;
    border:3px #00d4ff ;
    border-style:groove;
}

.about {
    margin-top:50px ;
    padding-left :100px;
    font-family:monospace ;
}

.about h2{
    color:white;
    font-size :40px;
    text-shadow:0 0 5px #ffffff ;
}

.about p {
    color : white;
    font-size:20px ;
    width:500px;
    line-height :30px;
}

.skills{
    margin-top:250px;
    padding-left:100px ;
    margin-bottom :300px;
    font-family : monospace;
}

.skills h2 {
    color:white ;
    font-size:40px;
    text-shadow:0 0 5px #ffffff;
}

.skill {
    margin-bottom:20px ;
}

.skill p{
    color:white;
    font-size :20px;
    margin-bottom:5px ;
}

.skill-bar{
    width :300px;
    height:20px ;
    background-color:#04040f;
    border:2px solid   #00d4ff;
    border-radius:10px;
    overflow:hidden ;
}

.skill-fill {
    height:100%;
    animation: fillAnimation  2s ease-in-out forwards;
}

.html{
    width:80% ;
    background:linear-gradient(to right,#ff8000 80%,#04040f 80%);
    box-shadow:0 0 10px #ff8000 ;
}

.css {
    width :60%;
    background:linear-gradient(to right,#00ff00 60%, #04040f 60%);
    box-shadow:0 0 10px #00ff00;
}

.python{
    width:5%;
    background:linear-gradient(to right,#8000ff 5%,#04040f 5%);
    box-shadow:0 0 10px #8000ff ;
}

.domeny {
    width :90%;
    background:linear-gradient(to right,#ff00ff 90%,#04040f 90%);
    box-shadow:0 0 10px #ff00ff;
}

.scratch{
    width:99% ;
    background:linear-gradient(to right,#ffff00 99%, #04040f 99%);
    box-shadow:0 0 10px #ffff00 ;
}

@keyframes fillAnimation {
    0%{
        width:0% ;
    }
    100% {
        width : inherit;
    }
}


.bigBtn{
    font-family: monospace;
    width:90%;
    min-height:100px;
    background:#1e1e1e;
    border-radius:12px;
    display:flex;
    align-items:center;
    padding:10px 15px;
    box-sizing:border-box;
    cursor:pointer;
    margin: 10px auto;
}

.bigBtn .icon{
    width:80px;
    height:80px;
    background:#3a3a3a;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    margin-right:14px;
}

.bigBtn .text{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.bigBtn .title{
    font-size:22px;
    font-weight:600;
    color:#fff;
    line-height:1.1;
    margin-top: 25px;
}

.bigBtn .sub{
    font-size:14px;
    color:#bdbdbd;
    margin-top:4px;
}


footer {
    margin-top: 500px;
    padding: 20px;
    background-color: #04040f;
    text-align: center;

}

footer p {
    color: white;
   font-family: monospace;
    font-size: 20px;
}

footer a {
    color: #00d4ff;
    text-decoration: none;
    text-shadow: 0 0 5px #00d4ff;
}