@import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap');

* {
  box-sizing: border-box;
  font-family: 'Chelsea Market', cursive;
}

html, body, #app, #loading, main, .screen {
  height: 100%;
  background-color: #FFF5DC;
}

body {
  max-width: 90%;
  width: 800px;
  font-family: Helvetica, Arial, sans-serif;
  margin: auto;
  font-size: 2em;
}

nav {
  max-width: 90%;
  width: 800px;
  display: flex;
  justify-content: space-evenly;
  margin: 0em auto;
}

nav > * {
  cursor: pointer;
}

#stats {
}

.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.screen > * {
  margin: 1em;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.page {
}

.page > * {
  margin: 1em;
}

.page header {
}

.card {
  padding: 1em;
  margin: 1em 0px;
}

.card h3 {
  margin: 0.5em;
}

.card .application {
  float: right;
}

.card:nth-child(odd) {
  /* background-color: #eee; */
}

.card.denied {
  /* background-color: pink; */
}

.card {
   padding: 20px 45px;
   font-size: 30px;
   border: none;
   background: none;
   outline: none;
   position: relative;
   z-index: 0;
   margin: 15px;
}

.card:before,
.card:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   clip-path: polygon(0 6%, 100% 0, 95% 97%, 3% 96%);
   transition: 0.1s all;
   background: #FFFF99;
}

.card:nth-child(odd):before,
.card:nth-child(odd):after {
   clip-path: polygon(2% 0, 99% 3%, 97% 93%, 0 95%);
}

.card:before {
  background: rgba(250, 250, 250, 0.2);
  transform: translate(0px, 8px);
}

.card:hover:after {
  background: #FFFF77;
}

.card.denied:after {
  background: #FF9999;
}

.card.got:after {
  background: #99ff99;
}

.card p {
  margin: 0.25em;
}

.fill {
  width: 100%;
}

button {
   padding: 20px 45px;
   font-size: 1.5em;
   border: none;
   background: none;
   outline: none;
   position: relative;
   z-index: 0;
   margin: 15px;
}

button:before,
button:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   clip-path: polygon(0 11%, 100% 0, 90% 88%, 3% 96%);
   transition: 0.1s all;
   background: #5FB34A;
}
button:before {
  background: rgba(50, 50, 50, 0.2);
  transform: translate(0px, 8px);
}

button.alt-1:before,
button.alt-1:after {
   clip-path: polygon(2% 5%, 99% 3%, 97% 93%, 5% 100%);
}

button.alt-2:before,
button.alt-2:after {
   clip-path: polygon(1% 0, 88% 1%, 99% 100%, 0 99%);
}

button:hover:before,
button:hover:after {
   clip-path: polygon(5% 2%, 100% 5%, 100% 100%, 0% 94%);
}

/*** specific styles ***/

section#title {
  /*background-image: url("title.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;*/
}

section#title img {
  max-width: 100vw;
  max-height: calc(100vh - 8em);
}

nav#stats {
  justify-content: space-between;
}

:root {
  --offset-x: 0;
  --offset-y: 0;
}

#wealth {
  min-height: 250px;
  display: flex;
  justify-content: end;
}

#wealth .coin {
  float: left;
  position: absolute;
  transform: scaleY(0.3) translateX(calc(var(--offset-x) * 1px)) translateY(calc(var(--offset-y) * -1px));
}

#job-market {
  flex-direction: row;
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: center;
}

#job-market .card {
  width: 100%;
}

#end {
  display: flex;
  justify-content: center;
}

#end > div > * {
  margin: 1em;
  text-align: center;
}

#end img {
  width: 200px;
}

#banks .bank img {
  float: left;
  margin-right: 1em;
}

#banks .card {
  text-align: left;
  align-items: baseline;
}

#banks .card h3 {
  width: 100%;
}

/*** loader ***/

#loading {
  display: flex;
  justify-content: center;
  align-items: center;
}

#loading div {
  animation: spin 0.33s linear infinite;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  border: 3px solid transparent;
  border-left: 3px solid silver;
  border-right: 3px solid silver;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}