/* Copyright 2018, Sqwyz */
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P|Yatra+One');

:root {
    --content-max-width: 1024px; /* use margin: auto; */
    --dark-color: #002b36;
    --light-color: #839496;
    font-family: 'Yatra One', cursive;
}

/*
 * Main layout
 */
html {
    margin: 0;
    padding: 0;

    background-color: white;
}


body {
    margin: 0;
    padding: 0;
}

header {
    margin: 0;
    padding: 0;
    height: 4rem;

    background-color: var(--dark-color);
    color: var(--light-color);
}

nav {
    margin: 0 auto;
    padding: 1rem 0 0 0;
    max-width: var(--content-max-width);
    height: 2rem;
}

main {
    margin: 0 auto;
    padding: 0;
    max-width: var(--content-max-width);
    min-height: calc(100vh - 6rem);

    background-color: var(--light-color);
    color: var(--dark-color);
}

footer {
    margin: 0 auto;
    padding: 0;
    max-width: var(--content-max-width);
    height: 2rem;

    background-color: var(--dark-color);
    color: var(--light-color);

    font-size: .7rem;
}


/*
 * Decoration
 */
nav .sqwyz {
    font-size: 2rem;
}
nav a {
    color: var(--light-color);
    text-decoration: none;
}
main * {
    margin: 0; /* Or break main layout */ 
    padding: 1px 3px;
}

footer * {
    margin: 0;
    padding: 2px 0;
}


/*
 * Special classes
 */

 /* Used to write the sqwyz logo */
.sqwyz {
    font-family: 'Press Start 2P', 'Courier New', Courier, monospace;
}

/**/
.navbutton {
    padding: 0 3px;
    float: right;
}

/**/
.wtf {
    font-style: oblique;
    font-size: .9rem;
}

/**/
.titleimage {
    display: block;
    margin: 0 auto 5px;
}

/* Credits / licenses */
.license {
    padding: 5px 0 0 30px;
}
.cc-by {
    background-image: url('/assets/img/cc-by.png');
    background-size: 25px;
    background-repeat: no-repeat;
}