* { padding: 0; margin: 0; box-sizing: border-box; }

body { background-color: #1ab2ff; height: 100%; }

.hero { background: white; text-align: center; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; }

.hero h1 { font-size: 30px; color: black; text-align: center; font-family: Asap sans-serif; }

.container { max-width: 1200px; margin: 0 auto; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; width: 80%; height: auto; font-family: "Open sans", sans-serif; text-align: center; }

.container p { display: -ms-inline-flexbox; display: inline-flex; font-size: 25px; color: white; text-align: center; font-family: "Open sans", sans-serif; }

.container #output { color: white; }

.btn { display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; font-size: 20px; padding-top: 5px; padding-right: 20px; padding-bottom: 5px; padding-left: 20px; margin: 10px; border: 3px solid black; background: white; }

.btn-dark[type="submit"] { font-size: 20px; padding: 5px 20px; margin: 10px; background: #006699; border: 3px solid black; width: auto; height: auto; color: white; }

#result p { font-size: 40px; color: white; font-family: "Open sans", sans-serif; border: 3px solid white; width: 30%; margin: 10px; -ms-flex-pack: center; justify-content: center; }

#newGame { background-color: #006699; color: white; font-size: 20px; }

img { width: 200px; height: 200px; }

.overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); }

.overlay.show { display: block; }

.modal { display: none; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); background: #fff; max-width: 90vw; width: 600px; max-height: 90%; }

.modal.show { display: block; }

.modal .close { position: absolute; right: 0; top: 0; padding: 5px 10px; color: black; text-decoration: none; }

.modal header { font-size: 20px; line-height: 30px; min-height: 30px; font-weight: bold; padding: 10px 30px; text-align: center; }

.modal .content { min-height: 20px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; width: 100%; font-weight: 200; color: aliceblue; background: #1ab2ff; text-align: center; }

.modal table { border: 1px solid white; border-collapse: collapse; width: 100%; }

.modal th, .modal td { text-align: center; padding: 5px; }

.form-group input { margin: 10px; text-align: center; width: 200px; height: 25px; }

.form-group input h4 { display: block; text-align: center; color: white; font-weight: 100; font-family: "Open sans", sans-serif; }

@media (max-width: 760px) { .container p { font-size: 20px; }
  .hero h1 { font-size: 18pxpx; color: black; text-align: center; font-family: Asap sans-serif; }
  img { height: 70px; width: 70px; }
  #result p { font-size: 20px; }
  .modal { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 300px; height: auto; }
  .modal table { border: 1px solid white; border-collapse: collapse; width: auto; font-size: 14px; height: auto; } }