/* CSS Reset http://meyerweb.com/eric/tools/css/reset v2.0 | 20110126 License: none (public domain) */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: circle;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* General */

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  font-family: "Montserrat", serif;
  color: #FFF !important;
}

main {
  flex: 1 0 auto;
  background-color: #1A4E04;
}

#website-title {
  font-size: 1.5rem;
  font-weight: 900;
}

#header {
  height: 75px;
}

#header,
#footer {
  background-color: #9A0000;
  font-family: "Lora", serif;
  font-size: 0.75rem;
}

#footer {
  color: #FAC600;
}

/* For correct vertical alignment of child elements */
#header .row {
  height: 100%;
}

a {
  text-decoration: underline;
}

p a {
  text-decoration: underline;
  color: #FAC600;
}

a.fa-brands {
  text-decoration: underline;
  color: #FAC600;
}

.copyright-text {
  text-decoration: underline;
  color: #FAC600;

}

p {
  font-size: 1.2rem;
  text-align: center;
}

h1,
div>h1,
div>h2 {
  text-align: center;
  color: #FFF;
  font-weight: 700;
}

/* Remove spinners from number input in Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#play-game:hover,
.home-link:hover,
.game-link:hover,
.faq-link:hover,
#wager-submit:hover,
#higher-button:hover,
#lower-button:hover {
  background-color: rgba(250, 198, 0, 0.7) !important;
}

/* Bootstrap customisations */

/* Bootstrap pills */

.nav-pills {
  --bs-nav-pills-link-active-bg: rgba(26, 78, 4, 1) !important;
  --bs-nav-pills-border-radius: 30px !important;
}

.nav-link {
  border: 5px solid rgba(253, 128, 0, 0.65) !important;
  text-align: center;
  width: 70px;
}

.nav {
  --bs-nav-link-color: white !important;
  --bs-nav-link-hover-color: #FFF !important;
  --bs-nav-link-padding-x: 0 !important;
  --bs-nav-link-padding-y: 10px !important;
}

/* Bootstrap modal */

.modal-title {
  font-size: 2em;
  text-align: center;
  font-weight: 700;
  width: 100%;
}

.modal-header,
.modal-footer {
  border: none !important;
}

.modal-content {
  text-align: center;
  backdrop-filter: blur(3px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(3px) saturate(100%) !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
  border-radius: 12px !important;
  border: 10px solid rgba(237, 30, 0, 0.65) !important;
}

#modal-text {
  font-size: 1.5em;
}

#modal-btn-1,
#modal-btn-2 {
  background-color: rgba(0, 30, 0, 0.5);
  border: 5px solid rgba(237, 30, 0, 0.65);
  color: #FFF;
  border-radius: 30px;
  font-weight: 600;
  height: 3em;
  width: 100px;
}

#modal-btn-1:hover,
#modal-btn-2:hover {
  background-color: rgba(250, 198, 0, 0.7) !important;
}

.sub-text {
  font-size: 0.75rem;
}

/* Bootstrap accordion */

#faq-info {
  margin-top: 130px;
}

.accordion {
  font-family: 'Hind Madurai', serif;
  font-size: 1.25em;
  margin-top: 75px;
  --bs-accordion-border-color: #FAC600 !important;
}

.accordion-item {
  border: 1px solid #FAC600 !important;
}

.accordion-button {
  font-family: 'Hind Madurai', serif;
  font-size: 0.75em !important;
  background-color: #FAC600 !important;
  color: #000 !important;
}

/* index.html */

#index-content {
  font-size: 1.25rem;
  height: 100%;
  width: 85%;
}

#index-content h1 {
  font-size: 3.0rem;
}

.index-text {
  border: 15px solid rgba(253, 128, 0, 0.65);
  border-radius: 30px;
}

.index-text p {
  color: #FFF;
  font-size: 1.5rem;
  border-radius: 30px;
}

#site-intro-section {
  margin-top: 110px;
}

#play-game {
  background-color: #1A4E04;
  border: 15px solid rgba(237, 30, 0, 0.65);
  color: #FFF;
  border-radius: 80px;
  font-weight: 600;
  font-size: 2.5em;
  height: 2.5em;
  width: 200px;
  margin: 0 auto;
}

/* game.html */

input {
  height: 2em;
  width: 150px;
  text-align: center;
}

#aces-info-group,
#round-info-group,
#card-info-group,
#points-info-group,
#wager-info-group {
  height: 5rem;
  width: 20rem;
  border-top: 7px rgba(255, 255, 255, 0.5) solid;
  border-bottom: 3px rgba(255, 255, 255, 0.4) solid;
  justify-content: center;
}

#round-info,
#card-info,
#points-info,
#wager {
  font-family: 'Hind Madurai', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #FAC600;
}

#game-messages {
  font-family: 'Hind Madurai', serif;
  font-size: 1.25rem;
  width: 75%;
  text-align: center;
  border: 10px rgba(253, 128, 0, 0.5) solid;
  border-radius: 30px;
  justify-content: center;
  height: 100%;
}

#info-title,
#round-title,
#card-title,
#points-title,
#wager-title {
  font-family: 'Lora', serif;
  font-size: 1.25rem;
  font-weight: 700;
}

#aces-info-title {
  font-family: 'Lora', serif;
  font-size: 1.90rem;
  font-weight: 700;
  color: #FAC600;
}

#wager-submit,
#higher-button,
#lower-button {
  background-color: #1A4E04;
  color: #FFF;
  border: 5px solid rgba(253, 128, 0, 0.65);
  border-radius: 30px;
  font-weight: 600;
  height: 2em;
  width: 100px;
}

#wager-amount {
  background-color: rgba(26, 78, 4, 1);
  color: #FAC600;
  border: 5px solid rgba(253, 128, 0, 0.65);
  border-radius: 30px;
  font-weight: 600;
}

#wager-amount-label,
.choice-text,
#wager-msg {
  font-size: 1.55rem;
}

#player-card,
#card-1,
#card-2,
#card-3,
#card-4 {
  height: 267px;
  width: 192px;
  border: 0;
  padding: 0;
  margin: 0;
  background-color: #1A4E04;
}

.card-container {
  margin-top: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#card-deck {
  border: 10px rgba(250, 198, 0, 0.65) solid;
  border-radius: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 404.html */

#error-message {
  margin-top: 135px;
}

.error-image img {
  width: 75%;
}

/* Media queries */

/* Bootstrap Extra Small < 576px */
@media (max-width: 575px) {

  #player-card,
  #card-1,
  #card-2,
  #card-3,
  #card-4 {
    height: 89px;
    width: 64px;
  }
}

/* Bootstrap Small < 768px */
@media (min-width: 576px) and (max-width: 767px) {

  #player-card,
  #card-1,
  #card-2,
  #card-3,
  #card-4 {
    height: 178px;
    width: 128px;
  }
}