body { background-color: grey; }

.card {
	margin: 20px; 
	overflow: auto;
	border: 1px solid black;
	border-radius: 15px;
	background-color: white;
	max-width: 700px;
	margin: 10px auto 10px auto;
}

.sect {
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}

.full { width: 100%; }	
.part { float: left; }

#frontImg, #backImg { width: 100%; display:block;}

footer		{ text-align: center; }
footer *	{ display: inline;	margin: 10px; }
footer img	{ max-width: 80px;	margin: auto; }
footer p	{ display: block; }

#main {
    margin: auto;
    text-align: center;
    font-family: arial,helvetica,sans-serif;
    background-color: white !important;
}

#hero {
    height: 100vh;
    background-image: url("hero.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    text-align: center;
}
#hero div {
    position: absolute;
    bottom: 40px;
    max-width: 500px;
    right: 0;
    left: 0;
    margin: auto;
    border-radius: 20px;
    text-align: center;
    background-color: rgba(230,230,230,0.8);
    font-size: 25px;
}
ol {
    margin-top: 0;
    display: inline-block;
    text-align: left;
}
.card-preview { 
    width: 300px; 
    display :block;
    margin: 15px auto;
}
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 22px;
  border: none;
  width: 300px;
}
.dropup {
    margin: 20px auto;
    position: relative;
    display: inline-block;
}
.dropup-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  width: 100%;
  bottom: 50px;
  z-index: 1;
}
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropup-content a:hover { background-color: #ccc }
.dropup:hover .dropup-content { display: block; }
.dropup:hover .dropbtn { background-color: #2980B9; }