crypturn.css

html {
  --black: #000;
  --white: #fff;
  --dark: #A4AFBF;
  --light: #DAD4F1;
  --lighter: var(--white);
  --primary: #7B16FF;
  --primary-light: #DDD9FF;
  --primary-trans: rgba(123,22,255,0.4);
  --orange: #E17055;
  --green: #14c04d;
  --bg: var(--white);
  --color: var(--lighter); }

*, *:before, *:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

html, body {
  width: 100%;
  height: 100%; }

body {
  color: var(--color);
  background: var(--bg);
  font-family: 'Overpass Mono', system-ui;
  font-size: 1.6rem; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  font-family: 'Oswald', system-ui;
  letter-spacing: 0.05em;
  margin-top: 0.9rem;
  margin-bottom: 0.9rem;
  text-transform: uppercase; }

a {
  color: var(--primary);
  border-radius: 0.45rem;
  display: inline-block;
  text-decoration: none;
  transition: all 110ms ease-out 0s; }
  a:hover {
    background: var(--primary-trans);
    color: var(--primary-light);
    box-shadow: 0px 0px 0px 0.45rem var(--primary-trans); }

button, textarea, input, select {
  font-family: inherit;
  color: inherit; }
  button:active, button:focus, textarea:active, textarea:focus, input:active, input:focus, select:active, select:focus {
    outline: 0; }

button, select {
  cursor: pointer; }

.container {
  width: 100%;
  max-width: 960px;
  margin: auto;
  padding: 1.8rem 1.8rem 3.6rem; }

.row {
  display: grid;
  grid-template-columns: 3fr;
  grid-column-gap: 1.8rem;
  grid-row-gap: 1.8rem;
  position: relative; }
  @media screen and (max-width: 700px) {
    .row {
      grid-template-columns: 1fr; } }

.header {
  padding: 1.8rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.2rem;
  position: relative; }
  .header:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 0.225rem;
    background: var(--primary-trans); }

.card {
  border-radius: 0.9rem;
  background: var(--white);
  width: 100%;
  margin-bottom: 1.8rem;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 0.1125rem; }
  .card__body, .card__header {
    padding: 2.7rem; }
    @media screen and (max-width: 700px) {
      .card__body, .card__header {
        padding: 0.9rem; } }
  .card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0; }
    @media screen and (max-width: 700px) {
      .card__header {
        flex-direction: column; } }

.logo {
  display: inline-block;
  width: 100%;
  max-width: 14.4rem;
  user-select: none; }

.list {
  margin: 0;
  padding: 0;
  list-style-type: none; }
  .list__item {
    padding: 2.7rem;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; }
  .list__grid {
    display: grid;
    grid-template-columns: 7.2rem 3fr;
    grid-column-gap: 2.7rem; }
    @media screen and (max-width: 700px) {
      .list__grid {
        grid-template-columns: 7.2rem 1fr;
        grid-column-gap: 7.2rem; } }

.media {
  display: inline-flex;
  align-items: center; }
  .media__content {
    padding-left: 0.9rem;
    color: var(--dark); }
  .media__title {
    margin-bottom: 0.45rem; }
    @media screen and (max-width: 700px) {
      .media__title {
        font-size: 1.4rem; } }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 50%;
  background: var(--lighter);
  color: var(--dark);
  margin-right: 1.8rem; }
  @media screen and (max-width: 700px) {
    .avatar {
      width: 3.6rem;
      height: 3.6rem;
      margin-right: 0; } }
  .avatar--lg {
    width: 9rem;
    height: 9rem; }

.button {
  display: inline-block;
  background: var(--dark);
  border: 0;
  border-radius: 0.45rem;
  padding: 1.35rem 2.25rem;
  transition: all 100ms ease-out 0s; }
  .button--block {
    display: block;
    width: 100%; }
  .button:hover, .button:focus {
    filter: brightness(0.9); }
  .button:focus {
    box-shadow: 0px 0px 0px 0.45rem var(--primary-trans); }
  .button:active {
    box-shadow: 0px 0px 0px 0.45rem var(--primary-trans), inset 0px 0px 0.9rem rgba(0, 0, 0, 0.2);
    filter: brightness(0.8); }

.select, .price, .quantity {
  background: transparent;
  color: #444;
  border: 1px solid #f1d3f1;
  padding: 1.35rem;
  appearance: none;
  font-size: 1.35rem;
  transition: all 120ms ease-out 0s; }
  .select:hover, .price:hover, .quantity:hover {
    background: var(--darkest); }

