@font-face {
  font-family: 'Overpass Mono';
  src: url(OverpassMono-Regular.ttf);
}@font-face {
  font-family: 'Oswald';
  src: url(Oswald-Regular.ttf);
}
html {
	--black: #000000;
	--white: #ffffff;
	--darkest: #111111;
	--darker: #16171A;
	--dark: #A3AFBF;
	--medium: #DFE7EF;
	--light: #CAD4E1;
	--lighter: #F5F8FC;
	--lightest: var(--white);
	
	--primary: #00fdff;
	--primary-light: rgb(120, 199, 196);
	--primary-trans: rgba(120, 199, 196, 0.377);
	
	--yellow: #fec763;
	--pink: #00fdff;
	--teal: #fffc00;
  --blue: #3b55ce;
	
	--bg: var(--darkest);
	--color: var(--lightest);
	--surface: var(--darker);
  --spacing-unit: 0.8rem;
}

html {
	font-size: 62.5%;
	box-sizing: border-box;
  width: 100%;
  height: 100%;
}

*, *:before,*:after {
	box-sizing: inherit;
}

body {
	background: var(--bg);
	color: var(--color);
	font-size: 1.6rem;
	font-family: 'Overpass Mono', system-ui;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
}

body.dark-mode {
  background: var(--white);
	color: var(--darker);
}

h1,h2,h3,h4,h5,h6 {
	font-weight: 400;
	letter-spacing: 0.05em;
	margin-top: calc(var(--spacing-unit));
	margin-bottom: calc(var(--spacing-unit));
	font-family: 'Oswald', system-ui;
}

a {
	color: var(--primary);
	text-decoration: none;
	transition: all 120ms ease-out 0s;
	display: inline-block;
	border-radius: calc(var(--spacing-unit)/2);
}

a:hover {
  background: var(--primary-trans);
  color: var(--primary-light);
  box-shadow: 0px 0px 0px calc(var(--spacing-unit)/2) var(--primary-trans);
}

button, textarea, input, select {
	font-family: inherit;
	color: inherit;
}

button:active, textarea:active, input:active, select:active, button:focus, textarea:focus, input:focus, select:focus {
  outline: 0;
}

button,select {
	cursor: pointer;
}

.wrapper {
	width: 100%;
  height: 100%;
	max-width: 960px;
	margin: auto;
	padding: 0 calc(var(--spacing-unit)*2) calc(var(--spacing-unit)*4);
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
}

.item {
  width: 70%;
  height: 100%;
	padding: 0 calc(var(--spacing-unit)*2);
}

.item-hide {
  width: 30%;
  padding-right: 0;
}

.header {
	padding: calc(var(--spacing-unit)*2) 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2.4rem;
	position: relative;
}
.header:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: calc(var(--spacing-unit)/4);
  background: linear-gradient(to right, var(--teal), var(--pink), var(--primary));
}

@media screen and (max-width: 1200px) {
  .item {
    width: 100%;
    height: 100%;
    padding: 0 calc(var(--spacing-unit)*1);
  }
  .item-hide {
    display: none;
  }
  .wrapper {
    padding-top: 0;
  }
  .header {
    padding: 0;
  }
  .logo {
    max-height: calc(var(--spacing-unit)*5);
  }
}

.card {
  position: relative;
	border-radius: calc(var(--spacing-unit));
	background: var(--surface);
	width: 100%;
	height: 90%;
	margin-bottom: calc(var(--spacing-unit)*2);
	box-shadow: 0px 0px 0px 1px var(--primary-trans);
}
.item-hide .card {
	height: auto;
}
.card-body, .card-header, .card-footer {
  padding: calc(var(--spacing-unit)*3);
}
.card-body {
  overflow: hidden;
}
@media screen and(max-width: 992px) {
  .card-body, .card-header, .card-footer {
    padding: calc(var(--spacing-unit)*1.5);
  }
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0;
}
.card-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
@media screen and(max-width: 992px) {
  .card-header {
    flex-direction: column;
    padding-top: 0.8rem;
  }
  .card-footer {
    flex-direction: column;
  }
}

@media screen and(max-width: 700px) {
    .rank {
      transform: translateY(4px);
    }
}

.logo {
	display: inline-block;
	width: auto;
	max-height: calc(var(--spacing-unit)*5);
	user-select: none;
}

