h1 {
    text-align: center;
    color: black;
    background-color: white;
    font-size: 45px;
}
.clickable {
    position: relative;
    width: 28%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#wrapper{
    height: fit-content;
}
/* resize the shape of the image to round */
/* use width & height in px to make sure it doesn't change when resize the browser */
.image {
    position: relative;
    opacity: 1;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    display: block;
    height: 50%;
    width: 70%;
    overflow: hidden; 
    transition: .5s ease;
    max-width: 500px;
    object-position: center center;
    /* contain: layout; */
    /* width: auto;
    max-width: 100%;
    height: auto; */
    /* flex: 1;
    padding: 20px; */
}
.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}
.clickable:hover .image {
    opacity: 0.3;
}
.clickable:hover .middle {
    opacity: 1;
}
/* Change the resume clickable text */
.text {
    background-color: black;
    color: white;
    font-size: 19px;
    padding: 9px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

p{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
    color: black;
    font-size: 20px;
}
a.linkedin{
    margin-right: 10px;
    text-decoration: none;
    color: #2867B2;
}
h2{
    text-align: left;
    margin: 20px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 25px;
    margin-right: 3%;
    margin-left: 1%;
}

#About{
    text-align: left;
    margin: 20px;
    margin-right: 3%;
    margin-left: 1%;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 20px;
}

a:visited, a:hover, a:focus {
    text-decoration: none;
}

a.instagram {
    margin-right: 10px;
    text-decoration: none;
    color: #833AB4;
}
a[title~="Email"] {
    margin-right: 10px;
    text-decoration: none;
    color: #0072C6;
}
.download {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
    color: black;
    font-size: 20px; 
}
a.pdf {
    margin-right: 10px;
    text-decoration: none;
    color: #ff000d;
    font-size: xx-large;
}
h3{
    text-align: left;
    margin: 20px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 25px;
    margin-right: 3%;
    margin-left: 1%;
}
.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.flex-container div {
    flex: 1;
    padding: 20px; /* don't change the padding */
}
/* books picture size */
.dalai, .alchemist, .yourself, .food{
    height: 370px;
}

footer{
    clear: both;
    margin-top: 2%;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin-right: 3%;
    margin-left: 1%;
    font-size: 20px;
}