body {
  background:#8b7238;
  background-image: url("https://www.transparenttextures.com/patterns/blu-stripes.png");
  width:100%;
  height:1000px;
  overflow-x:hidden;
  padding-top:20px;
}

.sidebar {
  background:#401618;
  width:200px;
  align-items:center;
  padding:20px;
  border-radius:10px 0px 0px 10px;
}

.profilepicture {
  background-image:url("https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/108416329_6PM.png");
  background-color:#4f5648;
  background-size:cover;
  border:3px solid #280d12;
  outline:3px solid #f6f2cc;
  height:150px;
  width:150px;
  border-radius:100%;
  transition:0.4s ease-in-out;
}

.profilepicture:hover {
  transform:scale(1.1);
}


.portfolio {
  background:#4e2c1a;
  width:1000px;
  border-radius:0px 10px 10px 0px;
  max-height:719px;
  overflow-y:auto;
}

.portfolio p {
  color:#f6f2cc;
  text-align:center;
}

h3 {
  color:#f6f2cc;
  text-align: center;
  font-weight:bold;
}

/* tabs */

.tab {
  overflow: hidden;
  background-color: transparent;
  padding-left:7px;
  padding-right:7px;
}

.tab button {
  background-color: inherit;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  width:100%;
  background:#b09a4c;
  border:3px solid #684624;
  outline:none;
  margin-top:5px;
  margin-bottom:5px;
  border-radius:8px;
  font-weight:600;
  color:#3f1418;
}

.tab button:hover {
  background-color: #917637;
}

.tab button.active {
  background-color: #896f34;
  color:#f6f2cc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border-top: none;
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}


@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}