.navbar-inr {
    background-color: #d0ff16;
}

.navbar-inr .navbar-text {
    color: black;
    font-weight: bold;
}

.navbar-inr .navbar-nav .nav-link {
    color: black;
    padding: 15px;
}

.navbar-inr .nav-item.active .nav-link,
.navbar-inr .nav-item:hover .nav-link {
    color: #d0ff16;
    background-color: black;
}

.inr-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.inr-toggler.navbar-toggler {
    border-color: rgb(204,255,2);
}

.navbar-image {
    float: left;
    height: 6vh;
    padding: 10px;
}


/* Animation Call me */

@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }
    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}


/* Apply to .call-me */

.call-me {
    font-size: 2vh;
    animation: shake 4s;
    padding: 20px;
}

.call-me a:link {
    background-color: #d0ff16;
    color: black;
}

.call-me a:hover {
    background-color: black;
    color: #FFFF00;
    font-size: 2vh;
}


/* Animation Message Overlay Dissapear */

@keyframes dissapear {
    0% {
        background-color: rgba(50, 249, 50, 1);
        display: hidden;
    }
    10% {
        background-color: rgba(50, 249, 50, 0.9);
    }
    20% {
        background-color: rgba(50, 249, 50, 0.8);
    }
    30% {
        background-color: rgba(50, 249, 50, 0.7);
    }
    40% {
        background-color: rgba(50, 249, 50, 0.6);
    }
    50% {
        background-color: rgba(50, 249, 50, 0.5);
    }
    60% {
        background-color: rgba(50, 249, 50, 0, 4);
    }
    70% {
        background-color: rgba(50, 249, 50, 0.3);
    }
    80% {
        background-color: rgba(50, 249, 50, 0.2);
    }
    90% {
        background-color: rgba(50, 249, 50, 0.1);
    }
    100% {
        background-color: rgba(50, 249, 50, 0);
        display: hidden;
    }
}


/* Apply to Message Overlay */

.overlay {
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px white;
    font-size: 5vh;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 2;
    animation: dissapear 6s;
}

.jumbotron {
    background-color: #d0ff16;
}

.send-btn {
    background-color: #d0ff16;
    border-radius: 5%;
    border: none;
    color: black;
    font-weight: bold;
    padding: 10px 10px;
}

.send-btn:disabled {
    background-color: #C0C0C0;
    border-radius: 5%;
    border: none;
    color: #919999;
    font-weight: bold;
    padding: 10px 10px;
}

.read-more {
    background-color: #d0ff16;
    color: black;
    float: center;
    font-weight: bolder;
}

.read-more:hover {
    text-decoration: none;
    background-color: #d0ff16;
    color: black;
}

.our-skills {
    width: 100%;
}

.welcome-image {
    width: 50vw;
}

.inr-footer {
    background-color: #3C3D36;
    color: #d0ff16;
    padding: 0px 0px 20px 0px;
}

.inr-footer .inr-info a {
    background-color: #3C3D36;
    color: #d0ff16;
    padding: 0px 0px 20px 0px;
}

.inr-footer .inr-social {
    background-color: #d0ff16;
    color: #d0ff16;
    padding: 20px 0px 20px 0px;
}

.inr-footer .inr-social a {
    color: #d0ff16;
    padding: 10px;
    text-decoration: none;
}

.inr-footer .inr-social i:hover {
    animation: shake 2s;
}

.inr-footer .inr-info img {
    height: 10vh;
    padding: 10px;
}

.inr-footer .footer-image {
    background-color: #FFF;
    padding: 10px 0px 10px 0px;
}

.headline {
    font-family: Bebas Neue, Helvetica, Arial, sans-serif;
}

.story {
    font-family: Pacifico, Helvetica, Arial, sans-serif;
}

.copyright {
    position: absolute;
    bottom: 0px;
    left: 10px;
}

iframe {
    display:block;
    width:100%;
}