html{
    scroll-behavior: smooth;
}


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

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

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



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




.foot {
    padding: 0 !important;
}



.head {
    padding: 0 !important;
}


.headi {
    margin: 0 !important;
}

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


.projects::selection{
    color: #000 !important;
    background-color: cyan !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);
    animation-name: top;
    animation-play-state: paused;
    animation-duration: 1s;
}


.top {
    display: inline;
}


#go-to-top:hover{
    animation-name: top;
    animation-play-state: running;
    animation-duration: 1s;
}


.pro-img {
    box-shadow: 3px 3px 0px rgb(255, 0, 106), 4px 4px 0px rgb(0, 0, 0);
    padding: 0 !important;
    border-radius: 0.2em;
}


#pro-item {
    margin: 2vh 2vh 4vh 2em;
    padding: 2vh 1vh 2vh 4vh;
    border: solid 2px black;
    border-radius: 2vh;
    background-color: rgb(0, 255, 128);
}

.cont {
    margin: 1vh 0vw 1vw 0vh;
}

.view {
    margin-top: 3vw;
}


.files {
    margin: 1vh 0 1vw 0 !important;
    text-align: center;
}











@keyframes btns {
    0% {
        border-left: solid 3px cyan;
    }

    5% {
        border-bottom-left-radius: 0.8vw;
    }

    15% {
        border-bottom-left-radius: 0.8vw;
    }

    25% {
        border-top: solid 3px cyan;
    }

    35% {
        border-top-left-radius: 0.8vw;
    }

    50% {
        border-right: solid 3px cyan;
    }

    60% {
        border-top-right-radius: 0.8vw;
    }

    75% {
        border-bottom: solid 3px cyan;
    }

    85% {
        border-bottom-right-radius: 0.8vw;
    }

    100% {
        border-left: solid 3px cyan;
    }
}















.file-btns {
    position: relative;
    color: cyan;
    background-color: rgb(3, 39, 39);
    border: solid 3px rgb(36, 36, 12);
    border-radius: 0.2vw;
    animation-name: btns;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transition: 0.2s;
    bottom: -0.2vh;
}


.file-btns:hover {
    transition: 0.2s;
    bottom: 0.2vh;
}


.pro-name {
    display: inline-block;
    position: relative;
    color: rgb(2, 48, 48);
    font-size: 1.75rem;
    line-height: 1.5;
    right: 2em;
    color: #05caca;
    background-color: rgb(255, 0, 106);
    z-index: 10;
    padding: 0 0.5em 0 0.3em;
    text-shadow: 1px 1px 0px white, 4px 4px 0px rgba( 0, 0, 0, 0.5);
    font-family: 'Fugaz One', cursive !important;
    border: solid 2px rgb(3, 66, 53);
    border-radius: 4px;
    text-transform: uppercase;
}


.name:hover {
    text-decoration: none;
}

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