@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: #ea55b1;
	--primary-light: rgb(120, 199, 196);
	--primary-trans: rgba(120, 199, 196, 0.377);
	
	--yellow: #fec763;
	--pink: #ea55b1;
	--teal: #00c2ba;
  --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;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: 400;
	text-transform: uppercase;
	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;
}

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

.l-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-column-gap: calc(var(--spacing-unit)*2);
	grid-row-gap: calc(var(--spacing-unit)*2);
	position: relative;
}

.c-header {
	padding: calc(var(--spacing-unit)*2) 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2.4rem;
	position: relative;
}
.c-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));
}

@media screen and (max-width: 992px) {
  .l-grid {
    grid-template-columns: 1fr;
  }
  .l-grid__item--sticky {
    display: none;
  }
  .l-wrapper {
    padding-top: 0;
  }
  .c-header {
    padding: 0;
  }
  .c-logo {
    max-height: calc(var(--spacing-unit)*6);
  }
}

.c-card {
	border-radius: calc(var(--spacing-unit));
	background: var(--surface);
	width: 100%;
	margin-bottom: calc(var(--spacing-unit)*2);
	box-shadow: 0px 0px 0px 1px rgba(white, 0.12);
}
.c-card__body, .c-card__header, .c-card__footer {
  padding: calc(var(--spacing-unit)*3);
}
@media screen and(max-width: 992px) {
  .c-card__body, .c-card__header, .c-card__footer {
    padding: calc(var(--spacing-unit)*1.5);
  }
}
.c-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0;
}
.c-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0;
}
@media screen and(max-width: 992px) {
  .c-card__header {
    flex-direction: column;
    padding-top: 0.8rem;
  }
  .c-card__footer {
    flex-direction: column;
  }
}

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

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

.c-list {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.c-list__item {
  padding: calc(var(--spacing-unit)*2) 0;
}
.c-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) {
  .c-list__grid {
    grid-template-columns: calc(var(--spacing-unit)*4) 3fr 1fr;
    grid-column-gap: calc(var(--spacing-unit));
  }
}
.c-flag {
  margin-top: calc(var(--spacing-unit));
}
@media screen and(max-width: 700px) {
  .c-flag {
    margin-top: calc(var(--spacing-unit)/2);
  }
}

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

.c-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) {
  .c-avatar {
    width: calc(var(--spacing-unit)*4);
    height: calc(var(--spacing-unit)*4);
  }
}
.c-avatar--lg {
  width: calc(var(--spacing-unit)*12);
  height: calc(var(--spacing-unit)*12);
}

.c-button {
	display: inline-block;
	background: var(--dark);
	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;
}
.c-button--block {
  display: block;
  width: 100%;
}
.c-button:hover, .c-button:focus {
  filter: brightness(0.9);
}
.c-button:focus {
  box-shadow: 0px 0px 0px calc(var(--spacing-unit)/2) var(--primary-trans);
}
.c-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);
}
.c-button:disabled {
  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.1);
}

.c-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;
}

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


.c-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) {
  .c-flag {
    width: calc(var(--spacing-unit)*3);
    height: calc(var(--spacing-unit)*3);
  }
}

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

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

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

.u-display--flex {
	display: flex;
}

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


.u-text--small {
	font-size: 1.4rem;
}




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

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

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

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

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

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

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

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