:root {
  /* CSS LIGHT THEME */
  --color-primary-light-100: #eceff1;
  --color-primary-light-200: #cfd8dc;
  --color-primary-light-300: #b0bec5;
  --color-background-light: #ffffff;
  --color-text-light: #333333;


  --color-primary-100: #009688;
  --color-primary-200: #3ba294;
  --color-primary-300: #59ada1;
  --color-primary-400: #73b9ae;
  --color-primary-500: #8bc5bb;
  --color-primary-600: #a3d0c8;

  /** CSS DARK THEME SURFACE COLORS */
  --color-surface-100: #121212;
  --color-surface-200: #282828;
  --color-surface-300: #3f3f3f;
  --color-surface-400: #575757;
  --color-surface-500: #717171;
  --color-surface-600: #8b8b8b;
  /** CSS DARK THEME MIXED SURFACE COLORS */
  --color-surface-mixed-100: #1a2a27;
  --color-surface-mixed-200: #303e3b;
  --color-surface-mixed-300: #465451;
  --color-surface-mixed-400: #5e6a67;
  --color-surface-mixed-500: #77817f;
  --color-surface-mixed-600: #919997;

  --color-card-purple-100: #321c67;
  --color-card-purple-200: #6c4193;
  --color-card-purple-300: #763ea8;
  --color-card-purple-400: #8a3faf;
  --color-card-purple-500: #8865b0;
  --color-card-purple-600: #b76fe0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Courier New', Courier, monospace;

}

body.light-theme {
  background-color: var(--color-primary-400);
  color: var(--color-text-light);
}

body.light-theme .quiz-container {
  background-color: var(--color-card-purple-200);
  color: white;
}

body.light-theme .btn {
  background-color: var(--color-primary-200);
  color: white;
}

body.light-theme #details-bar {
  background-color: var(--color-surface-mixed-100);
}

body.light-theme #details-bar a {
  color: var(--color-card-purple-600);
}

body.dark-theme {
  background-color: var(--color-surface-100);
  color: var(--color-primary-500);
}

#details-bar {
  background-color: var(--color-primary-400);
  color: var(--color-card-purple-100);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

#details-bar a {
  color: var(--color-card-purple-100);
  margin: 0 20px;
  font-size: 16px;
  text-decoration: none;
}

#details-bar a:hover {
  text-decoration: underline;
}

#details-bar i {
  margin-right: 8px;
  /* Space between icon and text */
}

.quiz-container {
  margin-left: 30%;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 600px;
  background-color: var(--color-card-purple-100);
  border-radius: 0.5rem;
  box-shadow: 5px 5px 5px var(--color-surface-mixed-200);
  padding: 20px;
  box-sizing: border-box;
  /* Ensure padding is included in width */
}

#question-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
}

#question {
  text-align: center;
  margin-bottom: 0;
  margin-top: 1rem;
}

#answer-buttons {
  display: flex;
  flex-wrap: wrap;
  /* Allow wrapping to next line */
  justify-content: space-around;
  /* Evenly space buttons on each line */
  column-gap: 20px;
  row-gap: 10px;
}


.input-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

input {
  width: fit-content;
}

.btn {
  flex: 1 1 45%;
  /* Buttons take up 45% of line width, allowing for two columns */
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: large;
  padding: 1.5rem;
  background-color: var(--color-primary-200);
  border: none;
  border-radius: 0.7rem;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--color-primary-300);
}

#refresh-div .btn {
  width: 50px;
  /* Fixed width for all buttons */
  height: 50px;
  /* Fixed height for all buttons */
  display: flex;
  /* Use flexbox for aligning icon inside button */
  align-items: center;
  /* Center items vertically */
  justify-content: center;
  /* Center items horizontally */
  margin: 10px;
  /* Margin around the buttons for spacing */
  padding: 10px;
  /* Padding inside the button */
  font-size: 1.5rem;
  /* Icon size within the button */
  background-color: var(--color-primary-200);
  /* Background color from your theme */
  border: none;
  border-radius: 0.7rem;
  cursor: pointer;
}

#refresh-div .btn:hover {
  background-color: var(--color-primary-300);
  /* Lighter color on hover */
}

#refresh-div i {
  margin: 0;
  /* No margin around the icon, centering it perfectly */
}

input,
.btn {
  cursor: pointer;
}

.hide {
  display: none;
}

#result {
  margin: 2rem auto;
}

#question,
#result {
  font-size: 1.5rem;
  font-weight: bold;
}

