.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
}

#readme img[src*="img.shields.io"] {
  height: 20px;       /* typical badge height */
  width: auto;        /* scale proportionally */
  /* vertical-align: middle; */
    display: inline;      /* prevents them from forcing a new line */

}


@keyframes octocat-wave {

    0%,
    100% {
        transform: rotate(0)
    }

    20%,
    60% {
        transform: rotate(-25deg)
    }

    40%,
    80% {
        transform: rotate(10deg)
    }
}

@media (max-width:500px) {
    .github-corner:hover .octo-arm {
        animation: none
    }

    .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out
    }
}

body {
    background-color: white;
}

button {
    box-shadow: 3px 3px 3px gray;
}

h1 {
    margin: 0;
}

.wrapper {
    padding-left: 20%;
    padding-right: 20%;
}

.jumbotron {
    color: #FF6347;
    margin: 0 auto;
    /* padding-left: 5%; */
    /* padding-right: 5%; */
    /* width: 60%; */
    background-color: #c0deed;
    /* box-shadow: 3px 3px 3px gray; */
}

.bg-primary {
    background: #1dcaff
}

.bubble {
    position: relative;
    width: 35em;
    height: 13em;
    padding: 8px;
    background: #FFFFFF;
    margin: auto;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 3px 3px 3px gray;
}

.bubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #FFFFFF;
    display: block;
    width: 0;
    z-index: 1;
    left: -15px;
    top: 63px;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

div {
    color: black;
}

@media only screen and (max-width: 768px) {

    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}