html {
    scroll-behavior: smooth;
}

body {
    background-color: rgb(18, 18, 18);
    color: black;
    font-family: 'Times New Roman', Times, serif;
    margin: 5px 0px 0px 0px;
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
}

.header {
    background-color: rgb(183, 182, 200);
    color: rgb(6, 6, 6);
    text-align: left;
    font-size: large;
    font-family: 'Times New Roman', Times, serif;
    padding: 1px 0px 1px 10px;
    border-radius: 15px 15px 0px 0px;
}

.contact-navigation {
    text-align: center;
    padding: 1px 0px 1px 0px;
    margin-top: 0px;
    color: black;
    background-color: rgb(133, 131, 148);
    border-radius: 0px 0px 10px 10px;
}

.navigation {
    text-align: center;

    ul {
        padding-left: 20px;
        padding: 5px 5px 5px 10px;
        text-align: right;
        list-style-type: none;
        color: black;
        text-align: right;
        font-size: 20px;
        margin: 0px;
        overflow: hidden;
        background-color: rgb(133, 131, 148);
        border-radius: 0px 0px 20px 20px;
        display: flex;
        gap: 4%;

        li {
            display: inline-block;
        }

        a {
            text-decoration: none;
            color: black;
            padding: 5px 5px;
            display: block;

        }
    }

    .li:hover a {

        color: rgb(204, 201, 201);
        border-radius: 6px;
    }

}

.content {
    border-radius: 15px 15px 0px 0px;
    padding: 5px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 18px;
    background-color: rgb(183, 182, 200);
    margin-top: 5px;
    height: auto;
    overflow-y: auto;

    .marquee {
        margin-top: 20px;
        font-size: 30px;
        font-weight: bold;
    }

    .profile {
        margin-top: 5px;
        margin-bottom: 5px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-radius: 10px;
        background-color: rgba(133, 131, 148, 0.382);
        text-align: center;
        font-family: 'Times New Roman', Times, serif;
    }

    p {
        font-family: 'Times New Roman', Times, serif;
    }

    .professional-summary {
        background-color: rgba(133, 131, 148, 0.382);
        padding: 10px;
        border-radius: 10px;
        font-family: 'Times New Roman', Times, serif;
        opacity: 0.9;
        gap: 20px;

        .profile-image {

            img {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                flex: 1;
                align-items: center;
                justify-content: center;
                box-shadow: rgb(247, 245, 245) 0px 4px 8px;
            }
        }
    }

    .summary {
        text-align: justify;
        flex: 2;
    }

    .projects {
        h3{
            text-align: left;

        }
        background-color: rgba(133, 131, 148, 0.382);
        padding: 10px;
        border-radius: 10px;
        margin-top: 5px;
        text-align: justify;
        font-family: 'Times New Roman', Times, serif;
        opacity: 0.9;

        img {
            margin-bottom: 10PX;
            width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: rgb(45, 45, 45) 0px 4px 8px;
        }

        .icon {
            margin-top: 5px;
            margin-bottom: 5px;
            border-radius: 10px;
            margin-right: 5px;
            width: 30px;
            height: 30px;
            vertical-align: middle;
            cursor: pointer;
        }

        button {
            margin-top: 10px;
            margin-bottom: 20px;
            margin-right: 20px;
            display: inline;
            padding: 0px 15px 0px 10px;
            background-color: rgb(62, 61, 68);
            color: white;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: rgb(247, 245, 245) 0px 4px 8px;
        }
    }
    .project{
        h3{
            text-align: left;

        }
        background-color: rgba(133, 131, 148, 0.382);
        padding: 10px;
        border-radius: 10px;
        margin-top: 5px;
        text-align: justify;
        font-family: 'Times New Roman', Times, serif;
        opacity: 0.9;

        img {
            margin-bottom: 10PX;
            width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: rgb(45, 45, 45) 0px 4px 8px;
        }

        .icon {
            margin-top: 5px;
            margin-bottom: 5px;
            border-radius: 10px;
            margin-right: 5px;
            width: 30px;
            height: 30px;
            vertical-align: middle;
            cursor: pointer;
        }

        button {
            margin-top: 10px;
            margin-bottom: 20px;
            margin-right: 20px;
            display: inline;
            padding: 10px;
            background-color: rgb(62, 61, 68);
            color: white;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            box-shadow: rgb(247, 245, 245) 0px 4px 8px;
        }
        
    }

    .skills {
        background-color: rgba(133, 131, 148, 0.382);
        padding: 10px;
        border-radius: 10px;
        margin-top: 5px;
        font-family: 'Times New Roman', Times, serif;
        opacity: 0.9;
    }

    .experience {
        background-color: rgba(133, 131, 148, 0.382);
        padding: 10px;
        border-radius: 10px;
        margin-top: 5px;
        font-family: 'Times New Roman', Times, serif;
        opacity: 0.9;
    }

    .research {
        background-color: rgba(133, 131, 148, 0.382);
        padding: 10px;
        border-radius: 10px;
        margin-top: 5px;
        font-family: 'Times New Roman', Times, serif;
        opacity: 0.9;
    }

    .get-in-touch {
        margin-top: 5px;
        height: auto;
        background-color: rgba(133, 131, 148, 0.382);
        border-radius: 10px;
        font-family: 'Times New Roman', Times, serif;
        opacity: 0.9;
        .touch{
            padding:5px 0px 0px 20px;
            h3{
                margin-bottom: 0px;
                font-size: 30px;
            }
            p{
                margin-top: 5px;
            }

        }

        form {
            border-radius: 10px;
            margin-left: auto;
            margin-right: auto;
            background-color: rgba(70, 69, 73, 0.382);
            text-align: center;
            padding: 20px;
            text-align: left;
            max-width: 500px;

            input {
                border: none;
                width: 95%;
                margin-left: auto;
                margin-right: auto;
                border-radius: 10px;
                padding: 10px;
                margin-bottom: 20px;
            }

            label {
                margin-top: 20px;
                margin-right: 5px;
                text-align: center;
                margin-bottom: 20px;
            }

            textarea {
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                border-radius: 10px;
                margin-bottom: 20px;
            }

            button {
                background-color: rgb(56, 56, 61);
                box-shadow: rgb(247, 245, 245) 0px 4px 8px;
                color: white;
                border-radius: 10px;
                padding: 10px;
                margin-bottom: 20px;
                border: none;
                cursor: pointer;

            }

        }

    }
}

