:root {
  --main-color: #96CA4F;
  --font-color: #505050;
  --font-family: 'myriad-pro-semiextended', Arial, Helvetica, sans-serif;
}

* {
  margin: 0; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* change font here */ 

html {
  font-family: var(--font-family);
  font-weight: 400;
  color: var(--font-color);
  overflow-y: hidden;
}

html, body {
  overflow-x: hidden;
}
body {
  position: relative;
}

#app {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
}

.page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  overflow-y: hidden;
}

/* layers */

.layer0 {
  z-index: 0
}
.layer1 {
  z-index: 10
}
.layer2{
  z-index: 20
}
.layer3{
  z-index: 30
}

/* footer text coloring and size */
.footer-item {
  font-size: 1.2rem;
}

.footer-link {
  color: inherit
}

.footer-button {
  font-size: 1rem;
  outline: none;
  border: solid 1px;
  border-radius: 3px;
  margin-right: 4px;
}

.footer-button:focus{
  outline: none;   
}

.footer-button :hover {
  color: var(--font-color);
}

/* label size and coloring*/
.label {
  font-size: 1em;
  text-align: left;
  color: var(--main-color);
  font-weight: 700;
  padding: 0 12px;
}

hr {
  border-color: rgba(0,0,0,0.12)
}

/* social icon sizing */
.social-icon {
  width:30px;
  fill:var(--main-color)
}

.social-icon svg {
  width: 1rem;
  height: 1.4rem;
  padding: 0 10px;
  fill:var(--main-color)
}

.social-icon svg:hover {
  opacity: 0.5;
}

.contact-text {
  padding: 0 10px;
}

.contact-text:hover {
  opacity: 0.5;
}



/* TITLE AND DESCRIPTION */

.title {
  font-size: 1rem;
  pointer-events: none;
}

.description {
  font-size: 0.8rem;
  pointer-events: none;
  margin-top: 0vh;
}

.description:nth-child(1) {
  margin-top: 2vh;
}

.description:nth-child(2) {
  margin-top: 2vh;
}


/* Scrollbar */

::-webkit-scrollbar {
  display:none
}

/* ANIMATION */

.move-fade-enter {
  opacity: 0.01;
  transform: translate3d(10%,0%,0);
}
.move-fade-enter-active {
  opacity: 1;
  transform: translate3d(0%,0%,0);
  transition: all 1700ms ease-out 2000ms;
}

.move-fade-exit {
  opacity: 1;
}
.move-fade-exit-active {
  opacity: 0.01;
  transition: all 1000ms ease-in;
}

.fade-enter {
  opacity: 0.01;
}
.fade-enter-active {
  opacity: 1;
  transition: all 1000ms ease-out;
}

.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0.01;
  transition: all 1000ms ease-in;
}

/* oval overlay */

.ovalay {
  height: 100vh;
  width: 100vw;
  background-image: url('/images/background.svg');
  background-position: center;
  background-size: 150%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  opacity: 0.4;
  mix-blend-mode: color-burn;
  position: relative;
}

@media (max-width: 960px) {
  .ovalay {
    background-size: 250%;
  }
}


/* Media Queries */

@media (max-width: 600px) {
  .ovalay {
    background-size: 250%;
    overflow: hidden;
  }
} 


@media (max-width: 450px) and (pointer: coarse) {
 .ovalay {
   display: none;
  }
}