.scrollable {
  overflow-y : scroll;
  overflow-x : hidden;
  width : 100%;
  height : 100vh;
  scroll-behavior: smooth;
  margin : 0;
  padding : 0;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : flex-start;
}

#cardContainer {
  display : flex;
  flex-direction : row;
  align-items : center;
  justify-content : center;
  width : 50%;
  height : auto;
  margin-top : 50px;
  margin-bottom : 10px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  padding : 50px;
  border-radius: 25px;
}

#cardContainer > * {
  max-width : 50%;
  margin : 0;
}

.pfpContainer {
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
}

.detailContainer {
  height : 100%;
  padding : 0;
  text-align : center;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : space-around;
}

.detailContainer > h1 {
  font-family : var(--bodyFont);
  font-weight : bold;
  font-size : 22px;
  color : var(--darkRed);
}

.detailContainer > h2 {
  font-family : var(--contentFont);
  font-weight : 300;
  font-size : 18px;
  color : var(--darkRed);
}

.detailContainer > * {
  margin : 10px;
}

#contactSocialIconContainer {
  display : flex;
  dlex-direction : row;
  align-items : center;
  justify-content : space-between;
  padding : 0;
  width : 80%;
  height : auto;
}

#contactSocialIconContainer .icon {
  margin : 0!important;
  padding : 0!important;
}

.contactDetails {
  font-family : var(--contentFont);
  font-weight : bold;
  color : var(--darkRed);
}

.contactIcon {
  height : 30px;
  width : auto;
  fill : var(--darkRed);
  margin : 10px;
}

#pfp {
  width : 70%;
  height : auto;
  margin : 20px;
  border-radius : 50px;

}

.contactButtonContainer {
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : space-around;
}



@media screen and (max-width: 980px) {

  #cardContainer {
    flex-direction : column;
    margin-top : 50px;
    margin-bottom : 50px;
    width : 80%;
    border-radius : 50px;
    padding : 20px;
  }

  #cardContainer > * {
    max-width : 100%;
  }

  .detailContainer > * {
    margin : 30px;
  }

  #contactSocialIconContainer {
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : space-between;
    padding : 0;
    width : 80%;
    height : auto;
  }

  .contactIcon {
    height : 40px;
    margin : 0;
    margin-right : 50px;
  }

  #pfp {
    width : 90%;
    margin : 30px;
  }


}