@import 'stylesheets/fontawesome/css/fontawesome.css';
@import 'stylesheets/fontawesome/css/brands.css';
@import 'stylesheets/fontawesome/css/regular.css';
@import 'stylesheets/fontawesome/css/solid.css';
@import 'stylesheets//unsemantic/stylesheets/unsemantic-grid-responsive.css';

@import 'stylesheets/chem-elements.css';
@import 'stylesheets/footer.css';
@import 'stylesheets/header.css';
@import 'stylesheets/identities.css';
@import 'stylesheets/intro.css';
@import 'stylesheets/labels.css';

body {
    background: url(./assets/images/plus.svg) #f5f5f5;
    background-size: 8em;

    font-size: 1em;
    margin: 0;
    min-height: 100vh;
    padding: 5vh 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

html {
    font-family: 'Helvetica Neue', Helvetica, Arial, PingFangTC-Light, 'Microsoft YaHei', 微软雅黑, 'STHeiti Light',
        STXihei, '华文细黑', Heiti, 黑体, sans-serif;
    margin: 0;
    padding: 0;
}

#container {
    background: url(./assets/images/container-background.svg) rgb(177, 177, 177);
    background-size: cover;
    box-shadow: 0 0 0.15em 0.15em rgba(0, 0, 0, 0.125);
    padding-top: 1em;
    margin: 0 auto;
    max-width: 64em;
}

.section.intro {
    background: rgba(255, 255, 255, 0.95);
}

.no-wrap {
    display: inline-block;
}

#container,
#container > *:first-child {
    border-top-left-radius: 2em;
}

#container,
#container > *:last-child,
#container > *:last-child > *:last-child {
    border-bottom-right-radius: 2em;
}

.header .small-labels .group::before,
.header .small-labels .label::before {
    color: #eee;
}

.identities .small-labels .group::before,
.identities .small-labels .label::before {
    color: #333;
}

@media (max-width: 768px) {
    body {
        padding: 0;
    }

    #container {
        padding: 0;
    }

    #container,
    #container > *:first-child {
        border-top-left-radius: 0;
    }

    #container,
    #container > *:last-child,
    #container > *:last-child > *:last-child {
        border-bottom-right-radius: 0;
    }

    .section.header {
        /* background: rgba(255, 255, 255, 0.75); */
    }

    .intro .block .split {
        padding: 0 0.5em;
    }

    .intro p {
        border-left: none;
        padding: 0.2em;
    }
}