/* Projects & specific project page style */

/* Color themes */
.theme-light {
    --color-content-hover: #f3f4f6;
    --color-font: #24292f;      /* Same as style.css */
    --color-date: #57606a;      /* Same as style.css footer*/
    --color-code-background: #eee;   /* Same as syle.css sidenav */
    --color-code-font: #24292f;
}
.theme-dark {
    --color-content-hover: #30363d;
    --color-font: #c9d1d9;      /* Same as style.css */
    --color-date: #8b949e;      /* Same as style.css footer*/
    --color-code-background: #161b22;
    --color-code-font: #f0f6fc;
}

h1 {
    text-align: center;
}

/* Definition of the project box style */
.content {
    display: block;
    width: 80%;
    height: 200px;
    margin: 20px auto 20px;
}

.content:hover, .content:active {
    background-color: var(--color-content-hover);
    transition: 0.2s;
}

.link {
    text-decoration: none;
    color: var(--color-font);
}

/* Project thumbnail */
.projectThumbnail {
    float: left;
    height: 100%;
    margin: 0px 20px 0px 0px;
}

/* Project info */
.projectInfo {
    height: 100%;
}

h2 {
    font-size: 20px;
    font: bold;
    margin: 0px;
    white-space: nowrap;
    overflow-x: auto;
}

.projectDescription {
    overflow-y: auto;
    height: 75%;
    text-align: justify;
    margin-top: 5px;
    margin-bottom: 5px;
}

.projectDate {
    margin-top: 0px;
    margin-bottom: 0px;
    font-style: italic;
    color: var(--color-date);
}

/* Horizontal rule transparent */
hr {
    border: none;
}

/* FOR SPECIFIC PROJECT PAGE */
/* Textbox without height limit */
#projectLog {
    display: block;
    width: 80vw;    /* using vw to prevent longline code block to expand all the page */
    margin: 20px auto 20px;
    color: var(--color-font);
    text-align: justify;
}

#projectLog img {
    display: block;
    max-width: 80%;
    margin: 5px auto 5px;
}

#projectLog a {
    text-decoration: none;
}

#projectLog a:hover, #projectLog a:active {
    text-decoration: underline;
}

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

#projectLog pre code {
    background-color: var(--color-code-background);
    color: var(--color-code-font);
    /* border-radius: 6px; */
    display: block;
    text-align: start;      /* allign left */
    white-space: pre;       /* use pre to keep line as coded (oneline) */
    margin: 5px 0px 5px;
    padding: 0px 50px;
    overflow-x: auto;
    font-size: 85%;
    font-family: 'Consolas', 'Menlo', 'Liberation Mono', monospace;
}

#backToProjectList {
    display: block;
    width: 80%;
    margin: 40px auto 20px;
    text-align: right;
}

#backToProjectList a {
    text-decoration: none;
    color: var(--color-font);
}

#backToProjectList a:hover, #backToProjectList a:active {
    text-decoration: underline;
}

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

/* End of specific project style */

/* On smaller screens, where width is less than 960px, set width to full page */
@media screen and (max-width: 960px) {
    .content {width: 95%; height: 150px;}
    .projectThumbnail {margin: 0px 10px 0px 0px;}
    .projectDescription {height: 67%;}
    /* For specific project page */
    #projectLog {width: 95vw;}      /* using vw to prevent longline code block to expand all the page */
    #backToProjectList {width: 95%;}
    #projectLog pre code {padding: 0px 30px;}
    #projectLog ul {padding-left: 25px;}
}