/* ==========================================================================
   General Styles
   ========================================================================== */

/* Color Palette */

:root {
  --color-secondary: #0dffff;
  --color-white: #fff;
  --color-black: #0f0d0d;
  --color-gray: #2c2c2c;

  --color-messageError: #ffc4c4;
  --color-messageSuccess: #00fff5;
  --color-fieldError: #eb5757;

  --font-title: "Unbounded", cursive;
  --font-text: "Roboto", sans-serif;
}

/* Main */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-title);
  text-align: center;
  padding: 20px;
  background: var(--color-black);
  color: var(--color-white);
}

h1 {
  color: #f7931a;
}

.first {
  max-width: 600px;
  margin: 0px auto;
}

.price {
  font-size: 24px;
  font-weight: bold;
}

.message span,
#ath-change,
#fg-index,
#change {
  color: var(--color-fieldError);
}

.font-small {
  font-size: 10px;
  margin: 10px 0px;
}

.price {
  margin: 10px 0px;
}

.intro {
  border: 1px solid var(--color-gray);
  border-left: none;
  border-right: none;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ath {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ath img {
  border-radius: 100%;
  margin-left: 10px;
  width: 24px;
  border: 1px solid #302b2b;
}

.chart {
  width: 50%;
  margin-right: 10px;
}

.chart img {
  width: 100%;
  max-width: 180px;
}

.mc {
  border-bottom: 1px solid var(--color-gray);
  padding: 10px 0px;
}

#historical-prices {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  justify-content: space-around;
  border: 1px solid var(--color-gray);
  border-left: none;
  border-right: none;
}

#historical-prices p {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  padding: 5px 0;
  border-right: 1px solid var(--color-gray);
  color: #7e7e7e;
}

#historical-prices p span {
  font-size: 18px;
  margin-top: 10px;
  color: var(--color-white);
}

#historical-prices p:nth-child(3),
#historical-prices p:nth-child(6),
#historical-prices p:nth-child(9),
#historical-prices p:nth-child(12) {
  border: none;
}

.copyright {
  font-size: 12px;
  margin-top: 50px;
  color: var(--color-gray);
}

#fear-greed {
  margin: 10px 0px;
}

#fear-greed img {
  max-width: 100px;
  margin-right: 10px;
}

#fear-greed h2 {
  font-size: 18px;
}

.hour,
.day,
.week,
.month {
  position: relative;
}

.hour:before,
.day:before,
.week:before,
.month:before {
  width: 10px;
  height: 10px;
  position: absolute;
  display: flex;
  left: 32px;
}

.hour:before {
  content: url("/img/hour.svg");
}

.day:before,
.week:before,
.month:before {
  content: url("/img/date.svg");
}

@media (max-width: 642px) {
  .hour:before,
  .day:before,
  .week:before,
  .month:before {
    left: 0px;
  }
}