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% ;
  height:100px;
  background:#1e1e1e;
   border-radius:12px;
  display:flex;
 align-items:center;
  padding:10px 15px;
  box-sizing:border-box;
 cursor:pointer;
 margin-left: 70px;
 margin-bottom: 10px;
}

.bigBtn .icon{
 width:80px;
 font-family: monospace;
 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;
 font-family: monospace;
  flex-direction:column;
 justify-content:center;
 margin-bottom: 120px;
}

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

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

}

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

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

.form label {
    color: white;
    font-size: 20px;
    display: block;
    margin-bottom: 10px;
}

.form input, .form textarea {
    width: 400px;
    padding: 10px;
    margin-bottom: 20px;
    border: 2px solid #00d4ff;
    border-radius: 5px;
    background-color: #04040f;
    color: white;
    font-size: 16px;
}

.form button {
    padding: 10px 20px;
    background-color: #00d4ff;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.form button:hover {
    background-color: #00b8e6;
}

.form a {
    color: #9a1111;
    text-decoration: none;
    text-shadow: 0 0 5px #6a0407;
}

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;
}