/*
font-family: 'Fugaz One', cursive;
font-family: 'Roboto', sans-serif;
font-family: 'Montserrat', sans-serif;
*/

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;

    background: url(../img/map-4.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
/*     background-size: cover; */

/*     background-color: #fef1d8; */
    background-color: #d2f8ff;
    color: #444;
}

h1 {
    font-family: 'Fugaz One', cursive;
    font-weight: 400;
    color: #94d0fb;
    font-size: 3.75em;
    margin: 0 0 .125em 0;
    text-decoration: underline;
/*     border-bottom: 1px solid #94d0fb; */
}

h2 {
    margin: 0 0 .5em 0;
}


#main {
    width: calc(100% - 48px);
    max-width: 32em;
    min-height: calc(100vh - 50px);
    margin: 0 auto;
    padding-top: 3em;

    background: rgba(255,255,255,.6);
/*     background: white; */
}
.content {
    padding: 24px;
}

hr {
    background: none;
    border: none;
    border-bottom: 1px dotted #aaa;
}


nav {
    display: flex;
    height: 3em;


    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;

/*     border-bottom: 1px solid #eee; */
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255,255,255,.9);
    box-shadow:0 2px 2px rgba(0,0,0,.2);
}

nav > div {
    height: 3em;
    width: 5em;
    line-height: 3em;
    padding: 0 .5em;
}
nav > div.prev {text-align: left;}
nav > div.home {text-align: center;}
nav > div.next {text-align: right;}

nav > div a {
    text-decoration: none;
    color: #333;
}


dl.table {}
dl.table dt{
    float: left;
    clear: left;
    width: 5em;
    font-weight: 400;
}
dl.table dd {
    margin-left: 6em;
    margin-bottom: .5em;
}


dl.table.wide dt{
    width: 10em;
}
dl.table.wide dd {
    margin-left: 11em;
}

dl.list {
    border: 1px solid #ccc;
    padding: .75em;
}

dl.list dt{
    margin: 0;
    font-weight:400;
}


dl.list dd {
    margin: 0 0 1.35em 0;
}


.journal-list dt a{
    text-decoration: none;
    border-bottom: 1px solid #666;
    color: #444;
}
.journal-list dt a:hover {
    color: black;
    border-bottom-color: black;
}


.journal-list dd {
    margin-left: 1em;
    margin-bottom: 1em;
}


.pull-left,
.pull-right {
    border: 8px solid white;
/*     background: #444; */
    width: 19em;
    height: auto;
    margin: 1em;

    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    transition: all .5s;
}

.pull-left {
    float: left;
    margin-left: -36%;
}

.pull-right {
    float: right;
    margin-right: -36%;
}

.rotate-left {
    transform:rotate(-4deg);
    transition: transform .5s;
}
.rotate-right {
    transform:rotate(4deg);
    transition: transform .5s;
}

.pull-tall {
    width: 15.5em;
}

.pull-small {
    width: 11.5em;
}
.pull-left.pull-small {
    margin-left: -6.5em;
}
.pull-right.pull-small {
    margin-right: -6.5em;
}


.series {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	max-width: calc(32em + 36%);
	transition: all .5s;
}
.series-right {
	justify-content: flex-end;
	align-items:flex-end;
	margin-right: -36%;
}
.series-left {
	justify-content: flex-start;
	align-items: flex-start;
	margin-left: -36%;
}

.series img {
	border: 8px solid white;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
	max-height: 8em;
	width: auto;
	margin: .5em;
	transition: max-height .5s;
}


.lightbox {
    cursor: pointer;
}


#lightbox-img-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(44, 66, 70, 0.87);
    display: none;
}
#lightbox-img-wrapper.active {
    display: block;
    z-index: 100;
}

#lightbox-img {
    width: calc(100% - 48px);
    max-width: 80vw;
    height: calc(100vh - (48px + 3em));
    overflow-y: auto;
    margin: 0 auto;
    padding-top: 25px;
    text-align: center;

}

#lightbox-img span {
	display: inline-block;
	position: relative;
}

#lightbox-img span::after {
	content:'';
	position: absolute;
	left: 6px;
	right: 6px;
	bottom: 6px;
	height: 3em;
	background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.6) 30%, rgba(0,0,0,.6) 70%, rgba(0,0,0,0));
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
}

#lightbox-img img {
    max-width: calc(100% - 12px);
    max-height: calc(90vh - 60px);
    border: 6px solid white;
}

#lightbox-img .caption {
	position: relative;
	bottom: calc(3em + 6px);
	left: 6px;
	height: 3em;
	line-height: 3em;
	width: calc(100% - 12px);
	margin: 0 auto;

	color: #eee;
}

a, a:visited {
    color: #0c7ec9;
    text-decoration: none;
}


a:hover {
    color: black;
    border-bottom-color: black;
    background-color:rgba(12, 126, 202, 0.2);
}


.bear {
    position: relative;
    z-index: 2;
}


.bear::before {
    content:'';
    background-image: url(../img/bear-b-64.png);
    background-repeat: no-repeat;
    width: 64px;
    height: 57px;
    position: absolute;
    left: calc(40% - 32px);
    top: calc(50% - 24px);
    z-index: -1;
    opacity: .2;

}

/*
.bear::before {
    content:'';
    background-image: url(../img/bear-b-64.png);
    background-repeat: no-repeat;
    width: 64px;
    height: 57px;
    position: absolute;
    left: -64px;
    top: calc(50% - 24px);
    z-index: -1;
    opacity: .7;

}
*/


.emote {
    position: relative;
    display: inline-block;
    width: 1.6em;
    height: 1em;

}

.emote::before {
    content:'';
    width: 1.6em;
    height: 1.6em;
    position: absolute;
    top:-.2em;
    left: 0;
    background-repeat: no-repeat;
    background-size: contain;

    transition: all .35s;
}

.emote.emote-sad::before{background-image:url(../img/emoji/sad.png)}
.emote.emote-lol::before{background-image:url(../img/emoji/lol.png)}
.emote.emote-joy::before{background-image:url(../img/emoji/joy.png)}
.emote.emote-anger::before{background-image:url(../img/emoji/anger.png)}
.emote.emote-facepalm::before{background-image:url(../img/emoji/facepalm.png)}
.emote.emote-star::before{background-image:url(../img/emoji/star.png)}

.emote:hover::before {
    width: 200px;
    height: 200px;
    top: -100px;
    left: -100px;
}

@media only screen
 and (max-width:830px){


	.pull-left{
    	width: 36%;
    	margin-left: -18%;
	}
	.pull-right{
    	width: 36%;
    	margin-right: -18%;
	}
	.pull-tall {
    	width: 30%;
	}

	.pull-small {
    	width: 25%;
	}

    .pull-left.pull-small {
        margin-left: -12%;
    }
    .pull-right.pull-small {
        margin-right: -12%;
    }

	.series-right {
		margin-right: -12%;
	}
	.series-left {
		margin-left: -12%;
	}

	.rotate-left,
	.rotate-right {
    	transform: none;
	}

}


@media only screen
 and (max-width:650px){

	.series-left,
	.pull-left,
	.pull-left.pull-small {
    	margin: 0 1em 0 0;
	}

	.series-right,
	.pull-right,
	.pull-right.pull-small {
    	margin: 0 0 0 1em;
	}
	
	.series img {
		max-height: 5em;
	}

	.pull-left,
	.pull-right{
    	width: 36%;
	}
	.pull-tall {
    	width: 30%;
	}

	.pull-small {
    	width: 25%;
	}

	.rotate-left,
	.rotate-right {
    	transform: none;
	}
}