.button--dark {
  background: var(--dark); }

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

.button--orange {
  background: var(--orange); }

.button--primary {
  background: var(--primary); }

.button--success {
  background: var(--green); }

.button--transparent {
  background: transparent; }

.text--title {
  font-family: 'Oswald', system-ui; }

.text--left {
  text-align: left; }
.text--center {
  text-align: center; }
.text--right {
  text-align: right; }

.bg--dark {
  background: var(--dark) !important; }

.text--dark {
  color: var(--dark) !important; }

.bg--light {
  background: var(--lighter) !important; }

.text--light {
  color: var(--lighter) !important; }

.bg--orange {
  background: var(--orange) !important; }

.text--orange {
  color: var(--orange) !important; }

.bg--primary {
  background: var(--primary) !important; }

.text--primary {
  color: var(--primary) !important; }

.bg--success {
  background: var(--green) !important; }

.text--success {
  color: var(--green) !important; }

.bg--transparent {
  background: transparent !important; }

.text--transparent {
  color: transparent !important; }

.display--flex {
  display: flex; }

.align--center {
  align-items: center; }

.justify--center {
  justify-content: center; }

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

.justify--flex-end {
  justify-content: flex-end; }

.align--flex-start {
  align-items: flex-start; }

.justify--flex-start {
  justify-content: flex-start; }

.align--space-between {
  align-items: space-between; }

.justify--space-between {
  justify-content: space-between; }

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

.pl--2 {
  padding-left: 0.225rem; }

.ml--2 {
  margin-left: 0.225rem; }

.pr--2 {
  padding-right: 0.225rem; }

.mr--2 {
  margin-right: 0.225rem; }

.pb--2 {
  padding-bottom: 0.225rem; }

.mb--2 {
  margin-bottom: 0.225rem; }

.pt--2 {
  padding-top: 0.225rem; }

.mt--2 {
  margin-top: 0.225rem; }

.pl--4 {
  padding-left: 0.45rem; }

.ml--4 {
  margin-left: 0.45rem; }

.pr--4 {
  padding-right: 0.45rem; }

.mr--4 {
  margin-right: 0.45rem; }

.pb--4 {
  padding-bottom: 0.45rem; }

.mb--4 {
  margin-bottom: 0.45rem; }

.pt--4 {
  padding-top: 0.45rem; }

.mt--4 {
  margin-top: 0.45rem; }

.pl--8 {
  padding-left: 0.9rem; }

.ml--8 {
  margin-left: 0.9rem; }

.pr--8 {
  padding-right: 0.9rem; }

.mr--8 {
  margin-right: 0.9rem; }

.pb--8 {
  padding-bottom: 0.9rem; }

.mb--8 {
  margin-bottom: 0.9rem; }

.pt--8 {
  padding-top: 0.9rem; }

.mt--8 {
  margin-top: 0.9rem; }

.pl--16 {
  padding-left: 1.8rem; }

.ml--16 {
  margin-left: 1.8rem; }

.pr--16 {
  padding-right: 1.8rem; }

.mr--16 {
  margin-right: 1.8rem; }

.pb--16 {
  padding-bottom: 1.8rem; }

.mb--16 {
  margin-bottom: 1.8rem; }

.pt--16 {
  padding-top: 1.8rem; }

.mt--16 {
  margin-top: 1.8rem; }

.pl--24 {
  padding-left: 2.7rem; }

.ml--24 {
  margin-left: 2.7rem; }

.pr--24 {
  padding-right: 2.7rem; }

.mr--24 {
  margin-right: 2.7rem; }

.pb--24 {
  padding-bottom: 2.7rem; }

.mb--24 {
  margin-bottom: 2.7rem; }

.pt--24 {
  padding-top: 2.7rem; }

.mt--24 {
  margin-top: 2.7rem; }

.pl--32 {
  padding-left: 3.6rem; }

.ml--32 {
  margin-left: 3.6rem; }

.pr--32 {
  padding-right: 3.6rem; }

.mr--32 {
  margin-right: 3.6rem; }

.pb--32 {
  padding-bottom: 3.6rem; }

.mb--32 {
  margin-bottom: 3.6rem; }

.pt--32 {
  padding-top: 3.6rem; }

.mt--32 {
  margin-top: 3.6rem; }

/*# sourceMappingURL=style.css.map */