/* ---------------------------------------
  1. Imports & Variables
  2. General CSS
  3. IDs & Classes
--------------------------------------- */
/* ---   1. Imports & Variables --- */
 :root {
  /* Fonts */
  --main-font: 'avenir-next-lt-pro', 'Helvetica Neue', 'century gothic', sans-serif;
  --secondary-font: "gotham", 'Helvetica Neue', Tahoma, sans-serif;
  /* Colour Palette */
  --primary-color: #7F5AF0;
  --secondary-color: #00A8E8;
  --contrast-color: #FF6B6B;
  --dark-color: #1A1A1A;
  --light-color: #FFFFFF;
  --background-color: #EEEEEE;
  --background-color-dark: #222222;
  /* Sizes */
 }
/* ---   2. General CSS --- */
body,
body * {
  transition: all 300ms ease-out;
  font-family: var(--main-font);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -1px;
}

body.light {
  background-color: var(--background-color);
}
body.dark {
  background-color: var(--background-color-dark);
}
body header {
  position: fixed;
  top: 0;
  left: 0;
}
body header h1 img {
  width: 50%;
  padding: 1rem;
}
body nav ul.menu {
  position:fixed;
  padding-top: 40vh;
  padding-left: 2vw;
  padding-right: 2vw;
}
body nav ul.menu li a{
  color: var(--dark-color);
  text-transform: lowercase;
  text-decoration: none;
}
body nav ul.menu li a:hover {
  color: var(--light-color);
  cursor: pointer;
}

p, section ul li{
  font-family: var(--secondary-font);
  letter-spacing: .05rem;
}




/* --- 3. IDs & Classes --- */
.btn {
  font-family: var(--main-font);
  text-transform: uppercase;
  letter-spacing: .05rem;;
}
.btn-primary {
  background-color: var(--dark-color);
  color: var(--light-color);
  border: 0;
}
.btn-primary:hover {
  background-color: var(--secondary-color);
  color: var(--light-color);
}

.btn-secondary {
  background-color: var(--contrast-color);
  border:0;
}

.btn-secondary:hover {
  background-color: var(--secondary-color);
  color: var(--light-color);
}

.section-home {
  padding-top: 20vh;
}

.section-future {
  padding-top: 5vh;
  padding-bottom: 5vh;
}