/* About page style */

/* Color themes */
.theme-light {
    --color-font: #24292f;      /* Same as style.css */
}
.theme-dark {
    --color-font: #c9d1d9;      /* Same as style.css */
}

h1 {
    text-align: center;
}

cite {
    display: block;
    width: 64%;     /* 80% (fixed value) of 80% (bio width) */
    margin: 20px auto 20px;
    color: var(--color-font);
    text-align: justify;
}

/* Bio */
#bio {
    display: block;
    width: 80%;
    margin: 20px auto 20px;
    color: var(--color-font);
    text-align: justify;
    min-height: 320px;      /* profilepic height */
}

#profilePic {
    float: left;
    margin-right: 20px;
}

#bio a {
    text-decoration: none;
}

#bio a:hover, .content a:active {
    text-decoration: underline;
}

/* Subtitles */
h3 {
    margin-top: 30px;
    text-align: left;
}

/* Donation, RSS, copyright & disclaimer sections */
.aboutInfo {
    display: block;
    width: 80%;
    margin: 20px auto 20px;
    color: var(--color-font);
    text-align: justify;
}

#kofibtn {
    margin: 20px auto 20px;
    text-align: right;
}

.aboutInfo a {
    text-decoration: none;
}

.aboutInfo a:hover, .content a:active {
    text-decoration: underline;
}

.aboutInfo ul {
    list-style-type: square;
    margin-top: -16px;      /* preventing space between paragraph and list */
}

/* Create some space before the footer */
footer {
    margin-top: 120px;
}

/* On smaller screens, where width is less than 960px, set width to full page */
@media screen and (max-width: 960px) {
    cite {width: 76%;}  /* 80% (fixed value) of 95% (bio width) */
    #bio {width: 95%;}
    .aboutInfo {width: 95%;}
    .aboutInfo ul {padding-left: 25px;}
} 
/* On smaller screens, where width is less than 640px, set img as block centered */
@media screen and (max-width: 640px) {
    #profilePic {
        float: none;
        display: block;
        max-width: 95%;
        margin: 0px auto 0px;
    }
} 
/* On bigger screens, where width is more than 1350px, set cite centered */
@media screen and (min-width: 1350px) {
    cite {text-align: center;}
}