* {
    margin: 0;
    margin-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif    ;
}
:root {
    --rounded-corner: 12px;
    --gnomeblue: #1c71d8;
    --blue1: rgb(153,193,241);
    --blue2: rgb(98,160,234);
    --blue3: rgb(53,132,228);
    --blue4: rgb(28,113,216);
    --blue5: rgb(26,95,180);
    --green1: rgb(143,240,164);
    --green2: rgb(87,227,137);
    --green3: rgb(51,209,122);
    --green4: rgb(46,194,126);
    --green5: rgb(38,162,105);
    --yellow1: rgb(249,240,107);
    --yellow2: rgb(248,228,92);
    --yellow3: rgb(246,211,45);
    --yellow4: rgb(245,194,17);
    --yellow5: rgb(229,165,10);
    --orange1: rgb(255,190,111);
    --orange2: rgb(255,163,72);
    --orange3: rgb(255,120,0);
    --orange4: rgb(230,97,0);
    --orange5: rgb(198,70,0);
    --red1: rgb(246,97,81);
    --red2: rgb(237,51,59);
    --red3: rgb(224,27,36);
    --red4: rgb(192,28,40);
    --red5: rgb(165,29,45);
    --purple1: rgb(220,138,221);
    --purple2: rgb(192,97,203);
    --purple3: rgb(145,65,172);
    --purple4: rgb(129,61,156);
    --purple5: rgb(97,53,131);
    --brown1: rgb(205,171,143);
    --brown2: rgb(181,131,90);
    --brown3: rgb(152,106,68);
    --brown4: rgb(134,94,60);
    --brown5: rgb(99,69,44);
    --light1: rgb(255,255,255);
    --light2: rgb(246,245,244);
    --light3: rgb(222,221,218);
    --light4: rgb(192,191,188);
    --light5: rgb(154,153,150);
    --dark1: rgb(119,118,123);
    --dark2: rgb(94,92,100);
    --dark3: rgb(61,56,70);
    --dark4: rgb(36,31,49);
    --dark5: rgb(0,0,0);
    --text: #f6f5f4;
  }

body {
    background: var(--dark3);
    color: var(--text);
}

#page-wrapper {
    display: flex;
    min-height: 100%;
    align-content: center;
    padding-left: 300px;
    padding-right: 300px;
    flex-direction: column;
    margin: 50px;
}

.posts li {
    background: var(--dark2);
    padding: 20px;
    border-radius: var(--rounded-corner);
    list-style-type : none;
    transition: 200ms ease-in-out;
    border: 0px solid transparent;
    margin: 0;
}

.posts {
    padding: 0;
}

.posts * {
    margin: 0;
    margin-bottom: 10px;
}

.posts li {
    margin: 20px 0;
}

.posts li h2, .posts a {
    margin-bottom: 10px;
    color: var(--text);
    text-decoration: none;
}

.posts li:hover {
    transform: scale(1.05);
    margin-bottom: 20px;
    border: 5px solid var(--gnomeblue);
}

.headerbar {
    display: flex;
    flex-direction: row;
}

.headerbar * {
    margin-right: 10px;
}

.headerbar a {
    color: var(--text);
}

.yok {
    color: var(--light5);
}

@media (max-width: 1000px) {
    * {
        margin: 2px !important;
        padding: 5px !important;
    }

    .headerbar {
        align-items: center;
    }
}

.highlight {
    background: var(--dark4);
    border-radius: 10px;
    font-family: monospace;
}

.highlighter-rouge {
    background: var(--dark4);
    border-radius: 10px;
    font-family: "Iosevka Term", monospace;
}

.highlight * {
    font-family:  "Iosevka Term", monospace;
    padding: 10px;
    font-size: 15px;
}

.highlighter-rouge {
    padding: 3px;
}

blockquote {
    background: var(--dark2);
    border-left: 3px solid var(--light5);
    padding: 10px;
    border-radius: 10px;
}

blockquote p {
    margin: 0;
    padding: 0;
}

a {
    color: var(--blue1);
    text-decoration: none;
}