.container {
    max-width: 1570px;
}

@media (max-width: 1600px) {
    .container {
        max-width: 1200px;
    }
}

body {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

/*
* Header
*/
.header-title {
    font-size: 3rem;
}

.header-picture {
    aspect-ratio: 1/0.52;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

@media (max-width: 992px) {
    .header-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 390px) {
    .header-title {
        font-size: 2rem;
    }
}

/*
* Section
*/
.description {
    line-height: 1.75rem;
    color: #3F4042;
}

.donation-button {
    color: #ffffff;
    background-color: #000000;
    text-decoration: none;
    padding: 1rem 2rem;
    border: 1px solid #000000;
    letter-spacing: 1px;
    transition: all 0.2s ease;
}
.donation-button:hover {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    color: #ffffff;
    background-color: #323334;
    border-color: #323334;
}
.donation-button > .arrow {
    display: inline-block;
    opacity: 0;
    width: 0;
    height: 100%;
    font-size: 1.2rem;
    overflow: hidden;
    transition: width 0.2s ease, opacity 0.2s ease;
}
.donation-button:hover > .arrow {
    width: 1.3rem;
    opacity: 1;
}

@media (max-width: 390px) {
    .donation-button:hover > .arrow {
        align-items: center;
    }
}

/*
* Projects
*/
.project-link {
    text-decoration: none;
}
.project-link > * {
    pointer-events: none;
}

.project-title {
    font-size: 1.25rem;
}

.project-picture {
    aspect-ratio: 1/0.755;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


/*
* Custom Text
*/
.text-mono {
    font-family: 'Roboto Mono';
}
.text-condensed {
    font-family: 'Roboto Condensed';
}
.text-rubik {
    font-family: 'Rubik';
}
.fw-medium {
    font-weight: 500;
}

/*
* Modal
*/

.modal-dialog-top {
    top: 0;
}

#project-modal > .modal-dialog {
    background-color: rgba(24, 24, 24, 0.78);
    max-width: 37.5rem !important;
}

#project-modal > .modal-dialog * {
    background-color: transparent;
    color: white;
}

.project-modal-picture {
    aspect-ratio: 1/0.755;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: 16.8rem;
}

@media (max-width: 390px) {
    .project-modal-picture {
        width: 100%;
        height: auto;
    }
}


#project-modal-content * {
    font-family: 'Rubik';
}

#project-modal-content p {
    margin-bottom: 0.5rem;
}

#project-modal-content :last-child {
    margin-bottom: 0 !important;
}

@media (min-width: 576px) {
    #project-modal .modal-body {
        margin-top: -1rem;
    }
}