@import url('https://fonts.googleapis.com/css2?family=Aldrich&family=Fira+Code:wght@300..700&family=Tektur:wght@400..900&family=Tourney:ital,wght@0,100..900;1,100..900&display=swap');
@import 'utilities.css';

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

:root {
  --background-color: #150719;
  --primary-color: #764ad5;
  --secondary-color: #271f2a;
  --tertiary-color: #442b55;
  --border-color: #332e38;
  --text-color: #e9e9e9;
  --text-color-secondary: #a3a3a3;
  --text-color-tertiary: #787878;
  --font-primary: "Aldrich", Helvetica, Arial, sans-serif;
  --font-impact: "Tourney", Helvetica, Arial, sans-serif;
  --font-secondary: "Fira Code", Helvetica, Arial, sans-serif;
  --font-tertiary: "Tektur", Helvetica, Arial, sans-serif;
  --text-size: 15px;
  --text-small: calc(var(--text-size) * 0.90);
  --text-weight: 200;
  --border-section: 2px solid var(--secondary-color);
  --border-debug: 1px solid turquoise;
}


body {
  font-family: Arial, sans-serif;
  background-color: var(--background-color);
  line-height: 1.6;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
}


main {
  margin-top: 20px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  main h1 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
  }
  main p {
    font-size: 16px;
    color: #555;
  }
  
  @media (max-width: 600px) {
    main {
      padding: 10px;
    }
    main h1 {
      font-size: 20px;
    }
    main p {
      font-size: 14px;
    }
  }

  hr {
    border: none;
    border-top: 4px solid var(--border-color);
    border-radius: 5px;
    /* margin: 40px 0; */
  }