/* Global */
/* ------------------------------------------- */

body {
    background-color: #000;
    overflow-y: scroll;
    overflow-x: hidden;
}

a {
    color: #13e0e7;
}
a:hover {
    color: rgba(19, 224, 231,1);
    text-decoration: underline;
}

label {
    font-weight: 700;
}


/* Helpers */
/* ------------------------------------------- */

.no-after:after {
    content: none !important;
}


/* Page border */
/* ------------------------------------------- */

.page-border {
    position: fixed;
    width: 100%;
    height: 100%;
    border: 8px rgba(19, 224, 231, 1) solid;
}

.top-border {
    position: fixed;
    top: 0;
    height: 8px;
    width: 100%;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    z-index: 9999;
}
.top-border:after {
	border-top: 16px solid rgba(19, 224, 231, 1);
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
	height: 0;
	width: 50%;
	position: absolute;
    content: "";
    left: 25%;
}

.bottom-border {
    position: fixed;
    top: calc(100% - 16px);
    height: 8px;
    width: 100%;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    z-index: 9999;
}
.bottom-border:after {
	border-bottom: 16px solid rgba(19, 224, 231, 1);
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
	height: 0;
	width: 50%;
	position: absolute;
    content: "";
    left: 25%;
}

.left-border {
    position: fixed;
    left: 0;
    width: 8px;
    height: 100%;
    z-index: 9999;
}
.left-border:after {
	border-left: 16px solid rgba(19, 224, 231, 1);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
	height: 50%;
	width: 0;
	position: absolute;
    content: "";
    top: 25%;
}

.right-border {
    position: fixed;
    left: calc(100% - 16px);
    width: 8px;
    height: 100%;
    z-index: 9999;
}
.right-border:after {
	border-right: 16px solid rgba(19, 224, 231, 1);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
	height: 50%;
	width: 0;
	position: absolute;
    content: "";
    top: 25%;
}


/* NASA Earth */
/* ------------------------------------------- */

.nasa-earth-wrapper {
    color: #fff;
    padding: 70px;
}

.nasa-earth-divider {
    border-top: 1px dashed #fff;
    opacity: .2;
}

.nasa-earth-btn {
    background-color: rgba(19, 224, 231, 1);
    color: #000;
}
.nasa-earth-btn:hover {
    opacity: .9;
}

.nasa-earth-date-input {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(19, 224, 231, 1);
}

.nasa-earth-card {
    background: #000;
    border: 1px solid rgba(19, 224, 231, .5);
    margin-bottom: 40px;
    border-radius: 0;
    padding: 10px;
    background-color: rgba(19, 224, 231, .1);
}

.nasa-earth-card:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    top: -2px;
    left: -2px;
    position: absolute;
    border-top: 3px solid rgba(19, 224, 231,1);
    border-left: 3px solid rgba(19, 224, 231,1);
}
.nasa-earth-card:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    top: -2px;
    right: -2px;
    border-top: 3px solid rgba(19, 224, 231,1);
    border-right: 3px solid rgba(19, 224, 231,1);
}
.nasa-earth-card span:before {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -2px;
    left: -2px;
    border-bottom: 3px solid rgba(19, 224, 231,1);
    border-left: 3px solid rgba(19, 224, 231,1);
}
.nasa-earth-card span:after {
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: -2px;
    right: -2px;
    border-bottom: 3px solid rgba(19, 224, 231,1);
    border-right: 3px solid rgba(19, 224, 231,1);
}

.nasa-earth-image {
    z-index: -1;
}

.nasa-earth-image::after {
    content: '';
    width: calc(85% - 40px);
    height: 92%;
    border-radius: 50%;
    border: 1px dashed rgba(19, 224, 231, 1);
    position: absolute;
    top: calc(5% - 46px);
    left: calc(8% + 16px);
}

.nasa-earth-image img {
    max-width: 100%;
    animation: pulse 1.5s infinite;
    border-radius: 50%;
}

.nasa-earth-target:after {
    content: '+';
    font-size: 3rem;
    color: rgba(19, 224, 231, .8);
    top: calc(55% - 100px);
    left: calc(50% - 16px);
    position: absolute;
}

.nasa-earth-thumb-wrapper {
    margin-top: -40px;
    text-align: center;
}

.nasa-earth-thumb {
    background: #000;
    border: none;
}

.nasa-earth-paginate-btn {
    color: #13e0e7;
    font-weight: bold;
    text-decoration: none;
    font-size: 2rem;
    background-color: transparent;
    border: none;
}
.nasa-earth-paginate-btn:hover {
    color: #13e0e7;
    opacity: .5;
    text-decoration: none;
}

.nasa-earth-google-maps {
    opacity: .7;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* Pulse Animation */
/* ------------------------------------------- */

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(19, 224, 231, .3);
    }
    70% {
        -webkit-box-shadow: 0 0 0 40px rgba(19, 224, 231, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(19, 224, 231, 0);
    }
}
@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(19, 224, 231, .3);
        box-shadow: 0 0 0 0 rgba(19, 224, 231, .3);
    }
    70% {
        -moz-box-shadow: 0 0 0 40px rgba(19, 224, 231, 0);
        box-shadow: 0 0 0 40px rgba(19, 224, 231, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(19, 224, 231, 0);
        box-shadow: 0 0 0 0 rgba(19, 224, 231, 0);
    }
}