body{
background-image:url("../../Credits/background/me.png") ;
 font-family: "Dico", sans-serif;
 background-attachment: fixed;
 background-size: cover;
}

.headerwrapper h2{
  display: flex;
  justify-content: center;
}





a:link{color:#311f10;}
a:visited{color:#694120;}
a:hover{color:#24160b;}

.center{
  display: flex;
  justify-content: center;
}

.button  {
  border-color: #24160b;
}

.headerwrapper{
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}


.box {
    border:2px #EED9C4 solid;
    background-color: rgb(204, 177, 165, 0.6);
    background-size: fit;
    padding: 20px;
    border-radius: 10px;
    color:#6c3421;
    padding:35px;
    margin: 20px;
    max-width:700px;
    min-width: 700px;
    font-weight: 700;
    }
    
h1 { margin-bottom:3px; }

.text h3 {margin: 5px; margin-top: 15px;}
p{ margin:5px;}

.pale{color:#6c5f40; margin-top: 4px;}

.box1 { 
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}
.box1 img {
  max-width:250px;
  margin-left: 20px;
}

.box2 { 
  display: flex;
  flex-direction:column;
  margin-top: 10px;
}
 .list{
   margin-left: 20px;
 } 
.transparent{min-width:50px;}
.interests img{max-width:30px;}
.column3 img {max-width: 150px; margin:10px;}

.box11 { display: grid; grid-template-columns: 1fr 1fr; gap:10px }
.box12 {
  border:solid 3px #383b6f;
  padding:10px;
}

.box12 .header{display: flex; align-content: center;}

#overlay {
  position: fixed;
  top: 0;
  left:  0;
  width: 100%;
  height:  100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}

.clickable {
  cursor: pointer;
}
 {}