/*style.css */
body {
    background-color: rgb(242, 239, 234);
    width: 100%;
    height: 100%;
}

.navbar-nav a:hover {
    background-color:rgba(123, 169, 196, 0.353);
    border-radius: 15%;
    color: rgb(156, 138, 0) !important;
    font-size: bold !important;
}

.hero {
    padding: 20px 10px; 
}

.hero img {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important;
}

/* card styles */
.card {
    background-color: rgba(81, 94, 113, 0.336);
    height: 100%;
    width: 100%;
    padding: 0 10px;
    margin: 3px;
    }
.card-body h1 {
    color: #fff;    
    text-shadow: 1px 1px black;
    text-align: start;         
    }
    
.card-body img {
        border-radius: 15px;    
    }
.card-body p {
    color: rgba(33,37,41,0.75);
}

.card-body a:hover {
    background-color: white !important;
    color: black;
    box-shadow: 0px 5px 10px 0px gray;
}


  
    /* skills */
.skills {
        margin: 60px 0;
    }
.skills ul {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

ul {
        list-style: none;
    }

    /* About */
.about {          
            background: linear-gradient(
            to right,
            #212529 0%,
            #212529 50%,
            rgb(212, 212, 212) 50%, 
            rgb(212, 212, 212) 100%
        );
        margin-bottom: 0px;


    }
.about h2, p {           
        color: white;
        padding: 40px 20px;  
                    
    }

.contact {
        padding: 40px 20px;          
    }
.contact li:hover {
    font-weight: bold;
    background-color: rgba(83, 126, 151, 0.438);
    }

     /* Footer */

footer {
        color: white;
        justify-content: center;
        text-align: right;
    }

footer p {
        padding: 10px 15px;
    }

    @media screen and (max-width: 768px) {
        .about {
            background: linear-gradient(
            to right,
            #212529 0%,
            #212529 50%,
            #212529 50%, 
            #212529 100%
        );
        margin-bottom: 0px;
        }
        .contact {
            background-color: #212529;
            color: #fff;
        }
    }