@import 'typography.css';
@import 'icons.css';

:root {
  --color-black: #000;
  --color-white: #fff;
  --color-gray: #666;
  --color-gray-light: #b3b3b3;
  --color-purple: #9d62ff;
  --color-sea-water: #00ffd1;
  --color-gradient: linear-gradient(90deg, #9d62ff 0%, #00ffd1 100%);

  --font-regular: 'Proxima Nova Regular', sans-serif;
  --font-bold: 'Proxima Nova Bold', sans-serif;

  --transition-basic: all 0.35s ease-in-out;
  --transition-linear: all 0.35s linear;
  --transition-cubic: all 0.35s cubic-bezier(0.42, 0, 0, 0.54);
}

* {
  box-sizing: border-box;
  outline: 0;
  text-decoration: none;
  text-rendering: optimizelegibility;
}

html {
  font-family: var(--font-regular);
  font-size: 16px;
  height: 100%;
  scroll-behavior: smooth;
}

html::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}

html::-webkit-scrollbar-track {
  background-color: var(--color-black);
  border-radius: 3px;
}

html::-webkit-scrollbar-thumb {
  background-color: var(--color-purple);
  border-radius: 3px;
}

body {
  font: 16px/1.5 var(--font-regular);
}

a {
  color: var(--color-purple);
  position: relative;
  text-decoration: none;
  transition: var(--transition-linear);
}

a:hover {
  color: var(--color-purple);
}

b,
strong {
  font-family: var(--font-bold);
}

table {
  border-collapse: collapse;
  width: 100%;
}

table tbody tr {
  border-bottom: 1px solid var(--color-gray-light);
}

table tbody tr td {
  border-right: 1px solid var(--color-gray-light);
  padding: 10px;
}

table tbody tr td:last-child {
  border-right: none;
}

table tbody tr td p {
  margin: 0;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-150px * 18));
  }
}