body {
    margin: 0;
}

p1 {
    display: block;
    font-family: monospace;
    font-size: 3em;
    margin: 1.5em auto 4em auto;
    width: fit-content;
}

.first-letter {
    position: relative;
    top: 0;
    transition: top 0.2s ease-in-out;
}
.first-letter:hover {
    top: 0.15em;
}

.projects-container {
    margin: 5% 20%;
}

.project-card {
    margin-top: 5em;

    background-color: #fffdde;
    border: dashed black 1px;
    font-family: monospace;
}

.project-content {
    padding: 3%;
}

.project-content .img-container {
    display: flex;
    justify-content: center;
}

.project-content img {
    max-width: 70%;
}

p2 {
    font-weight: bold;
    font-size: 1.8em;
}

.summary-dates {
    text-align: right;
    font-size: 0.9em;
}

.project-link {
    display: block;
    padding: 1%;

    font-size: 1.5em;
    text-align: center;

    background-color: #f5f38c;
    color: black;
}

.project-link:hover {
    background-color: #f5f262;
}

.extended-summary-control {
    display: none;
}

.btn-more {
    font-weight: bold;
    text-decoration: underline;
}
.btn-more:hover {
    cursor: pointer;
}

.text-less {
    display: none;
}

.extended-summary-control:checked + label > .text-less {
    display: inline;
}

.extended-summary-control:checked + label > .text-more {
    display: none;
}

.extended-summary {
    display: none;
}

.extended-summary-control:checked + label + .extended-summary {
    display: block;
}