html, body {
    height: 100%;
}

body {
    font-size:1.5em;
    padding-top: 55px;
    display: flex;
    text-align: center;
    flex-direction: column;
}

main {
    margin: auto;
    padding: 25px;
    flex: auto;
    max-width: 750px;
}

/*footer*/

.copyright {
    margin: 15px 0;
}

/*home page*/

.intro {
   /* transform: translateY(80%); */
}

.intro > h1 {
    font-size: 4em;
    font-weight: bold;
    
}

.intro > h2 {
    font-size: 2em;
}

.intro > .profile {
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
}

/*apply accent colour to links*/

a:link, a:visited {
    color: #555555;
}

#bigbody main a {
    color: var(--accent) !important;
}

#bigfooter a:link, a:visited {
    color: #cccccc;
}

#bigfooter a:hover {
    text-decoration: underline;
    color: #FFF;
}


/*paginator at bottom of list view*/

.pages {
    padding: 15px 0;
}

.pages-icon {
    padding: 0 15px;
}

/*list item for posts and projects*/

.item {
    padding: 10px 0;
}

.item-cat {
    background-color: #757575;
    margin:1px;
}

.item-tag {
    background-color: var(--accent);
    margin:1px;
}

.terms {
    margin: 1px;
    padding: 1px;
    list-style-type: none;
}

/*navigation bar icons*/

.navbar-icon {
    font-size: 120%;
    display: inline-block !important;
}

/*coloured borders at top and bottom of the page*/
.navbar.navbar-default {
    border-top: var(--border-width) solid var(--accent);
    background-color: var(--accent);
    font-size: 120%;
    color: #FFF !important;
}
.navbar-default .navbar-nav li a {
    color: #cccccc;
}

.navbar-default .navbar-nav li a:hover {
    color: #FFF;
}

.navbar-default .navbar-nav.-nightmode li a:hover {
    color: #cccccc;
}

.navbar-default .navbar-brand {
    color: #cccccc !important;
}

/* custome footer */
footer {
    background-color: var(--accent);
    border-top: #e7e7e7 solid;
    border-top-width: 1px;
    color: #fff;
    /* border-bottom: var(--border-width) solid #f8f8f8; */
}
footer a {
    color: #cccccc;
}
footer p {
    color: #cccccc;
}

img {
    max-width: 100%;
}

/** Intvert colors
 * Wonderful CSS filter trick by Leo Nikkilä
 * @link https://lnikki.la/articles/night-mode-css-filter/
 */
#bigbody.-nightmode {
    background: var(--accent)!important;
    color: #333333 !important;
    -webkit-filter: invert(1) hue-rotate(180deg);
    filter: invert(1) hue-rotate(180deg)
}
/* "re-flip"" certain elements to keep colors */
#bigbody.-nightmode img, video {
    -webkit-filter: invert(1) hue-rotate(-180deg);
    filter: invert(1) hue-rotate(-180deg)
}
#bigbody.-nightmode iframe {
    -webkit-filter: invert(1) hue-rotate(-180deg);
    filter: invert(1) hue-rotate(-180deg)
}
/* custom behavior for specfic element */
#bigbody.-nightmode main a {
    color: var(--accent) !important;
}
#bigbody.-nightmode .item-tag {
    background-color: var(--accent) !important;
    color: #f8f8f8 !important;
}

/* slider attributes match navbar elements */
#night-mode-toggle {
    font-size: 100%;
    padding-top:10px;
}
/* built on-top of Custom Style .ios 
   from: http://www.bootstraptoggle.com/ */
.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20px}
.toggle.ios .toggle-handle { border-radius: 20px;}
.toggle.ios .toggle-group {transition: none;-webkit-transition: none;}

.toggle-on {
    background-color: #e1e1e1;
    color: #373a3d;
}

.toggle-on:hover {
    background-color: var(--accent);
    color: #e1e1e1;
}
.toggle-off:hover {
    background-color: var(--accent) !important;
    color: #f8f8f8 !important;
}