html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Raleway', sans-serif;
  overflow-y: scroll;
  font-size: x-large;
  line-height: 2.5rem;
}

#home {
  background-image: url("assets/images/home_img.png");
  background-position: bottom;
  background-size: 20rem;
  background-repeat: repeat-x;
}

#logo {
  background: linear-gradient(to right, #915e84 42%, #93FFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

#about {
background-color: rgb(112, 160, 179);
}

#HB {
  /* -webkit-filter: grayscale(50%);
  filter: grayscale(50%); */
  max-height: 90%;
}

#aboutGrid {
  max-height: 70%;
}

#skills-list {
  columns: 4;
  -webkit-columns: 4;
  -moz-columns: 4;
  list-style: none;
  height: 75%;
}

#skills li::before {
    content: "\2022";
    color:#915e84;
    font-weight: bolder;
    display: inline-block;
    width: 1em;
  }

.card-img-top {
  height: 231px;
  min-width: 400px;
  overflow: hidden;
  border-bottom: solid 1px gray;
}

.card-body-back {
  height: 270px;
  border-bottom: solid 1px gray;
}

#contact {
  background-color: #F0EFED;
}

nav {
  position: fixed;
  /* background-color: white; */
  width: 100%;
  z-index: 10;
}

h1, h3, h2, nav {
  font-family: 'Montserrat', sans-serif;
}

.scroll-container {
  display: flex;
  align-items: center;
  max-width: 100%;
  height: 450px;
  margin-bottom: auto;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: rgba(109, 109, 113, 0.287) 0px 5px 20px 0px;
}

.card-flip {
  perspective: 1000px;
  display: flex;
  width: calc((400px * 3) + (20px * 6));
}
  
.flip {
  min-width: 400px;
  height: 400px;
  margin: 20px;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.isFlipped {
  transform: rotateY(180deg);
}

.front {
  background: #FEFEFE;
  box-shadow: rgba(226, 225, 234, 0.745) 0px 5px 20px 0px;
}

.back {
  transform: rotateY(180deg);
  box-shadow: rgba(226, 225, 234, 0.941) 0px 5px 20px 0px;
}

.front,
.back {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

#deployedLink:hover {
  color:#915e84;;
}

#gitHubLink:hover {
  color: rgb(112, 160, 179);
}

#footer {
  background-color: rgb(112, 160, 179);
  position: relative;
  bottom:0;
  flex-grow: 1;
}

label {
  display: block;
  margin-bottom: .2em;
}

input, textarea {
  width:100%;
  border: solid 1px #d1d5db;
}