* { margin:0; padding: 0;}

body {
   background: url('../images/bg.png') fixed center no-repeat;
   background-size: cover;
   color: #fff;
   margin-bottom: 40px;
   
}
.card-action {
   text-align: center;
   margin-bottom: 30px;
}
button {
   color: #ccc;
   background: rgba(30,30,30,0.5);
   border: none;
   outline: none;
   text-decoration: none;
   padding: 10px;
   border-radius: 10px;
   width: 65%;
   font-size: 1.3em;
   font-weight: 900;
   text-transform: uppercase;
   font-family: 'Baloo Tamma', cursive;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
button:hover, button:focus {
   background: rgba(50,50,50,0.5);
}
.card {
   background: rgba(50,50,50,0.3);
   font-family: 'Baloo Tamma', cursive;
}
.page-title {
   text-align: center;
}
#note {
   font-size: 1.4em;
   font-size: 900;
   font-family: 'Baloo Tamma', cursive;
   margin-top: 5px;
}
.header {
   padding: 100px;
   background: rgba(200,200,200,0.2);
   text-align: center;
}
hr {
   border: 2px solid rgba(230,230,230,0.1);
}
.modal {
   color: #ccc;
   background: rgba(20,20,20,0.8);
   text-align: center;
}
.modal li {
   margin-bottom: 5px;
}
.modal > .modal-footer {
   background: rgba(40,40,40,0.8);
}
.modal > .modal-footer a {
   color: #ccc;
}
.custom-btn {
   background: rgba(0,0,0,0.6);
   text-align: center;
}
.custom-btn:hover, .custom-btn:focus {
   background: rgba(50,50,50,0.6);
}