:root {
    --pixel-margin-y: 5px;
    --pixel-margin-x: 0px;
    --pixel-width: 350px;

    --title-font: 'Press Start 2P', cursive;
    --paragraph-font: "VT323", monospace;

    --text-dark: #333;
    --text-mid: #888;
    --text-light: #ffffff;

    --link-light: #eee;
    --link-hover: #fff;

    --primary-color: #eeeeee;
    --secondary-color: #35251b;
    --tertiary-color: #339b33;
    --background: #eee;
    
    --title-gradient-intense: -webkit-linear-gradient(#c1fbff, #16e6f5,#0e5d8b);
    --title-gradient-forest: -webkit-linear-gradient(#fff6f6, #c3f510,  #42301a);
    --title-gradient-suki: -webkit-linear-gradient(#fffffe, #fffdfd,  #f76d54);
    /*--title-gradient-intense: -webkit-linear-gradient(#c4fcff, #83b3fc,#250e8b);
    --title-gradient-forest: -webkit-linear-gradient(#a8ff86f3, #82be12,  #4b2c05);
    --title-gradient-suki: -webkit-linear-gradient(#fffbf8, #fffdfd,  #d85757);*/
    --header-text: #eee;
    --header-link-text: #8e2cff;
    --header-link-hover: #ffffff;
    --header-title-size: 38px;
    --header-font-large: 12px;
    --header-font-small: 8px;
    
    /*--content-background: linear-gradient(#23253d, #04061a);*/
    --content-background: linear-gradient(#c5a47e, #80a196e7);
    --content-font-size: 18px;

    --footer-background: #80a196e7;
    --header-background: #c5a47e;
    --footer-color: #eee;
    --footer-font-size: 13px;
}


html, body {
    background-color: var(--footer-background);
    margin:0;
}

.container {
    display: grid;
}

.px {
    padding-left: var(--pixel-margin-x);
    padding-right: var(--pixel-margin-x);
}

.py {
    padding-top: 30px;
    padding-bottom: 30px;
}


/* -------- HEADER -------- */

header {
    background-position: right top;
    background-color: var(--header-background);
}

.welcome-container {
    padding-top: 20px;
    padding-bottom: 15px;
    width: var(--pixel-width);
    margin: auto;
    
}
.welcome-flex-items {
    display: flex;
    margin-bottom: 0;
}
.welcome-title {
    font-size: var(--header-title-size);
    font-weight: 700;
    margin: 0px;
    padding: 0px;
    -webkit-text-stroke-width: 0.1px;
    -webkit-text-stroke-color: #ffffff;
}
.welcome-subtitle {
    margin-top: 0;
    font-weight: 300;
}
.intense {
    /*background: -webkit-linear-gradient(#ccbcd1, #d3d3d3,#726762);*/
    /*background: -webkit-linear-gradient(#cffdff, #9dbce9,#323250);*/
    background: var(--title-gradient-intense);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*fallback*/
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-color: var(--header-text);
}
.arcane {
    
    /*background: -webkit-linear-gradient(#daf9fa, #979ac0, #220136);*/
    background: var(--title-gradient-forest);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100%;
    /*fallback*/
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    background-color: var(--header-text);
}

.suki {
     /*background: -webkit-linear-gradient(#daf9fa, #979ac0, #220136);*/
     background: var(--title-gradient-suki);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-size: 100%;
     /*fallback*/
     -moz-background-clip: text;
     -moz-text-fill-color: transparent;
     background-color: var(--header-text);
}

/* Header cursor animation */
@keyframes cursor-blink {
    from {
        background-color: rgba(0, 0, 0, 0);
    }
    to {
        /*background-color: #39994b;*/
        /*background: -webkit-linear-gradient(#a5e254, #39994b, #1c4d3a);*/
        background: var(--title-gradient-intense);
    }
}
#cursor-container {
    display: flex;
}
#cursor {
    content: "";
    margin-top: 24px;
    margin-bottom: 0px;
    padding-bottom: 0px;
    margin-left: 2px;
    width: 28px;
    height: 10px;
    display: inline-block;
    animation: cursor-blink 1.5s steps(2) infinite;
    /*fallback*/
    background: var(--header-text);
}

.menu-container {
    /*display: flex;*/
    width: var(--pixel-width);
    margin: auto;
    /*grid-template-columns: 1fr;*/
}
.menu-flex-items {
    display: flex;
    font-size: 11px;
}
.menu-flex-items a {
    font-family: var(--title-font);
    
    color: var(--header-link-text);
    text-decoration: none;
    padding-right: 6px;
}
.menu-flex-items a:hover {
    color: var(--header-link-hover);
}



/* -------- MAIN -------- */

main {
    /*background-color: var(--content-background);*/
    background-image: var(--content-background);
}

.content {
    /*background-color: #c2a973;*/
    grid-template-columns: 1fr;
    margin: 50px auto;
    width: var(--pixel-width);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 50px;
}
.project h3 {
    margin-bottom: 5px;
}
.project-date {
    margin-top: 0px;
    margin-bottom: 5px;
}
.project-tag {
    margin-top: 0px;
}
.project a {
    color: var(--header-link-text);
    text-decoration: none;
}
.project a:hover {
    color: var(--header-link-hover);
}

/* images */
.row {
    display: inline-block;
}
  
.column {
    flex: 100%;
    padding: 2px;
}



/* -------- FOOTER -------- */

footer {
    background-color: var(--footer-background);
    color: var(--footer-color);
}

footer h3 {
    font-size: var(--footer-font-size);
}

.footer-container {
    grid-template-columns: 1fr;
    margin: 20px auto 40px auto;
    width: var(--pixel-width);
    display: flex;
    align-items: center;
}

.footer-items {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    list-style: none;
}

.footer-item {
    padding: 0px 10px;
}

.footer-icon {
    fill: var(--footer-color);
    width: 35px;
}

.footer-icon:hover {
    fill: #777;
}


/* -------- CONTENT -------- */

h1, h2, h3, h4, h5 {
    font-family: var(--title-font);
    margin-top: 0;
}

h1 {
    font-weight: 700;
    font-size: 40px;
}

h2 {
    font-weight: 500;
    font-size: 30px;
}

h3 {
    font-weight: 400;
    font-size: 20px;
}

.content h3 {
    color: var(--text-light);
}

h4 {
    font-weight: 300;
    font-size: 16px;
}

.content h4 {
    color: var(--text-light);
}

p {
    font-family: var(--paragraph-font);
    font-weight: 400;
    font-style: normal;
}

.content p {
    color: var(--text-light);
    font-size: var(--content-font-size);
}

code {
    font-size: 13px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
}

hr {
    border: 0px;
    border-bottom: 2px dashed var(--primary-color);
    margin-bottom: 40px;
}

.link-light {
    color: var(--text-light)
}

.ita {
    font-style: italic;
}


/* Post Paginate */
/*
.post-preview {
    max-height: 200px;
    overflow: hidden;
}

.date {
    font-size: 14px;
    font-weight: 200;
    color: var(--text-mid);
}

.post-thumbnail-container {
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.post-thumbnail {
    border-radius: 10px;
    width: 100px;
    border: 1px solid;
}

.post-container {
    left: 0;
    display: flex;
    margin-left: auto;
    flex-direction: row;
}

.post-title {
    margin: 0;
    font-weight: 600;
}

.post-subtitle {
    margin: 0 0 0.65em;
    font-weight: 400;
}
*/

/* Post */
/*
.post-header {
    padding-bottom: 30px;
}

.post-header h1 h2 {
    color: #fff;
    padding: 0;
    margin: 0;
}
*/

/* Code blocks syntax highlighting */
code {
    background-color: var(--background);
}

.hljs {
    font-family: var(--paragraph-font);
    font-size: 18px;
    border-radius: 3px;
}


/* -------- Responsive breakpoints -------- */

@media screen and (min-width: 1440px) {
    :root {
        --pixel-margin-y: 30px;
        --pixel-margin-x: 90px;
        --pixel-width: 1000px;

        --header-font-title-large: 20px;
        --header-font-title-small: 15px;
        --header-font-large: 20px;
        --header-font-small: 15px;
    }

    code {
        font-size: 15px;
    }

    .welcome-container {
        padding-top: 20px;
    }

    .row {
        display: flex;
    }

    .column {
        flex: 50%;
        padding: 5px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1440px) {
    :root {
        --pixel-margin-y: 15px;
        --pixel-margin-x: 30px;
        --pixel-width: 700px;

        --header-font-title-large: 20px;
        --header-font-title-small: 15px;
        --header-font-large: 20px;
        --header-font-small: 15px;
    }

    code {
        font-size: 15px;
    }

    .welcome-container {
        padding-top: 20px;
    }

    .row {
        display: flex;
    }
 
    .column {
        flex: 50%;
        padding: 5px;
    }
}