/* APPLICATION STYLES */

/* APP */

.app-container {
    width: 100%;
    min-height: 100%;
    max-width: 720px;

    background: #FFFFFF;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.06);

    padding: 1.5rem;
}

.app-header {
    width: 100%;
    height: auto;
}

.app-main {
    width: 100%;
    height: auto;
}

.app-footer {
    width: 100%;
    height: auto;
    padding: 2rem 0;
    color: var(--color-text-soft);
}

.app-footer p {
    text-align: center;
    text-indent: 0cm;
}

/* PROJECTS */

.project-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 32px;
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: 16px;

    flex-grow: 1;
    align-items: stretch;

    background: #FFFFFF;
    border: 1px solid #D9D3C8;
    border-radius: 8px;

    padding: 16px;

    max-width: 315px;
}

.project-card figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.project-card figure img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.project-card-information {
    align-items: stretch;
}

.project-card-information header {
    text-align: center;
}

.project-card-information footer {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.project-card-header {
    display: flex;
    justify-content: center;

    flex-direction: column;
    text-align: center;
}

.project-card-header time {
    margin-top: -16px;
}

.technologies {
    display: flex;
    gap: 8px;
    
    width: 100%;
    
    justify-content: center;
    
    margin: 0px;
    padding: 16px;

    list-style: none;
    flex-wrap: wrap;
}

.technology-item {
    text-align: center;
    min-width: 40px;

    border-style: solid;
    border-radius: 8px;
    border-color: var(--color-border);
    border-width: 1px;

    padding: 8px;
}

/* EDUCATION */

.education-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 32px;
}

.education-section {
    border-style: solid;
    border-width: 1px;
    border-color: #D9D3C8;
    border-radius: 8px;

    padding: 16px;
}

.education-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.education-item-title {
    font-family: var(--font-title);
    color: var(--color-text);
    line-height: 1.2;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.5rem;

    text-align: center;
}

.education-item-emphasis {
    text-align: center;
    text-indent: 0cm;

    /* background-color: var(--color-border); */

    border-style: solid;
    border-radius: 8px;
    border-color: var(--color-border);
    border-width: 1px;

    padding: 16px;
    border-radius: 8px;
}

/* CARDS */

.card-item-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;

    justify-content: center;
    align-items: stretch;

    padding: 16px;
    margin-bottom: 32px;
}

.card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    background: #FFFFFF;
    border: 1px solid #D9D3C8;
    border-radius: 8px;

    padding: 16px;
    width: 150px;

    text-align: center;
}

.card-item figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* LINKS */

.anchor-link-container {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.anchor-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--color-button-bg);
    color: black;
    border-radius: 4px;
}