@import url('https://fonts.googleapis.com/css?family=Noto+Serif');
@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro');

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

table, tr {
    border: 3px solid black;
    border-collapse: collapse;
}

.red {
    color: red;
}

.gray {
    color: gray;
}

.hidden {
    display: none;
}

#table-of-content {
    width: 500px;
    max-height: 850px;
    right: 50px;
    background-color: lightgray;
    overflow: auto;
    font-size: 70%;
    position: fixed;
    border: 2px solid black;
    border-radius: 20px;
    z-index: 5;
    padding: 30px;
}


a {
    text-decoration: none;
}

body.fadein{
    animation: fadein 0.5s;
}

body.fadeout{
    animation: fadeout 0.2s;
}

html, body, h2, h3, h4, div, p {
    margin: 0;
    padding: 0;
    overflow: hidden;

    font-family: "Source Serif Pro", sans-serif;
}

html {
    width: 1920px;
    height: 1080px;
    font-size: 2.1em;
}

body {
    background-color: rgb(220,240,240);
}

ul {
    margin:0;
    list-style-type: none;
}

body.article > #content {
    border: 2px solid gray;
    background-color: white;
    /*background-color: rgb(200,200,250);*/
    border-radius: 15px;
    padding: 30px;


    margin: 30px;
    width: calc(1920px - 30px * 4);
    height: calc(1080px - 30px * 4);
}


.horizontal {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
}


h2 {
    /* margin-left: 60px;
    margin-top: 30px;*/
    margin-bottom: 40px;

    font-size: 180%;
    font-weight: 400;
    color: darkblue;

}



.block-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.darkgreen {
    color: darkgreen;
}

.pro {
    display: flex;
    justify-content: center;
    color: darkgreen;
    font-size: 90%;
    text-align: left;
}

.pro ul {
    list-style-type: none;
}

.list-no-bullet ul {
    list-style-type: none;
}



.text-align-left {
    text-align: left;
}
.text-align-center {
    text-align: center;
}


.background-yellow {
    background-color: yellow;
}

#navigator-prev-next path{
    fill: gray;
}
#navigator-prev-next a:hover path{
    fill: blue;
}

.navigator-element-next {
    width: 30px;
    position: fixed;
    bottom: 15px;
    right: 140px;
}


.navigator-element-prev {
    width: 30px;
    position: fixed;
    bottom: 15px;
    right: 190px;
}

#menu {
    width: 30px;
    position: fixed;
    bottom: 28px;
    right: 240px;
}
#menu path{
    fill: gray;
}
#menu:hover path{
    fill: blue;
}


#page-number {
    position: fixed;
    bottom: 30px;
    right: 50px;
}

/* h1 {
    background-color: red;
}

.flexbox-vertical {
    display: flex;
    flex-direction: column;
    
}
.flexbox-horizontal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
} */






.CodeRay .debug {
    color: #fff !important;
    background: #000080 !important
}

.CodeRay .annotation {
    color: #007
}

.CodeRay .attribute-name {
    color: #000080
}

.CodeRay .attribute-value {
    color: #700
}

.CodeRay .binary {
    color: #509
}

.CodeRay .comment {
    color: #79A;
    font-style: italic
}

.CodeRay .char {
    color: #04d
}

.CodeRay .char .content {
    color: #04d
}

.CodeRay .char .delimiter {
    color: #039
}

.CodeRay .class {
    color: #458;
    font-weight: bold
}

.CodeRay .complex {
    color: #a08
}

.CodeRay .constant, .CodeRay .predefined-constant {
    color: #008080
}

.CodeRay .color {
    color: #099
}

.CodeRay .class-variable {
    color: #369
}

.CodeRay .decorator {
    color: #b0b
}

.CodeRay .definition {
    color: #099
}

.CodeRay .delimiter {
    color: #000
}

.CodeRay .doc {
    color: #970
}

.CodeRay .doctype {
    color: #34b
}

.CodeRay .doc-string {
    color: #d42
}

.CodeRay .escape {
    color: #666
}

.CodeRay .entity {
    color: #800
}

.CodeRay .error {
    color: #808
}

.CodeRay .exception {
    color: inherit
}

.CodeRay .filename {
    color: #099
}

.CodeRay .function {
    color: #900;
    font-weight: bold
}

.CodeRay .global-variable {
    color: #008080
}

.CodeRay .hex {
    color: #058
}

.CodeRay .integer, .CodeRay .float {
    color: #099
}

.CodeRay .include {
    color: #555
}

.CodeRay .inline {
    color: #000
}

.CodeRay .inline .inline {
    background: #ccc
}

.CodeRay .inline .inline .inline {
    background: #bbb
}

.CodeRay .inline .inline-delimiter {
    color: #d14
}

.CodeRay .inline-delimiter {
    color: #d14
}

.CodeRay .important {
    color: #555;
    font-weight: bold
}

.CodeRay .interpreted {
    color: #b2b
}

.CodeRay .instance-variable {
    color: #008080
}

.CodeRay .label {
    color: #970
}

.CodeRay .local-variable {
    color: #963
}

.CodeRay .octal {
    color: #40e
}

.CodeRay .predefined {
    color: #369
}

.CodeRay .preprocessor {
    color: #579
}

.CodeRay .pseudo-class {
    color: #555
}

.CodeRay .directive {
    font-weight: bold
}

.CodeRay .type {
    font-weight: bold
}

.CodeRay .predefined-type {
    color: inherit
}

.CodeRay .reserved, .CodeRay .keyword {
    color: #000;
    font-weight: bold
}

.CodeRay .key {
    color: #808
}

.CodeRay .key .delimiter {
    color: #606
}

.CodeRay .key .char {
    color: #80f
}

.CodeRay .value {
    color: #088
}

.CodeRay .regexp .delimiter {
    color: #808
}

.CodeRay .regexp .content {
    color: #808
}

.CodeRay .regexp .modifier {
    color: #808
}

.CodeRay .regexp .char {
    color: #d14
}

.CodeRay .regexp .function {
    color: #404;
    font-weight: bold
}

.CodeRay .string {
    color: #d20
}

.CodeRay .string .string .string {
    background: #ffd0d0
}

.CodeRay .string .content {
    color: #d14
}

.CodeRay .string .char {
    color: #d14
}

.CodeRay .string .delimiter {
    color: #d14
}

.CodeRay .shell {
    color: #d14
}

.CodeRay .shell .delimiter {
    color: #d14
}

.CodeRay .symbol {
    color: #990073
}

.CodeRay .symbol .content {
    color: #a60
}

.CodeRay .symbol .delimiter {
    color: #630
}

.CodeRay .tag {
    color: #008080
}

.CodeRay .tag-special {
    color: #d70
}

.CodeRay .variable {
    color: #036
}

.CodeRay .insert {
    background: #afa
}

.CodeRay .delete {
    background: #faa
}

.CodeRay .change {
    color: #aaf;
    background: #007
}

.CodeRay .head {
    color: #f8f;
    background: #505
}

.CodeRay .insert .insert {
    color: #080
}

.CodeRay .delete .delete {
    color: #800
}

.CodeRay .change .change {
    color: #66f
}

.CodeRay .head .head {
    color: #f4f
}