@import './colors.less';

@large-screen: ~"screen and (max-width: 1200px)";
@medium-screen: ~"screen and (max-width: 992px)";
@small-screen: ~"screen and (max-width: 768px)";
@xsmall-screen: ~"screen and (max-width: 480px)";

.container {
    width: 100%;
    max-width: 960px;
    position: relative;
    margin: 0 auto;
    @media @medium-screen {
        width: 85%;
    }
    @media @xsmall-screen {
        width: 90%;
    }
}
.hr-after() {
    text-align: center;
    color: lighten(@primary, 30%);
    display: block;
    content: "~~~";
    position: relative;
    font-size: 1.5rem;
}
.section {
    margin-top: 1rem;
    margin-bottom: 2rem;
    word-wrap: break-word;
}
.section:after {
    .hr-after;
}
hr {
    border: 0;
}
hr:after {
    .hr-after;
    top: -.75rem;
}
.paper {
    border: 1px solid @primary-light;
    background-color: @main-background;
    padding: 2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    -webkit-box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2);
    -moz-box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2);
    box-shadow: -1px 5px 35px -9px hsla(0,0%,0%,.2);
    @media @xsmall-screen {
        padding: 1rem;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
    }
}