body{
    background: linear-gradient(166deg, #020024 20%, #242E58 70%, #098faa 100%);
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    text-align: center;
    margin: 0 auto;
    color: red;
    justify-content: center;
    max-width: 1200px;
}
header{
    display: grid;
    grid-template-columns: auto;
    margin-top:40px;
    margin-bottom:100px;

    button{
        padding:10px 20px 10px 20px;
        background-color: transparent;
        border: none;
        color:#485485;
        font-size: 16px;
        font-weight: bold;
    }
    button:hover{
        color:#7c8cc7;
        cursor: pointer;
    }
}

#about {
    display: grid;
    grid-template-columns: auto auto;
    margin-bottom:100px;
    img{
        height: auto;
        width: 60%;
        border-radius: 150px;
        box-shadow: 0 0 5px 5px #485aa1;
        opacity: 0.8;
        justify-self: end;
    }
    h1{
        background: linear-gradient(166deg, #485aa1 30%, #00D4FF 100%);
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent;
        font-size: 50px;
        text-align: left;
    }
    h1:hover{
        background: linear-gradient(166deg, #8d8383 30%, #00D4FF 100%);
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent;
        cursor: pointer;
    }
    h2{
        color:#4c5c9c;
        font-size: 25px;
    }
    img:hover{
        box-shadow: 0 0 10px 10px rgb(24, 110, 180);
        cursor: pointer;
    }
}

#projects{
    display: grid;
    grid-template-columns: auto;

    #title{
        background: linear-gradient(166deg, #485aa1 30%, #00D4FF 100%);
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent;
        font-size: 80px;
        text-align: center;
    }
    h1{
        background: linear-gradient(166deg, #485aa1 30%, #00D4FF 100%);
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent;
        font-size: 40px;
        text-align: left;
    }
    p{
        background: linear-gradient(166deg, #485aa1 30%, #00D4FF 100%);
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent;
        font-size: 25px;
        text-align: left;
    }
    h3{
        background: linear-gradient(166deg, #485aa1 30%, #00D4FF 100%);
        -webkit-background-clip: text; 
        -webkit-text-fill-color: transparent;
        font-size: 20px;
        text-align: left;
    }
}
#title{
    background: linear-gradient(166deg, #485aa1 30%, #00D4FF 100%);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    font-size: 80px;
    text-align: center;
}
#contactForm {
    margin: 0 auto;
    width: 90%;
    text-align: left;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    margin-top:10px;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    outline: none;
    resize: none; /* Prevent textarea from being resizable */
}

input[type="submit"] {
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid #00D4FF;
    color: #00D4FF;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

input[type="submit"]:hover {
    background-color: #00D4FF;
    color: #020024;
}

.error {
    color: red;
    margin-top: -10px;
    margin-bottom: 10px;
}
label{
    color:#485aa1;
    font-size: 20px;
}
#contact{
    display: grid;
    grid-template-columns: 1fr auto;
    gap:100px;
}
#contact-info{
    display: grid;
    grid-template-rows: auto auto auto;
    background: linear-gradient(166deg, #485aa1 30%, #00D4FF 100%);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    font-size: 30px;
    text-align: left;
}
footer{
    margin-top:200px;
    background: linear-gradient(166deg, #1c2e75 30%, #152a86 100%);
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
}
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
  }
.skill-level-100{
    background-image: linear-gradient(to right, #1c2e75 100%, #00D4FF);
}
.skill-level-95{
    background-image: linear-gradient(to right, #1c2e75 95%, #00D4FF);
}
.skill-level-90{
    background-image: linear-gradient(to right, #1c2e75 90%, #00D4FF);
}
.skill-level-85{
    background-image: linear-gradient(to right, #1c2e75 85%, #00D4FF);
}
.skill-level-80{
    background-image: linear-gradient(to right, #1c2e75 80%, #00D4FF);
}
.skill-level-75{
    background-image: linear-gradient(to right, #1c2e75 75%, #00D4FF);
}
.skill-level-70{
    background-image: linear-gradient(to right, #1c2e75 70%, #00D4FF);
}
.skill-bar{
    div{
        text-align: center;
        color: #fff;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
    }
}