body {
    font-size: 1rem;
    font-family: Verdana;
    font-weight: normal;
    line-height: 1.61;
    color: #292b2c;
    background-color: #eee;
}
h1 {
	text-align: center;
}
main {
	min-height: 40em;
}
hr {
	border: 1px solid #d54b68;
}
p {
	display:block;
	width:100%;
}
a {
	color: #d44f68;
	text-decoration: none;
}
a:hover {
	color: #b43f58;
	text-decoration: underline;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: .5rem;
    font-weight: 300;
    line-height: 1.2;
    color: inherit;
}
li a {
	line-height:200%
}

.b-hero h2{
    color:white;
    font-family: Arial Black;
    text-shadow: #000 2px 2px 2px;
    -webkit-font-smoothing: antialiased;
    font-size: 2.5em;
    font-weight: bold;
}
.b-hero h3{
    color:white;
    font-style:italic;
    font-weight: bold;
    text-shadow: #000 0px 1px 1px;
}

@media (min-width: 576px)
main .b-hero {
    padding: 6rem 2rem;
}

main .b-hero {
    color: #fff;
   /* position: relative;*/
    margin-bottom: 0;
    background-image:url('/static/db_compress.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow-x: hidden;
    /*top:0;*/
    padding-top: 4rem;
    padding-bottom: 3rem;
}
li.dropdown:hover > .dropdown-menu {
    display: block;
}
.dropdown-toggle {
  margin-bottom:0px;
  padding-bottom:0px;
}
.dropdown-menu{
  margin-top:0px;
  padding-top:0px;
  border-radius: 20px;
}
.dropdown-item {
  padding: .75rem 1.5rem;
}
.dropdown-item:hover, .dropdown-item:focus{
	border-radius: 20px;
	background-color: #eee;
}

.btn-primary {
    color: #fff;
    background-color: #d44f68;
    border-color: #d44f68;
}
.btn-primary:hover,.btn-primary:focus {
	background-color: #a43f48;
	border: 1px solid transparent;
}

.btn {
    display: inline-block;
    font-weight: normal;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: .5rem 1.5rem;
    margin: 0.5;
    font-size: 1rem;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
}
.navbar {
    height: 4.5rem;
    font-size: larger;
    background-color: #fff;
    z-index: 1000;
    box-shadow: 0 15px 40px -25px rgba(0,0,0,0.8);
}
.navbar .divider-vertical {
	height: 50px;
	margin: 0 9px;
	border-right: 1px solid #ffffff;
	border-left: 1px solid #f2f2f2;
}
#hint_box {
	min-height: 3em;
}
#sql_to_run {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: .5em;
}
#summary_box{
	display: none;
	position: relative;
	z-index: 1; /* Sit on top */
	background-color: #ffffff;
	margin: auto;
	padding-top: 1em;
	padding-left: 1em;
	padding-right: 1em;
	border: 1px solid #d54b68;
	width: 80%;
	font-weight: bold;
}
.click_me {
    position: absolute;
    top: -40px;
    padding-left: 35px;
    background: url(/static/arrow.png);
    background-repeat:no-repeat;
    width:150px;
    height:40px;
    left:-110px;
    background-size: 30px 30px;
}
.close {
	color: #aaaaaa;
	float: right;
	text-align: right;
	font-size: 28px;
	font-weight: bold;
}
.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
.first_time {
	display: none;
	position: fixed;
	z-index: 2000;
	padding-top: 300px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
}

.modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 20px;
	border: 2px solid #d54b68;
	width: 80%;
}

.btn-primary {
	margin-left: 0.5em;
}
.answer-correct {
	border: 3px solid #2cda00;
}
.answer-half-correct {
	border: 3px solid #ffff00;
}
.answer-wrong {
	border: 3px solid #dc3545;
}
.center {
    text-align: center;
}
.hidden {
	display: none;
}
.show {
	display:block ;
}
.b-header_logo {
	font-size:xx-large;
}
.table-sm {
	font-size:small;
}
.breadcrumbs {
    border-radius: 1em;
    text-align: center;
    background-color: lightgray;
    overflow: hidden;
    height: 1.7em
}

.b-footer{
	border-color:#d54b68;
	border-top-style: solid;
	font-style: italic;
	padding: 2rem;
}
.b-footer-right{
	float: right;
}

/* Lets try some animations shall we*/
@keyframes look_at_me {
	0% {
		transform: scale(1,1);
	}
	50% {
		transform: scale(1.5,1.5);
	}
	100% {
		transform: scale(1,1);
	}
}
.look_at_me {
	animation: 1s ease-out 0s 1 look_at_me;
}
.pad {
    padding-bottom: 1em;
}