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

@font-face {
    font-family: 'Old NewsPaper Types';
    src: url('fonts/OldNewspaperTypes.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Veteran Type Writer';
    src: url('fonts/VeteranTypeWriter.woff2') format('woff');
    font-weight: 700;
    font-style: normal;
}

:root {
    --main-color: #0d1012;
    --white: #f4f4f4;
    --blood-red: #640D14;
}

body {
    background-color: var(--main-color);
    background-image: url("img/background.jpg");
    background-size: cover;
    background-attachment: fixed;

    font-family: 'Old NewsPaper Types', sans-serif;
    color: var(--white);
}

h1, h2 {
    font-family: 'Veteran Type Writer', sans-serif;
    font-size: 3rem;
}

h2 {
    font-size: 1.5rem;
    background-color: var(--blood-red);
}

select {
  background-color: var(--main-color);
  color: var(--white);
  
  border-radius: 5px;
  padding: 5px;
}

.page {
  width: 100vw;
  height: 100vh;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<<<<<<< HEAD
.big-number {
  font-family: 'Veteran Type Writer';
  font-size: 6rem;
  text-transform: uppercase;
  margin-bottom: 25px;
  letter-spacing: 3px;
  background-color: #640d14;
  padding: 4px 8px;
  color: #fff;
}

.stats .big-number {
  font-family: 'Veteran Type Writer';
  font-size: 3rem;
  color: #ffffff;
  display: inline-block;
}

.chart-page.inverse {
  flex-direction: row-reverse;
}

=======
#intro-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}


.big-number {
  font-size: 3em;
  color: #640D14;
  font-family: 'Veteran Type Writer', monospace;
  font-size: 3rem;
  display: inline-block;
  animation: popIn 0.8s ease forwards;

}

.chart-page {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  padding: 80px 60px;
  color: white;
}

.chart-page.inverse {
  flex-direction: row-reverse;
}

>>>>>>> AnhHTML
.chart-side.left {
  justify-content: flex-start;
}

.chart-side.right {
  justify-content: flex-end;
}

.text-side.right {
  text-align: left;
  margin-left: auto;
}

.text-side.left {
  text-align: left;
  margin-right: auto;
}

.text-side h3 {
<<<<<<< HEAD
  font-family: 'Veteran Type Writer';
=======
  font-family: 'Veteran Type Writer', sans-serif;
>>>>>>> AnhHTML
  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

.text-side h3 span {
  background-color: #640D14;
  padding: 4px 8px;
  color: #fff;
  border-radius: 3px;
}

@media (max-width: 900px) {
  .chart-page, .chart-page.inverse {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px;
  }

  .text-side, .chart-side {
    max-width: 100%;
  }

  .text-side h3 {
    font-size: 1.5rem;
  }

  .text-side p {
    font-size: 0.95rem;
  }
<<<<<<< HEAD
}
=======
}
>>>>>>> AnhHTML