body {
  background: #D6D3D1;
background-size: cover;
  overflow-x: hidden;
}

.navBar {
  z-index: 3;
}

/* flex body style */

  .container {
  display: flex;
  margin-left: 1rem;
  margin-right: 1rem;
  justify-content: space-around;
  align-items: flex-start;
}

.body-col, .bio-card, .title-card {
    flex: 0 1 50%;
  margin-top: 3rem;
}

.body-card, .bio-card, .title-card {
  padding: 1.5rem;
  padding-top: 0;
  border: solid 2px #86807D;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.8);
}

.body-col {
  order: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  row-gap: 3rem;
}

.body-card h1 {
  text-align: center;
  color: #fff;
}


.body-card-header {
  padding: 0.25rem 1rem;
  margin-top: -2rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
  background-color: black;
  border-radius: 1rem;
 }


.body-card img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1rem;
  width: 80%;
  transform: translateX(-0.25rem);
}

.bio-card {
  order: 1;
  flex: 0 1 20%;
  position: sticky;
  top: 6rem;
  z-index: 5;
}

.bio-card img {
  width: 150px;
  height: auto;
  margin-top: -5rem;
  display: block;
  margin-right: auto;
  margin-left: auto;
  z-index: 5;
  border: solid 2px #000;
  border-radius: 5rem;
}

.bio-card h1 {
  font-size: 18px;
}


.title-card {
  background: black;
  color: white;
  border: solid 2px black;
  text-align: center;
  padding: 0;
  display: none;
  margin-top: 0;
}

.title-card h1 {
  font-size: 50px;
}

p, li {
  line-height: 160%;
}

li {
  margin-bottom: 1rem;
}

.bio-card a, .body-card a {
  color: darkred;
}

/* Import from CV CSS */
.card-box, .port-box, .award-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.card-box-img {
  margin-top: 1.25rem;
  border-radius: 0;
}

.card-box-img img {
  border-radius: 0;
  width: 3rem;
}

/* Portfolio special */
.port-img {
  margin-top: 1.25rem;
  border-radius: 0;
}

.port-img img {
  border-radius: 0.5rem;
  width: 10rem;
   transform: translateX(0);
}

@media (max-width:768px) {
  .port-box {
  flex-direction: column;
  align-items: stretch;
  }
  
  .port-img img {
  border-radius: 0.5rem;
    width: 100%;}
  
 .body-card-header {
  padding: 0.25rem 1rem;
  max-width: 110%;
   margin-left: -2.5rem;
}
}

/* port import end */

#Awards img {
  width: 8rem;
}
.card-box h3 {
  margin-bottom: 0;
}

.card-box p {
  margin-top: 0.25rem;
}

#Work h4 {
  margin-bottom: 1rem;
}

#Awards h3 {
  margin-bottom: 1rem;
}

#Education, #Awards {
  display: flex; 
  flex-direction: column;
}

.EdText {
  flex: 1;
}


/* CV Import end */

@media (max-width:900px) {
  .body-col {
  flex: 0 1 60%;
  }
    .bio-card {
  flex: 0 1 24%;
  }
}

@media (max-width:768px) {
  .container, .award-box {
  flex-direction: column;
  align-items: stretch;
  }
  
  .body-col, .bio-card {
  flex: none;
    z-index: 1;
}
  
  
   .bio-card, .title-card {
    order: 0;
    position: relative;
     top: auto;
  }
  
  .title-card {
    display: block;
  }
  
   .bio-card img {
  width: 125px;
  height: auto;
  border-radius: 1rem;
  margin-top: -2rem;
    margin-bottom: 0;
  display: block;
  margin-right: 1rem;
  margin-left: -2.5rem;
  float: left;
}
}

body {
  font-family: arial, sans-serif;
}

/* navigation */

  .navBar {
  overflow: hidden;
  width: 100%;
  position: sticky;
  top: 0;
}

#KJBar {
  transition: padding 0.5s, background 0.25s;
  padding: 5px 8px;
  margin-left: -8px;
}

.navBar img {
  max-width: 1rem;
  max-height: 1rem;
}

.navBar a {
  padding: 21px;
  text-decoration: none;
  color: #000;
  background-color: transparent;
  float: left;
  display: block;
  text-align: center;
  margin: 0 18px;
  font-size: 18px;
  text-decoration: 4px rgb(159, 148, 183, 0.0) underline;
  transition: scale 0.25s, text-decoration 0.5s;
}

.navBar img:hover {
  scale: 1.2;
}

.navBar a:hover {
  scale: 1.1;
  text-decoration: 4px darkred underline;
}

.navBar a.active {
  text-decoration: 4px black underline;
}

.navBar a.active:hover {
  text-decoration: 4px darkred underline;
}

a.hideBig {
  display: none;
    cursor: default;
     position: absolute;
  top: 0.25rem;
  right: 0;
}



@media screen and (max-width: 768px) {
  .navBar a:not(:first-child) {display: none;}
  .navBar a.hideBig {
    float: right;
    display: block;
  }
  }

  @media screen and (max-width: 768px) {
    .navBar.go {position: sticky;}
    .navBar.go .hideBig {
      position: absolute;
      top: 0.25rem;
      right: 0;
    }
      .navBar.go a {
    float: none;
    display: block;
    text-align: left;
  }
 
  
    
    .navBar a:hover {
 scale: 1;
}
}