@media (prefers-color-scheme:light) {
  :root {
    --buttonbackgroundcolor: #e1dbd7;
    --buttonbackgroundcolordisabled: #3cb2c7;
    --buttonhighlightcolor: #f5f1ee;
    --placeholdertextcolor: #b8b1ae;
  }
}
@media (prefers-color-scheme:dark) {
  :root {
    --buttonbackgroundcolor: #323433;
    --buttonbackgroundcolordisabled: #278393;
    --buttonhighlightcolor: #b3b1b0;
    --placeholdertextcolor: #706e6d;
  }
}
.cardnumbers {
  margin: 0 0.25em;
}

#numbers {
  flex-direction: column;
}
#realcard {
  width: fit-content;
}
#preview {
  display: flex;
  justify-content: center;
}
#cardnumber, #cardexpire, #seccode {
  font-family: monospace;
}

input {
  background-color: var(--buttonbackgroundcolor);
	border: 1px solid var(--buttonbackgroundcolor);
	border-radius: 5em;
  box-shadow: 0 0.25em 0.5em var(--shadowcolor), inset 2px 2px 3px -1px var(--buttonhighlightcolor), inset -2px -1px 3px -1px var(--buttonhighlightcolor);
  color: var(--textcolor);
  font-size: var(--textsize);
  padding: 0.2em 1em;
  height: 1.75em;
  width: 11.5em;
  margin: 0.5em;
  outline: none;
  transition: 0.2s;
}
input:focus {
  background-color: var(--buttonbackgroundcolordisabled);
  border-color: var(--buttonbackgroundcolordisabled);
  box-shadow: 0 0.1em 0.5em var(--shadowcolor), inset -2px 2px 3px -1px var(--buttonhighlightcolor), inset 2px -1px 3px -1px var(--buttonhighlightcolor);
  transition: 0.2s;
  color: var(--textcolor);
}
input::placeholder {
  color: var(--placeholdertextcolor);
}
input:focus::placeholder {
  color: var(--textcolor);
}
.gamebuttons {
  flex-direction: column;
  margin: 3em 0;
}
.gamebuttons div {
  margin: 0.5em 0;
}

.copybuttons {
  display: flex;
}
.stylebuttons {
  display: flex;
  align-items: center;
}
.stylebuttons button {
  width: fit-content;
}
button:not(button.backbutton) {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding: 0.5em 1em;
  background-image: none;
  background-color: var(--buttonbackgroundcolor);
  box-shadow: 0 0.25em 0.5em var(--shadowcolor), inset 2px 2px 3px -1px var(--buttonhighlightcolor), inset -2px -1px 3px -1px var(--buttonhighlightcolor);
  border: solid 1px var(--buttonbackgroundcolor);
  border-radius: 1.5em;
  transition: 0.3s;
}
button:not(button.backbutton):hover {
  background-image: none;
  background-color: var(--buttonbackgroundcolor);
  box-shadow: 0 0.1em 0.5em var(--shadowcolor), inset -2px 2px 3px -1px var(--buttonhighlightcolor), inset 2px -1px 3px -1px var(--buttonhighlightcolor);
  transition: 0.3s;
}
button:not(button.backbutton):disabled, button:not(button.backbutton):disabled:hover {
  background-image: none;
  background-color: var(--buttonbackgroundcolordisabled);
  border-color: var(--buttonbackgroundcolordisabled);
  box-shadow: 0 0.1em 0.5em var(--shadowcolor), inset -2px 2px 3px -1px var(--buttonhighlightcolor), inset 2px -1px 3px -1px var(--buttonhighlightcolor);
  transition: 0.3s;
}

.copybuttons button {
  height: 5em;
  width: 7em;
}

#cardnumber {
  filter: url(#customFilter);
  font-size: 25pt;
  position: absolute;
  top: 50%;
  left: 50%;
  color: black;
}

#cardexpire {
  filter: url(#customFilter);
  font-size: 25pt;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: left;
  width: 50px;
  color: black;
}


#seccode {
  filter: url(#customFilter);
  font-size: 25pt;
  position: absolute;
  top: 50%;
  text-align: left;
  left: 50%;
  color: black;
}


#cardname {
  filter: url(#goldFilter);
  color: #DED6C6;
  font-size: 25pt;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: left;
  text-transform: uppercase;
  font-family: Roboto, 'Helvetica Neue', sans-serif;
}

@media (orientation: landscape) {
  :root {
    --creditcardwidth: 700px;
    --creditcardheight: 440px;
  }
  #cardnumber,
  #cardexpire,
  #cardname,
  #seccode {
    font-size: 25pt;
  }

}

@media (orientation: portrait) {
  :root {
    --creditcardwidth: 350px;
    --creditcardheight: 220px;
  }
  #cardName,
  #seccode,
  #cardnumber,
  #cardexpire,
  #cardname {
    font-size: 12.5pt;
  }
}

.creditCardFront {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--creditcardwidth);
  height: var(--creditcardheight);
}

#cardImageFront {
  width: 100%;
  box-sizing: border-box;
  display: block;
}