body {
    min-width: 320px;
    position: relative;
    background: #eee;
}

header,
main,
footer,
.container,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-1-sm,
.col-2-sm,
.col-3-sm,
.col-4-sm,
.col-5-sm,
.col-6-sm,
.col-7-sm,
.col-8-sm,
.col-9-sm,
.col-10-sm,
.col-11-sm,
.col-12-sm {
    overflow: hidden;
}

header {
    background:#5d2e92;
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
    position: relative;
}

header h1 {
    color: #fff;
}

header h1 > small {
    display: block;
    font-size: 1.3rem;
    color: #e9fff2;
}

#header-menu > a {
    float: left;
    padding: 6px 10px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

#header-menu > a:hover {
    background: #438984;
}

p {
    line-height: 1.35;
}

ul, ol {
    font-size: 1.125rem;
}

ul > li, ol > li {
    margin-bottom: 6px;
}

pre {
    line-height: 1.3;
}

pre .hljs {
    background: none;
    padding: 5px 5px 5px 20px;
}

main {
    background: #fff;
    padding-bottom: 20px;
}

a {
    font-weight: bold;
    color: #5d2e92;
}

a:hover {
    color: #448d87;
}

i {
    font-style: italic;
    font-weight: bold;
    color: #912929;
}

table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}

tr:nth-child(odd) {
    background: #f3f3f3;
}

th {
    background: #dfdfdf;
    font-weight: bold;
    padding: 10px;
}

td {
    padding: 5px 10px;
}

footer p,
footer a {
    font-size: 14px;
    line-height: 1.25;
}

.flex-img {
    display: table;
    margin: 0 auto;
    width: 60%;
}

.size-1 { width: 8.33%; }
.size-2 { width: 16.66%; }
.size-3 { width: 25%; }
.size-4 { width: 33.33%; }
.size-5 { width: 41.66%; }
.size-6 { width: 50%; }
.size-7 { width: 58.33%; }
.size-8 { width: 66.66%; }
.size-9 { width: 75%; }
.size-10 { width: 83.33%; }
.size-11 { width: 91.66% }
.size-12 { width: 100% }

.size-12.border {
    width: 99%;
    border: 1px solid #979797;
}

.border {
    border: 1px solid #979797;
}

#aside-menu-title {
    font-size: 1.4rem;
    margin: 0;
    text-align: center;
    padding: 10px;
    border: 3px solid #5d2e92;
    margin-top: 30px;
    background: #5d2e92;
    color: #fff;
}

#aside-menu > a {
    display: block;
    padding: 6px;
    text-decoration: none;
}

#aside-menu > a:hover {
    background: #2e5e5a;
    color: #fff;
}

.definition {
    background: #ffe7e7;
    padding: 10px 30px;
    margin: 10px 0;
}

.annotation {
    margin: 2.5rem 3.5rem;
}

.annotation h3 {
    font-size: 1.0rem;
}

.annotation p {
    font-size: 0.9rem;
}

.definition p,
.definition ol,
.definition ul, {
    font-weight: bold;
}

.definition strong {
    color: #912929;
}

.rule {
    background: #e4fff5;
    padding: 10px 30px;
    margin: 10px 0;
}

.rule p,
.rule ul,
.rule ol {
    font-style: italic;
    font-weight: bold;
}

.rule pre {
    font-size: 1.45rem;
    font-weight: bold;
}

figure {
    margin: 0;
}

figure > img {
    display: block;
    margin: 5px auto;
}

figure > figcaption {
    margin: 15px 0 30px;
    text-align: center;
}

a.lesson {
    text-decoration: none;
}

.box-lesson {
    background: linear-gradient(#e9e9e9,#f5f5f5);
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    padding: 0 20px 0 30px;
    margin-top: 30px;
    text-decoration: none;
}

.box-lesson:hover {
    background: #f5fffe;
    border: 1px solid #2e5e5a;
    font-weight: bold;
}

.box-lesson p {
    font-size: 1.0rem;
}

iframe {
    width: 100%;
    height: 480px;
}

.vert-margin {
    margin-top: 1.5rem;
}

#up {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 60px;
    text-decoration: none;
    opacity: 0.65;
}

#up:hover {
    background: rgba(0,0,0,0.05);
    opacity: 1;
}

#up-icon {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 30px;
    height: 30px;
    margin: 15px;
}

@media only screen and (max-width: 720px) /*and (min-width: 320px)*/ {
    .container {
        width: 100%;
        margin: 0 auto;
    }

    .row [class^="col"] {
        float: none;
        margin: 0.5rem 1.0rem;
    }

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        width: 94%;
    }
    
    #header-menu > a {
        display: block;
        float: none;
        border-top: 1px solid #438984;
    }

    .flex-img {
        display: table;
        margin: 0 auto;
        width: 30%;
    }

    .size-1,
    .size-2,
    .size-3,
    .size-4,
    .size-5,
    .size-6,
    .size-7,
    .size-8,
    .size-9,
    .size-10,
    .size-11,
    .size-12 {
        width: 96%;
    }

    .size-m {
        max-width: 100%;
        height: auto;
    }
    
    .size-m-1 { width: 16.66%; }
    .size-m-2 { width: 33.33%; }
    .size-m-3 { width: 50.00%; }
    .size-m-4 { width: 66.66%; }
    .size-m-5 { width: 83.33%; }
    .size-m-6 { width: 100.00%; }

    .hidden {
        display: none;
    }
}

@media only screen and (max-width: 320px) {
    body {
        font-size: 0.8rem;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.1rem; }
    h4 { font-size: 0.9rem; }
    h5 { font-size: 0.8rem; }
    h6 { font-size: 0.7rem; }

    p {
        font-size: 0.9rem;
        line-height: 1.15;
    }
      
    pre { font-size: 0.9rem; }

    header h1 > small {
        font-size: 1.05rem;
    }
    
    ul, ol {
        font-size: 0.9rem;
    }
    
    ul > li, ol > li {
        margin-bottom: 3px;
    }
    
    pre {
        line-height: 1.0;
    }
    
    footer p,
    footer a {
        line-height: 1.15;
    }
    
    .size-1,
    .size-2,
    .size-3,
    .size-4,
    .size-5,
    .size-6,
    .size-7,
    .size-8,
    .size-9,
    .size-10,
    .size-11,
    .size-12 { 
        width: 100% 
    }
    
    .size-12.border {
        width: 98%;
    }
    
    #aside-menu-title {
        font-size: 0.92rem;
    }
    
    .definition {
        padding: 7px 15px;
        margin: 10px 0;
    }
    
    .annotation {
        margin: 1.6rem 2.24rem;
    }
    
    .annotation h3 {
        font-size: 0.65rem;
    }
    
    .annotation p {
        font-size: 0.6rem;
    }
    
    .rule {
        padding: 7px 15px;
    }

    .rule pre {
        font-size: 1.15rem;
        font-weight: bold;
    }
    
    .box-lesson {
        padding: 0 20px 0 30px;
        margin-top: 30px;
    }

    .box-lesson p {
        font-size: 1.0rem;
    }
    
    iframe {
        width: 100%;
        height: 480px;
    }
    
    .vert-margin {
        margin-top: 1.2rem;
    }
}