/* =====================================================
   LUMACA'S REFUGIUM
   TEC1 BOOTSCREEN
   Alpha 0.7
=====================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;

    background:#000;

    overflow:hidden;

    font-family:'Share Tech Mono', monospace;

    color:#ff9d00;

}

/* ============================
        TERMINAL
============================= */

#terminal{

    position:absolute;

    inset:0;

    padding:70px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:flex-start;

    background:#000;

}

/* ============================
        TEXT
============================= */

#output{

    font-size:28px;

    line-height:1.8;

    white-space:pre-line;

    text-shadow:

        0 0 8px rgba(255,140,0,.45);

}

/* ============================
        CURSOR
============================= */

.cursor{

    display:inline-block;

    width:10px;

    height:1.2em;

    background:#ff9800;

    vertical-align:middle;

    margin-left:2px;

    animation:blink .8s infinite;

}

@keyframes blink{

    0%,50%{

        opacity:1;

    }

    51%,100%{

        opacity:0;

    }

}

/* ============================
        COMING SOON
============================= */

#comingSoon{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:#000;

    opacity:0;

    visibility:hidden;

    transition:1.5s;

}

#comingSoon.show{

    opacity:1;

    visibility:visible;

}

#comingSoon h1{

    font-size:120px;

    color:#ff9800;

    letter-spacing:8px;

    text-shadow:

        0 0 30px rgba(255,140,0,.6);

}

#comingSoon h2{

    margin-top:20px;

    font-size:48px;

    color:white;

    letter-spacing:6px;

}

#comingSoon p{

    margin-top:40px;

    font-size:26px;

    color:#cccccc;

    line-height:1.8;

}

#comingSoon a{

    margin-top:70px;

    padding:20px 60px;

    border:2px solid #ff9800;

    color:#ff9800;

    text-decoration:none;

    font-size:24px;

    transition:.35s;

}

#comingSoon a:hover{

    background:#ff9800;

    color:black;

    box-shadow:

        0 0 35px rgba(255,140,0,.7);

}

/* ============================
        SCANLINES
============================= */

body::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    repeating-linear-gradient(

        180deg,

        rgba(255,255,255,.02) 0px,

        rgba(255,255,255,.02) 2px,

        transparent 3px,

        transparent 5px

    );

    opacity:.18;

}

/* ============================
        RESPONSIVE
============================= */

@media(max-width:900px){

#terminal{

    padding:35px;

}

#output{

    font-size:18px;

}

.cursor{

    width:12px;

    height:22px;

}

#comingSoon h1{

    font-size:60px;

}

#comingSoon h2{

    font-size:28px;

}

#comingSoon p{

    font-size:18px;

}

#comingSoon a{

    font-size:18px;

    padding:16px 32px;

}

}