/* style.css */
body, html{
  height: 100%;
  scroll-behavior: smooth;
  
}

h2 {
  letter-spacing: 8px;
}

img {
  max-width: 100%;
  font-size: 50px;
}

.section-content {
  padding: 80px 0;
}

/* navbar hover animation*/
.nav a {
  background-image: linear-gradient(white, white);
  background-size: 0 5px, auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all .2s ease-out;
}

.nav a:hover{
  background-size: 100% 5px, auto;
}

/* cover */
#cover {
  background: url(./img/background.JPG) center center no-repeat;
  background-position: fixed;
  background-size: cover;
  opacity: 0.8;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  background-attachment: fixed;
  text-align: center;

}

#cover a{
  color: white;
}

#cover-caption{
  width: 100%;
}

#cover a{
  background-image: linear-gradient(white, white);
  background-size: 0 5px, auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all .2s ease-out;
}

#cover a:hover{
  background-size: 100% 5px, auto;
}

.section-content{
  padding: 5rem 0;
}

#about {
  background: bottom center no-repeat;
  background-size: cover;
}

#about .about-text{
  background: rgba(0,0,0,0);
  color: white;
  padding: 1.8575rem; 
}

#about h3{
  padding: 1rem;
}
/* skills */
#experience {
  padding: 40px;
  color: black;
  background: url(./img/content_bg.jpg) center center no-repeat;
  
  
}

#experience h2{
  letter-spacing: 5px;
}

/* projects */

#projects .card-deck{
  padding:40px;
  ;
  
}

#projects .card-body{
  d-flex: 
}

#projects h2{
  letter-spacing: 5px;
  color: white;
}

#projects a {
  background-image: linear-gradient(white, white);
  background-size: 0 5px, auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all .2s ease-out;
}

#projects a:hover{
  background-size: 100% 5px, auto;
}

#projects button {
  background-image: linear-gradient(white, white);
  background-size: 0 5px, auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: all .2s ease-out;
}

#projects button:hover{
  background-size: 100% 5px, auto;
}

/* footer */
#footer-main {
  color: white;
  font-size: 0.8rem;
  padding: 2.5rem 0;
}

#footer-main a{
  color: white;
}