.contact-content {
    border-radius: 15px 15px 0px 0px;
    padding: 20px 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    background-color: rgb(183, 182, 200);
    margin-top: 5px;
    height: 600px;
    overflow-y: auto;

    a {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    img {
        width: 35px;
        height: 35px;
        vertical-align: middle;
        margin-right: 5px;
        cursor: pointer;
        border-radius: 10px;
        box-shadow: rgb(247, 245, 245) 0px 4px 8px;
    }
}

.blog-content {
    border-radius: 15px 15px 0px 0px;
    padding: 20px 20px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    background-color: rgb(183, 182, 200);
    margin-top: 5px;
    height: auto;
    overflow-y: auto;

    img {
        width: 100%;
        height: auto;
        border-radius: 10px;
        box-shadow: rgb(52, 52, 52) 0px 4px 8px;
    }

    button {
        margin: 10px;
        padding: 10px 20px;
        background-color: rgb(62, 61, 68);
        color: white;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        box-shadow: rgb(247, 245, 245) 0px 4px 8px;

    }
}


footer {
    text-shadow: rgb(222, 218, 218)0px 2px 8px;
    background-color: rgba(62, 61, 68, 0.796);
    color: rgb(6, 6, 6);
    text-align: center;
    font-size: large;
    font-family: 'Times New Roman', Times, serif;
    padding: 15px;
    border-radius: 0px 0px 20px 20px;
    margin-top: 0px;
    text-align: center;

}