html {
  background-color: #0f0f0f;
  scroll-behavior: smooth;
}

body {
  background-color: #0f0f0f;
}

.navbar {
  background-color: #0f0f0f !important;
  width: 100%;
  overflow: hidden;
}

.home {
  background-color: #0f0f0f;
  color: white;
  text-align: left;
  align-items: center;
  height: 800px;
}

.btn {
  border-color: #0f0f0f;
  color: white;
  border-radius: 10px;
  width: 80px;
  height: 80px;
}

.card {
  background-color: #232423;
  height: 650px;
  margin-bottom: 50px;
}

.cardDesc {
  height: 150px;
  color: white;
}

.about {
  /* background-color: #202020; */
  background-color: #0f0f0f;
  color: white;
  text-align: left;
  align-items: center;
  height: 800px;
  /* padding-top: 150px; */
}

.projects {
  background-color: #0f0f0f;
  height: 950px;
}

.contact {
  background-color: #0f0f0f;
  padding: 80px;
}

.title {
  font-size: 40px;
  color: white;
  text-align: left;
}

.title2 {
  font-size: 40px;
  color: white;
  text-align: left;
  padding-top: 100px;
}

/* PROFILE PIC */
.pfp {
  height: 300px;
  width: 250px;
  border-radius: 50px;
  /* border:10px !important;
    border-color: white !important; */
}

.card-img-top {
  height: 323px;
}

.logos {
  height: 100px;
  width: 100px;
}

.linkBtns {
  text-decoration: none;
  padding: 20px;
}

.contactBtns {
  border-width: 2.5px;
  border-color: white;
  background-color: #0f0f0f;
  width: 150px;
  height: 55px;
  font-size: 22px;
  color: white;
  text-align: center;
}

.contactBtns:hover {
  background-color: white;
  border-color: black;
  color: black;
}

.learnBtn {
  background-color: #232423;
  border-color: white;
  border-width: 2px;
  width: 150px;
  height: 50px;
}

.learnBtn:hover {
  background-color: white;
  border-color: black;
  color: black;
}

.badgeDiv{
  
}

.badge {
  border-color: black;
  color: black;
}

.bg-bootstrap {
  background-color: rgb(132, 84, 155) !important;
}

.bg-javascript {
  background-color: yellow !important;
}

.bg-sql {
  background-color: rgb(56, 212, 240) !important;
}

.bg-ejs {
  background-color: rgb(212, 0, 0) !important;
}

.bg-express {
  background-color: rgb(6, 190, 0) !important;
}

.bg-node {
  background-color: rgb(24, 100, 24) !important;
}

.bg-api {
  background-color: rgb(70, 70, 226);
}


/* Responsive  */

@media screen and (max-width: 1200px) {
  .cardDesc{
    height: 200px;
  }
}

@media screen and (max-width: 550px) {
  .picBox{
    width:100%
  }
  .bioBox{
    margin:auto;
    
  }
}

@media screen and (max-width: 400px){
  .card{
    height:700px;
  }
}