:root {
  /* Colors */
  --primary-color: #587b7f; /* Main Text/Icon Color */
  --accent-color: #5d7a7f; /* Buttons/Borders */
  --hover-color: #4a6266; /* Button Hover */
  --white: #ffffff;
  --black: #000000;
  --light-bg: #f0f0f0;

  /* Fonts */
  --font-primary: "Newsreader", serif; /* Headings */
  --font-secondary: "DM Sans", sans-serif; /* Body text */
  --font-tertiary: "Futura PT", sans-serif; /* Header/Nav */
  --font-display: "Apoc Normal", serif; /* Special Headings */

  /* Typography Variables */
  --text-xl: 48px;
  --text-lg: 21px;
  --text-md: 18px;
  --leading-tight: 120%;
  --tracking-tight: -0.02em;
  --header-padding: 25px 10px !important;
  --header-height: 100px; /* Logo 40px + Padding 25px*2 + slack */
}

@font-face {
  font-family: "Apoc Normal";
  src: url("../fonts/ApocNormal-Regular.woff2") format("woff2"),
    url("../fonts/ApocNormal-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

html,
body {
  overflow-x: hidden; /* Prevent horizontal scroll */
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  padding-top: var(--header-height); /* Compensation for fixed header */
}

.themebtn {
  background-color: var(--primary-color);
  border: unset;
  border-radius: 0px;
}
.themebtn:hover {
  background-color: var(--hover-color);
}

/* Typography Classes */
.about-heading-style {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}

.about-para-style {
  font-family: var(--font-secondary);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}

.neighbourhood-name-style {
  font-family: var(--font-secondary);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}