/* cards */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Creates 4 columns of equal width */
  gap: 20px;
  /* Space between the cards */
  justify-items: center;
  /* Centers items horizontally within their cell */
  padding: 20px;
  width: 100%;
  /* Adjust based on container or viewport width */
  margin: 0 auto;
  /* Centers the grid in the body if necessary */
}

.card {
  perspective: 500px;
  width: 100%;
}

.card-inner {
  position: relative;
  width: 350px;
  height: 480px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  cursor: pointer;

  transform: scale(0.7);
  /* Scale the card down to 70% of its original size */
  align-self: center;
  /* Centering the card after scaling if needed */
}

.card.flip .card-inner {
  transform: rotateY(180deg);
}

.card-face,
.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--color-primary-100);
}

.card-front {
  background: url('../img/card.png') no-repeat center center;
  background-size: cover;
}

.card-back {
  transform: rotateY(180deg);
}


/* CARDS STYLING SOURCE : https://codeburst.io/make-a-magic-the-gathering-card-in-css-5e4e06a5e604 */
/* 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-family: 'Courier New', Courier, monospace;
  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: none;
}

blockquote,
q {
  quotes: none;
}

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

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

/* End of reset */
body*> {
  box-sizing: border-box;
}

.card-container {
  border: 1px solid black;
  width: 500px;
  height: 700px;
  margin: 0 auto;
  margin-top: 56px;
  border-radius: 25px;
  box-sizing: border-box;
  box-shadow: -8px 9px 16px -3px gray;
  background: #171314;
}

.card-background {
  height: 600px;
  margin: 20px 20px 0 20px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 8%;
  border-bottom-right-radius: 8%;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  z-index: 0;
}

/*
    -------------------------
    -------------------------
            BORDERS
    -------------------------
    -------------------------
*/

.frame-header {
  height: 60px;
}

.frame-type-line {
  height: 40px;
}

.frame-header,
.frame-type-line {
  border-bottom: 4px solid #a9a9a9;
  border-left: 2px solid #a9a9a9;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.frame-header,
.frame-art,
.frame-type-line,
.frame-text-box {
  box-shadow: 0 0 0 0px #171314,
    0 0 0 5px var(--color-card-purple-300),
    -3px 3px 2px 5px #171314;
  margin-bottom: 7px;
}

/*
    ----------------------
    ----------------------
            OVERFLOW
    ----------------------
    ----------------------
*/
.frame-header,
.frame-type-line,
.frame-text-box {
  overflow: hidden;
}


/*
  ----------------------------------------
  ----------------------------------------
            CARD FRAME
  ----------------------------------------
  ----------------------------------------
*/
.card-frame {
  z-index: 1;
  position: relative;
  height: 108%;
  left: 1%;
  top: 0.5%;
  left: 1.2%;
  display: flex;
  flex-direction: column;
}



.frame-header,
.frame-type-line {
  background: linear-gradient(0deg, rgba(201, 216, 201, .3), rgba(201, 216, 209, .3)),
    url(https://image.ibb.co/jKByZn/tile_bg_1.jpg);
  display: flex;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  border-radius: 18px/40px;
}

/*
  Tue 27/3
*/
.name,
.type {
  font-size: 1.3em;
  margin-left: 10px;
  align-self: baseline;
  font-weight: 600;
}


.frame-art {
  height: 50%;
  margin: 0 10px;
}

img.frame-art {
  width: 400px;
}


.frame-type-line {
  margin-top: 0;
}

.frame-text-box {
  margin: 0 10px;
  background: #d3ded6;
  background-image: url(https://image.ibb.co/dFcNx7/tile_bg_2.jpg);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 50px 6px;
  font-size: 1.2em;
}

.flavour-text {
  font-style: italic;
  padding: 10px 0;
}

p {
  margin-bottom: 5px;
}

.ftb-inner-margin {
  margin: 5px 1px;
}



.frame-bottom-info {
  color: white;
  display: flex;
  justify-content: space-between;
  margin: 5px 15px 0 15px;
}

fbi-left {
  flex: 1;
}

.fbi-left p:first-of-type {
  margin-bottom: 1px;
}

.fbi-left,
.fbi-right {
  font-size: 10px;
  position: relative;
  top: 6px;
}

.fbi-center {
  border-radius: 60%;
  flex-basis: 41px;
  height: 21px;
  position: relative;
  bottom: 11px;
  z-index: 2;
  background: lightgray;
  background-image: url(https://image.ibb.co/jyq34n/holofoil_texture_2.jpg);
  /* box-shadow: 0 0 0 4px #171314; */
}

.inner-margins {
  margin: 0 10px;
}

*/ .fbi-right {
  flex: 1;
  text-align: right;
}

.frame-bottom-info img {
  overflow: hidden;
  max-width: 10px;
}