@import url('../../css2');

html {height: 100%;}
body {font-family: 'Montserrat', sans-serif; background: #000; overflow: hidden; min-width: 320px; height: 100%; }

.btn {border-radius: 100px; border-color: #9f9f9f; font-size: 15px; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; font-weight: 300; letter-spacing: 3px; padding: 10px 20px; background: rgba(0,0,0,0.3);}

#earth {position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 4;}
#earth img {width: 100%; position: absolute; bottom: -15vw}

#lines {position: absolute; width: 100%; left: 0; bottom:-7vw; height: 100%;}
#lines img {width: 100%; height: auto; position: absolute; bottom: 0;}

#mark {position: absolute; z-index: 10; top: 3vw; left: 2vw; width: 100px}

#intro {position: relative; z-index: 10; margin: 0 auto; top: 17vh; display: block; text-align: center; max-width: 650px;}
#intro img {margin-bottom: 45px;}
#intro h1 {font-size: 20px; font-family: syncopate; color: #C6C0FD; font-size: 18px; letter-spacing: 3px; margin-bottom: 30px;}
#intro p {color: #FFF; font-weight: 300; font-size: 18px; line-height: 32px; color: #EAEAEA; margin-bottom: 30px;}

#particles-js {position: absolute; top: 0; left: 0; width: 100%; top: 0;}

#countdown-container {position: absolute; z-index: 5; right: 2vw; top: 4vw; color: #FFF; font-family: 'IBM Plex Mono', monospace; font-weight: 200}
#countdown-container #countdown {font-size: 27px; letter-spacing: 3px; opacity: 0.7;}
#countdown-container #countdown span {width: 40px; display: inline-block; text-align: center;}
#countdown-container #countdown span:first-child {width: 60px}
#countdown-container .labels {display: block;  padding-top: 5px; padding-left: 4px}
#countdown-container .labels span {padding-top: 10px; padding-left: 7px; border-left: 1px solid #444; font-weight: 300; width: 50px; display: inline-block; font-size: 8px; letter-spacing: 2px;}
#countdown-container .labels span:first-child {width: 55px;}



#timeline-container {min-height: 900px; margin-top: 45vh; color: #FFF; position: relative; z-index: 10; display: none}
#timeline-container .line {width: 1px; background: #686868; height: 100%; position: absolute; left: 45%; top: 0;}
#timeline-container .dot {width: 10px; height: 10px; border-radius: 100px; background: #a1aeb7; position: absolute; left: calc(45% - 4.5px); top: 0; z-index: 1;}
#timeline-container .dot .outside {width: 30px; height: 30px; border-radius: 100px; border: 1px dashed #a1aeb7; position: relative; left: -10px; top: -10px;}
#timeline-container .item .left {width: 40%; display: inline-block;}
#timeline-container .item .right {width: 59%; display: inline-block; padding-left: 20%; font-family: syncopate; font-weight: 700; text-transform: uppercase; letter-spacing: 5px;}