/* media queries */
/* xs less than 576
sm 576 and up
md 768 and up
lg 992 and up
xl 1200 and up */

html {
  scroll-behavior: smooth;
}

.btnWork {
  padding-bottom: 30px;
}
.btnProj {
  border-radius: 2%;
  border-color: #009999;
  background-color: #009999;
}
#projText {
  color: #ffffff !important;
}

a {
  color: black;
}

/* navbar */

.navbar {
  background-color: none;
  font-family: "Oswald", sans-serif;
}

.navbar-toggler {
  border: 1px solid #009999 !important;
}

#navbarNav {
  font-size: 20px;
  padding-bottom: 10px;
  margin-left: 50px;
}

.collapse {
  border-radius: 2%;
  padding-left: 10px;
}

/* hover effect */

:root {
  --mainColor: rgb(0, 0, 0, 0.4);
}

.nav-link {
  transition: 0.4s;
  color: #ffffff;
  font-size: 24px;
  text-decoration: none;
  padding: 0 10px;
}

.nav-link:hover {
  background-color: #ffffff;
  padding: 10px;
}

/* home */

#home {
  height: 750px;
  text-align: center;
  background: url("../images/keyboardBG.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.homeContent {
  position: relative;
  top: 38px;
  /* width: 50%; */
  width: 100%;
  background-color: rgb(0, 0, 0, 0.8);
  color: white;
  margin: auto;
  border-radius: 1%;
}

.greeting {
  padding-top: 20px;
  font-family: "Oswald", sans-serif;
  border-bottom: 3px solid #009999;
  margin-left: 11%;
  margin-right: 11%;
}

.profileImage {
  position: relative;
  top: 20px;
  border-radius: 50%;
  height: 155px;
  width: 140px;
}

.ms {
  border-bottom: 2px solid #009999;
  margin-right: 82%;
  font-family: "Oswald", sans-serif;
}

.statement {
  font-size: 15px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  text-align: left;
}

/* projects */

#projects {
  height: 1000px;
  background-color: #009999;
}

@media (min-width: 0px) {
  .homeContent {
    background-color: black !important;
  }
  .card-columns {
    column-count: 1;
    margin-top: 10%;
  }
  .greeting {
    font-size: 22px !important;
    margin-left: 3% !important;
    margin-right: 3% !important;
  }
  #home {
    height: 820px !important;
  }

  .homeContent {
    margin-top: 18% !important;
  }

  .intro {
    font-size: 18px !important;
  }
  .ms {
    font-size: 17px !important;
    margin-right: 65%;
  }
  .navbar {
    background-color: #999999 !important;
  }

  #projects {
    height: 2500px !important;
    background-color: #009999;
  }
  /* contact */
  #contact {
    height: 900px !important;
  }

  .contactContent {
    padding-top: 20% !important;
  }
  .contactInfo {
    padding-top: 10% !important;
  }
  #ci {
    border-bottom: 2px solid #009999;
    margin-right: 35%;
  }
}

@media (min-width: 576px) {
  .homeContent {
    background-color: black !important;
  }
  .card-columns {
    column-count: 2;
  }

  .greeting {
    font-size: 33px !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
  }
  .ms {
    font-size: 20px !important;
    margin-right: 73% !important;
  }

  #projects {
    height: 1400px !important;
    background-color: #009999;
  }
  /* contact */
  #contact {
    height: 900px !important;
  }
  .contactContent {
    padding-top: 10% !important;
  }
  #ci {
    border-bottom: 2px solid #009999;
    margin-right: 46%;
  }
}

@media (min-width: 768px) {
  .homeContent {
    background-color: rgb(0, 0, 0, 0.8) !important;
  }
  .card-columns {
    column-count: 2;
    margin-top: 7%;
  }

  .greeting {
    font-size: 30px !important;
    margin-left: 3% !important;
    margin-right: 3% !important;
  }

  #home {
    height: 800px !important;
  }
  .homeContent {
    margin-top: 0% !important;
  }

  .ms {
    font-size: 20px !important;
    margin-right: 72%;
  }

  #projects {
    height: 1400px !important;
  }

  #ci {
    border-bottom: 2px solid #009999;
    margin-right: 68%;
  }
}

@media (min-width: 992px) {
  .homeContent {
    background-color:rgb(0, 0, 0, 0.8) !important;
  }
  .navbar {
    background-color: transparent !important;
    font-family: "Oswald", sans-serif;
  }
  .card-columns {
    column-count: 3;
    margin-top: 7%;
  }
  .homeContent {
    margin-top: 0% !important;
  }
  .greeting {
    font-size: 33px !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
  }
  .ms {
    font-size: 20px !important;
    margin-right: 73% !important;
  }
  #projects {
    height: 1000px !important;
  }
}

@media (min-width: 1200px) {
  .homeContent {
    background-color:rgb(0, 0, 0, 0.8) !important;
  }
  .navbar {
    background-color: transparent !important;
    font-family: "Oswald", sans-serif;
  }
  .card-columns {
    column-count: 3;
    margin-top: 7%;
    margin-right: 10% !important;
  }

  .homeContent {
    margin-top: 0% !important;
  }
  .greeting {
    font-size: 48px !important;
    margin-left: 4% !important;
    margin-right: 4% !important;
  }
  .intro {
    font-size: 26px !important;
  }
  .ms {
    font-size: 25px !important;
    margin-right: 78% !important;
  }

  /* contact page */
  .contactContent {
    display: flex;
    justify-content: center;
    margin-left: 10%;
  }

  .form {
    flex: 0 0 65%;
    position: relative;
    bottom: 80px;
  }

  #contact {
    height: 550px !important;
    background-color: #999999;
  }

  .contactInfo {
    padding-left: 30px;
    flex: 1;
    line-height: 10px;
    position: relative;
    bottom: 120px;
  }
  #chat {
    font-family: "Oswald", sans-serif;
    border-bottom: 2px solid #009999;
    margin-right: 74%;
  }

  #ci {
    font-family: "Oswald", sans-serif;
    border-bottom: 3px solid #009999;
    line-height: 45px;
    margin-right: 65%;
  }
}

.cardStack {
  margin: auto;
}

.card {
  -webkit-box-shadow: -5px 6px 26px 1px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: -5px 6px 26px 1px rgba(0, 0, 0, 0.7);
  box-shadow: -5px 6px 26px 1px rgba(0, 0, 0, 0.7);
}
.card-img-top {
  padding-top: 10px;
  height: 190px;
}

.card-title {
  border-bottom: 2px solid #009999;
  text-align: center;
}

#projects {
  height: 1000px;
  background-color: #009999;
}

.projLink {
  color: white !important;
}

.card-text {
  font-size: 14px;
}

/* contact page */

.btn-primary {
  background-color: #009999;
  border-color: #009999 !important;
}

#contact {
  height: 800px;
  background-color: #999999;
}