/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 0px;
    height:100%;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */


/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

.BulkImageEditor {
    background-color: #e9e9e9;
    width: 60%;
    margin-left: 15%;
    padding: 15px 15px 15px 15px;
    border-radius: 4px;
    border: #dddcdc solid 4px;
    font-family: 'Raleway', sans-serif;
}

.container {
margin-bottom:10px;
}
/*BALL GAME STYLE*/
.game-over .clickable {
    fill: black;
    opacity: 0.1;
}

.gameContainer {
    border: 4px dashed green;
    width: 60%;
    height: 100%;
}

.timer {
    color: white;
    font-size: 25px;
    position: fixed;
    bottom: 10%;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.status {
    color: white;
    position: absolute;
    font-size: 20px;
    font-family: Courier New, Courier, monospace;
}

.clicked {
    opacity: 0.1;
    pointer-events: none;
}

.game-over .clicked {
    opacity: 1;
    box-shadow: 3px 3px 4px gold;
    filter: drop-shadow(0 0 3px gold);
}



.showImageOver {
    border: 5px solid #808080;
    width: 60%;
    position: absolute;
    animation: showImage 1s ease-in;
    border-radius: 5px;
}

.imageIcon {
    border:1px solid black;
    width: 50px;
    border-radius: 25%;
}

@keyframes showImage {
    0% {
        opacity: 0.2;
        width: 50px;
    }

    100% {
        width:60%;
        opacity: 1;
    }
}

.article {
    padding: 7px 7px 7px 7px;
    width: 50%;
    margin-left: 25%;
    border: 1px dashed #808080;
    border-radius: 5px;
    margin-top: 10px;
    font-family: 'Raleway', sans-serif;
}

.codeSnip {
    padding: 15px 15px 15px 15px;
    border: 1px solid #000000;
    background-color: #f9ffdf;
    border-radius: 7px;
    font-family: Roboto;
    font-size:15px;
}
.codeSnip h4{
    font-size:15px;
    display:inline;
    font-family:Calibri;
    font-weight:300;
    
}




/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
   
}