@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

html, body{
  height:100%;
  width:100%;
  font-family: 'Poppins';
  color:#222;
}

.navbar{
  padding: .8rem;
}

.navbar-nav li{
  padding-right: 20px;
}

.nav-link{
  font-size: 1.1em !important;
}


.btn-primary{
  background-color: rgb(116, 116, 116);
  border: 1px solid rgb(0, 0, 0);
}

.btn-primary:hover{
  background-color: rgb(92, 92, 92);
  border: 1px solid rgb(92, 92, 92);
}



.padding{
  padding-bottom: 2rem;
}

.padding-top{
  padding-top: 2.5rem;
}

.dark-color{
  background-color: rgb(51,57,63);
  
}

.light-color{
  background-color: rgb(224,224,224);
  
}

.dark-font{
  color: rgb(60,60,60);
}

.light-font{
  color:rgb(224,224,224);
}

.welcome{
  width: 75%;
  margin:0 auto;
  padding-bottom: 2rem;
}

.welcome hr{
  border-top: 2px solid #b4b4b4;
  width:95%;
  margin-top: .3rem;
  margin-bottom: 1rem;
}


.about{
  color:rgb(60,60,60);
}

.about h2{
  color:rgb(60,60,60);
}


.circleImg{
    border-radius: 50%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    float: right;
}

.fa-code{
  color:#e54d26;
}

.fa-bold{
  color: #563d7c;
}

.fa-css3{
  color:#2163af;
}

.fa-code, .fa-bold, .fa-css3{
  font-size: 4em;
  margin:1rem;
}

.fun{
  width:100%;
  margin-bottom: 2rem;
}

.gif{
  max-width:100%;
}

.social a{
  font-size: 4.5em;
  padding:3rem;
}

.fa-linkedin{
  color: rgb(0,128,192);
}

.fa-github{
  color:black;
}


.fa-linkedin:hover, 
.fa-github:hover{
  color: rgb(155,155,155);
}


hr.light {
  border-top: 1px solid #d5d5d5;
  width: 75%;
  margin-top:.8rem;
  margin-bottom: 1rem;
}

hr.light-100{
  border-top: 1px solid #d5d5d5;
  width: 100%;
  margin-top:.8rem;
  margin-bottom: 1rem;
}

.border-style{
  border:5px solid #cecece;
  border-radius: 20px;
  width:95%;
  padding: 15px;
}



.thumbnail{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    float: right;
    border: 5px solid rgb(91,91,91);

}

.projImg {
    width: 100%;
    vertical-align: middle;
    border: 1px solid #101010;
}

.pad{
  padding: 3rem;
  vertical-align: middle;
}

.helper {
    display: inline-block;
    height: 100%;
}



/*---Media Queries --*/

@media (max-width: 992px) {
  .social a{
    font-size: 4em;
    padding: 2rem;
  }

    .p-thumbnail{
    font-size: 80%;
  }


@media (max-width: 880px) {
.display-3{
  font-size: 300%;
}

}


@media (max-width: 768px) {


.display-4{
  font-size:200%;
}

.display-3{
  font-size: 300%;
}

.social a{
  font-size: 5em;
  padding:2rem;
}

.circleImg{
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 320px;
}

.card-text{
  font-size:80%;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

}


@media (max-width: 610px) {

.display-3{
  font-size:260%;
}
}


@media (max-width: 576px) {

.display-4{
  font-size:160%;
}

.display-3{
  font-size:260%;
}

.social a{
  font-size: 4em;
  padding: 2rem;
}


}




/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/