@import "variables.css";

/*------------------------------Nav Bar-------------------------------*/
.navbar {
    background-image: linear-gradient(85deg, var(--logo-green2) , var(--logo-green3));
    box-shadow: 2px 2px 2px rgb(68, 68, 68);

    & img {
      height: 3rem;
    }

    & a {
      color: black;
      text-decoration: none;
      margin: auto 0.5rem;    
      border-radius: 0.5rem; 
      padding: 0.25rem 0.5rem;
      transition: 0.5s;
    }
    & a:hover {
      background-color: var(--logo-green);
      box-shadow: 0 1px 4px rgba(0,0,0,0.2); 

    }
}

/* --------------------------------------Logo-------------------------------------- */
#logo-background {
  opacity: 0.2;
  position: fixed;
  top: 15%;
  right: 5%;
  animation: logoSlide 2s;
  z-index: -9;
}

@keyframes logoSlide {
  from {
    top: 15%;
    right: 100%;   
  }
  to {
    top: 15%;
    right: 5%;
  }
}


/*-------------------------------Body---------------------------------*/
body {
    background-image: linear-gradient(85deg, var(--background-white-1) , var(--background-white-2));
}

/*-----------------------------Buttons-------------------------------*/
.btn {
    box-shadow: 0 1px 4px rgba(0,0,0,0.2); 
    border-radius: 0.5rem;  
    background-color: var(--positve_btn); 
    border-color:var(--positve_btn); 
    padding: 1rem 2rem;
}
.btn-positive:hover {
    background-color: var(--logo-turquoise);      
    border-color: black;
}
.btn-negative:hover {
    background-color: var(--logo-green);  
    border-color: black;   
}
/* ------------------------------------Forms----------------------------------- */
form {
    width: 50%;
    margin: 5rem auto;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2); 
    border-radius: 1rem;
    background-image: linear-gradient(85deg, var(--logo-green2) , var(--logo-green3));
    text-align: center;
}
form h1 {
    text-align: center;
    padding: 3rem;
}
form label {
    font-size: 1.5rem;
}

/* mobile phones */
@media screen and (max-width: 480px) {
    .standard-nav {
      display: none;
    }
  }
  /* Low Resolution Tablets */
  @media screen and (min-width: 481px) and (max-width: 767px) {
    .standard-nav {
      display: none;
    }
  }
  /* Tablets Ipads portrait mode */
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    .hamburger-nav {
      display: none;
    }
  }
  /* Desktops */
  @media screen and (min-width: 1281px){
    .hamburger-nav {
      display: none;
    }
  }