html {
    display: flex;
    height: 100%;
    width: 100%;
    color: var(--color-text);
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 375px;
    min-height: 100%;
    margin: 0;
    background-color: var(--color-dark-background);
}

#page-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: stretch;
    align-self: center;
    max-height: 100vh;
    overflow-y: scroll;
}

#page-content-container {
    display: flex;
    max-width: 1200px;
    flex-direction: column;
    gap: 32px;
    padding: 32px 16px 32px 16px;
}

#page-content-header {
    display: flex;
    flex-direction: column-reverse;
    gap: 32px;
    padding-bottom: 32px;
    border-bottom: 2px solid var(--color-light-background);
}

#page-content-header-title {
    flex-grow: 1;
}

#page-content-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

#page-content-footer {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 32px;
    border-top: 2px solid var(--color-light-background);
}

#page-content-footer-segments-container {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 32px;
}

.page-content-footer-segment {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 16px;
}

#page-content-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: inherit;
}

#page-content-footer-images-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

#page-content-footer-social-links-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.page-content-footer-image {
    width: 200px;
    height: 100px;
    object-fit: contain;
}

#page-notifications {
    position: absolute;
    max-width: 85%;
    right: 32px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 16px;
}

@media (min-width: 710px) {
    #page-content-header {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    
    #page-content-container {
        padding: 64px 24px 64px 24px;
    }

    #page-content-main {
        align-items: start;
    }

    #page-content-footer-images-container {
        gap: 24px
    }

    #page-content-footer-segments-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 56px;
    }

    #page-content-footer-social-links-container {
        gap: 24px;
    }

    #page-notifications {
        right: 48px;
        bottom: 32px;
    }
}

@media (min-width: 1200px) {
    body {
        flex-direction: row;
    }

    #page-content {
        align-self: unset;
        align-items: center;
    }

    #page-content-container {
        padding: 64px 32px 64px 32px;
    }

    #page-content-footer-images-container {
        gap: 32px
    }

    #page-content-footer-social-links-container {
        gap: 32px;
    }

    #page-notifications {
        right: 56px;
        bottom: 48px;
    }
}