.list {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.list-item {
  padding: calc(var(--spacing-unit)*0.9) 0;
}
.list-grid {
  display: grid;
  grid-template-columns: calc(var(--spacing-unit)*6) 3fr 1fr;
  grid-column-gap: calc(var(--spacing-unit)*3);
}
@media screen and (max-width: 700px) {
  .list-grid {
    grid-template-columns: calc(var(--spacing-unit)*4) 3fr 1fr;
    grid-column-gap: calc(var(--spacing-unit));
  }
}
.flag {
  margin-top: calc(var(--spacing-unit));
}
@media screen and(max-width: 700px) {
  .flag {
    margin-top: calc(var(--spacing-unit)/2);
  }
}
.collector-head {
  margin-left: calc(var(--spacing-unit)*7.5);
}

.media {
	display: inline-flex;
	align-items: center;
}
.media-content {
  padding-left: calc(var(--spacing-unit)*2);
}
@media screen and(max-width: 700px) {
  .media-content {
    padding-left: calc(var(--spacing-unit));
  }
}
.media-title {
  margin-bottom: calc(var(--spacing-unit)/2);
}
@media screen and(max-width: 700px) {
  .media-title {
    font-size: 1.4rem;
  }
}

.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--spacing-unit)*6);
	height: calc(var(--spacing-unit)*6);
	border-radius: 50%;
	color: var(--dark);
  border: none;
}
@media screen and (max-width: 700px) {
  .avatar {
    width: calc(var(--spacing-unit)*4);
    height: calc(var(--spacing-unit)*4);
  }
}
.avatar-lg {
  width: calc(var(--spacing-unit)*12);
  height: calc(var(--spacing-unit)*12);
}

.button {
	display: inline-block;
	background: var(--dark);
  color: var(--darker);
	border: 0;
	border-radius: calc(var(--spacing-unit)/2);
	padding: calc(var(--spacing-unit)*1.5) calc(var(--spacing-unit)*2.5);
	transition: all 120ms ease-out 0s;
}
.button-block {
  display: block;
  width: 100%;
}
.button-right {
  float: right;
}
.button:hover, .button:focus {
  filter: brightness(0.9);
}
.button:focus {
  box-shadow: 0px 0px 0px calc(var(--spacing-unit)/2) var(--primary-trans);
}
.button:active {
  box-shadow: 0px 0px 0px calc(var(--spacing-unit)/2) var(--primary-trans), inset 0px 0px var(--spacing-unit) rgba(black, 0.2);
  filter: brightness(0.8);
}
.button:disabled {
  background-color: var(--darker);
  color: var(--white);
}
.select {
	background: transparent;
	padding: calc(var(--spacing-unit)*1.5);
	appearance: none;
	font-size: 1.4rem;
	border-color: rgba(white, 0.2);
	transition: all 120ms ease-out 0s;
}

.select:hover {
  background: var(--darker);
}


.flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--spacing-unit)*4);
	height: calc(var(--spacing-unit)*4);
	background: var(--lightest);
	color: var(--dark);
	border-radius: calc(var(--spacing-unit)/2);
}

@media screen and (max-width: 700px) {
  .flag {
    width: calc(var(--spacing-unit)*3);
    height: calc(var(--spacing-unit)*3);
  }
}

.button-light {
  background: var(--lightest);
}

.button-primary {
  background: var(--primary);
}
.button-dark {
  background: var(--darkest);
}
.button-transparent {
  background: var(--transparent);
}
.button-medium {
  background: var(--medium);
}
.button-yellow {
  background: var(--yellow);
}
.button-pink {
  background: var(--pink);
}
.button-teal {
  background: var(--teal);
}
.button-linear-gradient {
  background: linear-gradient(to top, var(--light), var(--lightest));
}

