html {
    scroll-behavior: smooth;
}


.navbar-brand:hover {
    color: rgb(0, 140, 255) !important;
}

body {
    background-color: white !important;
    font-family: 'Balsamiq Sans', cursive !important; 
}


body::selection{
    color: #000 !important;
    background-color: cyan !important;
}


.navbar-brand {
    color: rgb(0, 140, 255) !important;
}


.my-img {
    width: 100px !important;
    height: 100px;
    border-radius: 50%;
}

.foot {
    padding: 0 !important;
}



.head {
    padding: 0 !important;
}


.headi {
    margin: 0 !important;
}

.read-more {
    cursor: pointer;
}


#para {
    color: #053a36 !important;
}


#para::selection{
    color: #000 !important;
    background-color: cyan !important;
}


.para {
    color: #053a36 !important;
}


.para::selection{
    color: #000 !important;
    background-color: cyan !important;
}


#more-story {
    color: #053a36 !important;
}



@keyframes top {
    0% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(-45deg);
    }


    100%{
        transform: rotate(0deg);
    }
}




#go-to-top {
    position: fixed;
    bottom: 2vh;
    right: 2vw;
    z-index: 99;
    font-size: 2em;
    width: 1.5em;
    height: 1.5em;
    border: solid 2px black;
    text-align: center;
    border-radius: 20%;
    color: rgb(0, 255, 255);
    background-color: rgb(0, 0, 0);
}


.top {
    display: inline;
}


#go-to-top:hover{
    animation-name: top;
    animation-duration: 1s;

}


.pro-name {
    display: inline-block;
    position: relative;
    color: rgb(2, 48, 48);
    color: #05caca;
    background-color: rgb(255, 0, 106);
    padding: 0 0.5em 0 0.3em;
    text-shadow: 1px 1px 0px white, 4px 4px 0px rgba( 0, 0, 0, 0.5);
    border: solid 2px rgb(3, 66, 53);
    border-radius: 4px;
    text-transform: uppercase;
    word-spacing: 0.1em;
}


.pro-name:hover::after {
    display: inline;
    color: rgb(0, 255, 213);
    content: " ↯";
    text-shadow: none;
}