/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  /* font-family: "Impact", sans-serif; */
  /* font-family: "Oswald", sans-serif; */
  font-family: "Archivo Black", sans-serif;
  /* font-family: "Merriweather Sans", sans-serif; */
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
}

:root {
  --primary-red: #f05a28;
  --primary-orange: #f76322;
  --secondary-orange: #f87f49;
  --tertiary-orange: #f9a985;
  --primary-blue: #27a9e1;
  --secondary-blue: #39cef6;
  --light-blue: #b1d6f1;
  --light-mid-blue: #8bc5eb;
  --mid-blue: #63b6e6;
  --primary-yellow: #fabf3b;
  --primary-aqua: #0cbac0;
  --light-pink: #ff9cdc;
  --primary-pink: #ff04a4;
  --primary-purple: #a0046c;
  --primary-green: #8cc63e;
  --navy-blue: #1a3e6b;
  --mid-blue: #153256;
  --dark-blue: #0d1e2d;
  /* --dark-blue: #011037; */
  --light-black: #231f20;
  --black: #000000;
  --white: #ffffff;
  --gray:  #8190a0;
  --light-gray: #fcfcfc;
  --border-gray: #cccccc;
  --background-gray: #E2E9EE;
  --background-gray-light: #ecedee;
}

.menu ul {
  margin-top: -50px;
  list-style: none;
}
.menu ul li {
  margin-top: -50px;
}
.menu ul a {
  font-size: 120px;
  /* font-weight: 200; */
  /* color: var(--white); */
  text-transform: uppercase;
  text-decoration: none;
  /* -webkit-text-stroke: 2px var(--black); */
  /* color: var(--primary-orange); */
  /* -webkit-text-stroke-width: 1px; */
  /* -webkit-text-stroke-color: var(--background-gray); */
  letter-spacing: 4px;
  white-space: nowrap;
  /* box-shadow: inset 0 0 0 0 var(--white); */
  transition: color 0.3s ease-in-out;
}
.menu ul .art {
  /* color: var(--primary-orange); */
  color: transparent;
  background-image: linear-gradient(90deg, var(--background-gray) 50%, var(--primary-orange) 50%);
  background-position:100%;
  background-size:200% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  transition: background-position 0.3s ease;
}
.menu ul .work {
  /* color: var(--primary-green); */
  color: transparent;
  background-image: linear-gradient(90deg, var(--background-gray) 50%, var(--primary-green) 50%);
  background-position:100%;
  background-size:200% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  transition: background-position 0.3s ease;
}
.menu ul .hike {
  /* color: var(--primary-blue); */
  color: transparent;
  background-image: linear-gradient(90deg, var(--background-gray) 50%, var(--primary-blue) 50%);
  background-position:100%;
  background-size:200% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  transition: background-position 0.5s ease;
}
.menu ul .work:hover,
.menu ul .art:hover,
.menu ul .hike:hover  {
  /* color: var(--background-gray); */
  background-position:0;
}

.image img {
  width: 80%;
  /* height: auto; */
  /* margin: 20px 0 0 0; */
  padding: 0
}

/* .wrapper {
  position: relative;
  width: 400px;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
} */

/* h1{
  color: transparent;
  background-image: linear-gradient(90deg, yellow 50%, green 50%);
  background-position:100%;
  background-size:200% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  
  transition: background-position 1s ease;
}
h1:hover{
  background-position:0;
} */