* {
	padding: 0;
	margin: 0;
}

body {
	font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
	font-weight: 300;
	font-size: 16px;
	color: #111;
	background-color: #fff;
}

p {
	margin: 1em 0;
	clear: both;
	line-height: 1.7;
}

a {
	text-decoration: none;
}

a:link, a:visited {
	color: #1a1dec;
	border-bottom: #26e437 dotted 1px;
    transition: color 500ms, border-color 500ms;
}

a:hover, a:active {
	color: #ff4db8;
	border-bottom: #4DBCE9 dotted 1px;
    transition: color 500ms, border-color 500ms;
}

a:has(> img) {
    border-bottom: none !important;
}

h2 {
    margin: 1rem;
}

.photo {
    margin-bottom: 3em;
}

.photo img {
    width: 100%;
}

.photo p {
    margin: 0;
    font-size: 0.8em;
}

div.astral-header {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 340px;
    margin-left: -170px;
    height: 260px;
    user-select: none;
}

div.astral-header p {
    margin: 0;
    font-family: 'Lato', 'Open Sans', 'Helvetica', sans-serif;
    font-size: 175px;
    font-weight: 900;
    font-style: italic;
    position: absolute;
    line-height: normal;
}

div.astral-header p.one {
    color: rgba(0, 0, 0, 0.7);
    z-index: 99;
}

div.astral-header p.two {
    top: 5px;
    left: 5px;
    color: rgba(255, 0, 0, 1);
    z-index: 98;
    user-select: none;
}

div.astral-header p.three {
    top: 10px;
    left: 10px;
    color: rgba(255, 255, 0, 1);
    z-index: 97;
    user-select: none;
}

div.astral-header p.four {
    top: 15px;
    left: 15px;
    color: rgba(0, 255, 255, 1);
    z-index: 96;
    user-select: none;
}

div.astral-header p.five {
    top: 20px;
    left: 20px;
    color: rgba(255, 0, 255, 1);
    z-index: 95;
    user-select: none;
}

div.astral-header p.six {
    top: 25px;
    left: 25px;
    color: rgba(0, 255, 0, 1);
    z-index: 94;
    user-select: none;
}

.quarantine {
	width: 600px; /* make sure this stays in sync with thumbnail size */
	margin: 25px auto;
}

.astral-divider {
    padding-top: 260px;
}

.floating-crap {
    position: fixed;
    left: 10px;
    bottom: 10px;
    padding: 0 1em;
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.8em;
}

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

	body {
		font-size: 14px;
	}

	.quarantine {
		width: 100%;
		margin: 0;
	}

    div.astral-header {
        width: 200px;
        margin-left: -100px;
        height: 160px;
    }

	div.astral-header p {
        font-size: 100px;
    }

    .photos {
        padding-left: 0;
    }

    .astral-divider {
        padding-top: 180px;
    }

    .floating-crap {
        position: relative;
    }

	p {
		margin: 15px;
	}

    .photo p {
        margin-left: 1em;
        margin-right: 1em;
    }
}