/* =========================
   CSS Variables
   ========================= */

:root {
    --content-text-line-height: 0.8em;
    --content-text-padding-left: 2px;
}

/* =========================
   Face General Elements
   ========================= */

.face-portfolio html {
    overflow-x: hidden;
    overflow-y: hidden;
}

.face-portfolio {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* =========================
   Face-specific elements
   ========================= */

.face-portfolio #notebook-label {
    width: 35%;
    max-width: 50%;
    max-height: 90%;
    transform: rotate(2deg);
}

.face-portfolio .notebook-tape {
    position: absolute;
    width: 4.5em;
    height: 1.2em;
    background-color: #80a7fcEE;
    transform: rotate(-35deg);
}

.face-portfolio #notebook-label-content {
    width: 100%;
    border:solid 5px #fff;
    position: relative;

    background-image: linear-gradient(#d5d5d5 1px, transparent 1px), linear-gradient(to right, #d5d5d5 1px, #ffffff 1px);
    background-size: 20px 20px;

    display: flex;
    flex-direction: column;

    padding: 10px 0;
}

.face-portfolio #notebook-label-content:hover {
    background-image: linear-gradient(#d5d5d5 1px, transparent 1px), linear-gradient(to right, #d5d5d5 1px, #e7a07e 1px);
    background-size: 20px 20px;
}

.face-portfolio #notebook-signature {
    display: flex;
    justify-content: center;
}

.face-portfolio #notebook-title {
    position: absolute;
    bottom: 0;
    right: 0;
    flex-shrink: 0;
    text-align: right;
    font-size: var(--content-text-font-size);
    line-height: var(--content-text-line-height);
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow:
        2px 2px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}



/* =========================
   Links
   ========================= */
.face-portfolio a {
    color: inherit;
    text-decoration: none;
}

/* =========================
   Responsive Design
   ========================= */
@media (max-width: 1024px) and (orientation: portrait) {
    :root {
        --content-text-font-size: 1.9em;
    }

    .face-portfolio #notebook-label {
        width: 70%;
        max-width: 70%;
    }
}