@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');

#mainNav {
  background-color: black;
}

#mainNav .logo {
    color: #000;
    font-weight: 700;
    padding: 0.9rem 0;
    color: white;
}

#mainNav .nav-link {
    transition: none;
    padding: 2rem 1.5rem;
    color: white;
}

  #mainNav .nav-link:hover {
    transition: none;
    padding: 2rem 1.5rem;
    color: #fffff87;
}


.info-section {
    padding-bottom: 5rem;
}

.info-section .card h4, .contact-section .card .h4 {
    font-size: 0.8rem;
    font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    text-transform: uppercase;
    letter-spacing: 0.15rem;
}

section.signup-page {
  padding: 4rem;
  margin: 2rem;
  color: white;
  text-align: center;
  
}

  section>.signup-page>h5 {
    bottom-margin: 3px solid;
  }

input[type="text"] {
  border: none;
  padding: .8rem .5rem;
  background-color: transparent;
  color: black;
  font-family: 'Roboto Slab', serif;
  border-bottom: 3px solid #ff5c5c; 
  
}

#submit {
  padding: 0.5rem 2rem;
    border: none;
    margin: 2rem;
    font-family: 'Roboto Slab', serif;
    font-weight: lighter;
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 2rem;
}


section.projects-section.about-section {
    background-image: url("../assets/store.jpeg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 40% 10%;
}

.container.px-4.px-lg-5.black-info-box {
    padding: 4rem;
    background-color: #0000006b;
}



@media (min-width: 992px) {


#mainNav {
  background-color: #fff0;
  color: white;
}

  
#mainNav .logo {
    color: #000;
    font-weight: 700;
    padding: 0.9rem 0;
    color: white;
}

#mainNav .nav-link {
    transition: none;
    padding: 2rem 1.5rem;
    color: white;
}

  #mainNav .nav-link:hover {
    transition: none;
    padding: 2rem 1.5rem;
    color: #fffff87;
}

  .info-section {
    padding-bottom: 5rem;
}

.info-section .card h4, .contact-section .card .h4 {
    font-size: 0.8rem;
    font-family: "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    text-transform: uppercase;
    letter-spacing: 0.15rem;
}

#mainNav.navbar-shrink {
    background-color: #180c09;
}

section.signup-page {
  padding: 4rem;
  margin: 2rem;
  color: white;
  text-align: center;
  
}

  section>.signup-page>h5 {
    bottom-margin: 3px solid;
  }

input[type=text] {
  border: none;
  padding: .8rem 4rem;
  background-color: transparent;
  color: white;
  font-family: 'Roboto Slab', serif;
  border-bottom: 3px solid #ff5c5c; 
  
}

#submit {
  padding: 0.5rem 2rem;
    border: none;
    margin: 2rem;
    font-family: 'Roboto Slab', serif;
    font-weight: lighter;
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 2rem;
    transition: .5s all ease-in-out;
}

#submit:hover {
  background-color:  #ff5c5c;
  color: white;
}


section.projects-section.about-section {
    background-image: url("/assets/women.jpeg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 40% 10%;
}

.container.px-4.px-lg-5.black-info-box {
    padding: 4rem;
    background-color: #0000006b;
}

}