.text-title {
	font-family: 'Oswald', system-ui;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.bg-light {
  background: var(--lightest) !important;
}
.bg-primary {
  background: var(--primary) !important;
}
.bg-dark {
  background: var(--darkest) !important;
}
.bg-transparent {
  background: var(--transparent) !important;
}
.bg-medium {
  background: var(--medium) !important;
}
.bg-yellow {
  background: var(--yellow) !important;
}
.bg-pink {
  background: var(--pink) !important;
}
.bg-blue {
  background: var(--blue) !important;
}
.bg-teal {
  background: var(--teal) !important;
}
.bg-light-gradient {
  background: linear-gradient(to top, var(--light), var(--lightest)) !important;
}
.text-light {
	color: var(--lightest) !important;
}
.text-primary {
	color: var(--primary) !important;
}
.text-dark {
	color: var(--darkest) !important;
}
.text-transparent {
	color: var(--transparent) !important;
}
.text-medium {
	color: var(--medium) !important;
}
.dark-mode .text-medium {
	color: var(--darkest) !important;
}
.text-yellow {
	color: var(--yellow) !important;
}
.text-pink {
	color: var(--pink) !important;
}
.text-blue {
  color: var(--blue) !important;
}
.text-teal {
	color: var(--teal) !important;
}
.text-light-gradient {
	color: linear-gradient(to top, var(--light), var(--lightest)) !important;
}

.display-flex {
	display: flex;
}

.align-center {
  align-items: center;
}
.align-flex-end {
  align-items: flex-end;
}
.align-flex-start {
  align-items: flex-start;
}
.align-space-between {
  align-items: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-flex-end {
  justify-content: flex-end;
}
.justify-flex-start {
  justify-content: flex-start;
}
.justify-space-between {
  justify-content: space-between;
}

.self-flex-end {
  align-self: flex-end;
}

.float-right {
  float: right;
}
.float-left {
  float: left;
}

.text-small {
	font-size: 1.5rem;
}

.pt-2 {
  padding-top: calc(var(--spacing-unit)/4);
}
.pt-4 {
  padding-top: calc(var(--spacing-unit)/2);
}
.pt-8 {
  padding-top: calc(var(--spacing-unit));
}
.pt-16 {
  padding-top: calc(var(--spacing-unit)*2);
}
.pt-24 {
  padding-top: calc(var(--spacing-unit)*3);
}
.pt-32 {
  padding-top: calc(var(--spacing-unit)*4);
}

.pb-2 {
  padding-bottom: calc(var(--spacing-unit)/4);
}
.pb-4 {
  padding-bottom: calc(var(--spacing-unit)/2);
}
.pb-8 {
  padding-bottom: calc(var(--spacing-unit));
}
.pb-16 {
  padding-bottom: calc(var(--spacing-unit)*2);
}
.pb-24 {
  padding-bottom: calc(var(--spacing-unit)*3);
}
.pb-32 {
  padding-bottom: calc(var(--spacing-unit)*4);
}

.pr-2 {
  padding-right: calc(var(--spacing-unit)/4);
}
.pr-4 {
  padding-right: calc(var(--spacing-unit)/2);
}
.pr-8 {
  padding-right: calc(var(--spacing-unit));
}
.pr-16 {
  padding-right: calc(var(--spacing-unit)*2);
}
.pr-24 {
  padding-right: calc(var(--spacing-unit)*3);
}
.pr-32 {
  padding-right: calc(var(--spacing-unit)*4);
}

.pl-2 {
  padding-left: calc(var(--spacing-unit)/4);
}
.pl-4 {
  padding-left: calc(var(--spacing-unit)/2);
}
.pl-8 {
  padding-left: calc(var(--spacing-unit));
}
.pl-16 {
  padding-left: calc(var(--spacing-unit)*2);
}
.pl-24 {
  padding-left: calc(var(--spacing-unit)*3);
}
.pl-32 {
  padding-left: calc(var(--spacing-unit)*4);
}

.mt-2 {
  margin-top: calc(var(--spacing-unit)/4);
}
.mt-4 {
  margin-top: calc(var(--spacing-unit)/2);
}
.mt-8 {
  margin-top: calc(var(--spacing-unit));
}
.mt-16 {
  margin-top: calc(var(--spacing-unit)*2);
}
.mt-24 {
  margin-top: calc(var(--spacing-unit)*3);
}
.mt-32 {
  margin-top: calc(var(--spacing-unit)*4);
}

.mb-2 {
  margin-bottom: calc(var(--spacing-unit)/4);
}
.mb-4 {
  margin-bottom: calc(var(--spacing-unit)/2);
}
.mb-8 {
  margin-bottom: calc(var(--spacing-unit));
}
.mb-16 {
  margin-bottom: calc(var(--spacing-unit)*2);
}
.mb-24 {
  margin-bottom: calc(var(--spacing-unit)*3);
}
.mb-32 {
  margin-bottom: calc(var(--spacing-unit)*4);
}

.mr-2 {
  margin-right: calc(var(--spacing-unit)/4);
}
.mr-4 {
  margin-right: calc(var(--spacing-unit)/2);
}
.mr-8 {
  margin-right: calc(var(--spacing-unit));
}
.mr-16 {
  margin-right: calc(var(--spacing-unit)*2);
}
.mr-24 {
  margin-right: calc(var(--spacing-unit)*3);
}
.mr-32 {
  margin-right: calc(var(--spacing-unit)*4);
}

.ml-2 {
  margin-left: calc(var(--spacing-unit)/4);
}
.ml-4 {
  margin-left: calc(var(--spacing-unit)/2);
}
.ml-8 {
  margin-left: calc(var(--spacing-unit));
}
.ml-16 {
  margin-left: calc(var(--spacing-unit)*2);
}
.ml-24 {
  margin-left: calc(var(--spacing-unit)*3);
}
.ml-32 {
  margin-left: calc(var(--spacing-unit)*4);
}