@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap");

.github {
    text-decoration: none;
    color: #24292f;
    font-family: "Source Han Gothic";
    font-size: 30pt;
}
.logo {
    width: 300pt;
    margin-left: auto;
    margin-right: auto;
    margin-top: 125pt;
    display: block;
}
.contact_container {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-left: 50pt;
    margin-bottom: 20pt;
}
.project-container {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10pt;
    width: 100%;
    box-sizing: border-box;
}
.project {
    display: flex;
    flex-direction: column;
    width: calc((100% - 20pt) / 3);
    box-sizing: border-box;
    border: 1px solid #cccccc;
    backdrop-filter: blur(10px);
    border-radius: 15pt;
    padding: 15pt;
}
.project p {
    flex-grow: 1;
    margin-bottom: 15pt;
}
.project hr {
    width: 100%;
    border: none;
    border-top: 1px solid var(--outline-color);
    margin: 10pt 0;
}
.project .link {
    align-self: flex-start;
}

.more-button-container {
    display: flex;
    justify-content: center;
    margin-top: 40pt;
    margin-bottom: 20pt;
}

.more-button {
    font-family: "Source Han Gothic", monospace;
    font-size: 16pt;
    font-weight: 500;
    color: var(--text-color);

    margin: 0pt 5pt;
    padding: 10pt 20pt;
    backdrop-filter: blur(10px);
    border: 1px solid var(--outline-color);
    border-radius: 15pt;

    text-decoration: none;
}