@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap');


@font-face {
    font-family: 'sf-distant-galaxy-outline';
    src: url('/fonts/sf-distant-galaxy.outline.woff2') format('woff2');
    font-display: swap;

}  

@font-face {
    font-family: 'sf-distant-galaxy-regular';
    src: url('/fonts/sf-distant-galaxy.regular.woff2') format('woff2');
    font-display: swap;
}  

body {
	margin: 0 auto;
	background-color: #000;
    overflow-x: hidden !important;
    overflow-y: scroll !important;  

}

html, body { height: 100%; width: 100%;}


label{
    display: block;
    font-size: 1.5em;
}

label.speed{
        display: inline-block;
        font-size: 0.875em;
        white-space: nowrap;
        cursor: pointer;

}

@media only screen and (min-width: 481px ) {
    label.speed{
        font-size: 1.5em;

    }

}

.label{
    font-family: "sf-distant-galaxy-outline", sans-serif;
    font-weight: 500;
    font-size: 1em;
    color: #ccc;
    text-align: center;
    margin: 2em 0 0.25em 0;
}


div.builder{
    margin: auto;
    width: 90vw;

}

@media only screen and (min-width: 768px) {
    div.builder{
        width: 80vw;

    }
}
@media only screen and (min-width: 1024px) {
  div.builder{
        width: 60vw;
    }
}
.stars {
	position: absolute;
	width: 1px;
	height: 1px;
	z-index: -2000;
    
}

div.header{    
    text-align: center;
    margin: 2em auto 7em auto;
    
}
@media only screen and (min-width: 481px) {
div.header{    
    margin: 2em auto;
}

}
div.header *{    

       
    font-weight: 100;
    color: rgb(255,168,10);
}

div.header img{
    max-width: 90%;
}

div.header div.scroll-preview{
    max-width: 40%;
    font-family: sans-serif;
    overflow: hidden;
    text-align: justify;
    transform: perspective(400px) rotateX(55deg);
    transform-origin: 50% 0;
    margin: 2em auto 0 auto;
    font-weight: bold;
    border: 4px solid rgb(255,168,10);

    border-radius: 10px;
    padding: 15px 15px 0 15px;

}
@media only screen and (min-width: 481px) {
    div.header div.scroll-preview{

        width: 300px;
    }
}

div.header div.scroll-preview div.h1{
	text-transform: uppercase;
    text-align: center;
    font-weight: bold;

}

div.header div.scroll-preview div.h2{
	
    text-align: center;
    font-size: 0.5em;
    margin-bottom: 1em;

    
}
div.header div.scroll-preview p{
	font-size: 0.75em;
    text-align: justify;
    font-weight: bold;

}


h1{
    font-family: sf-distant-galaxy-regular;

    font-size: 5em;
    font-weight: 100;
    line-height: 0.75; 
    color: rgb(255,168,10);
        margin: 0;


}
h2{
            margin-top: 0.25em;

    font-family: sf-distant-galaxy-outline;

    font-size: 2.5em;
        margin-bottom: 0;

                color: #ccc !important;

}
@media only screen and (min-width: 481px) {

    h2{
    
        font-size: 2.5em;

    }
}

h3{
    margin-top: 1em;

    font-size: 1.25em;
    font-family: sf-distant-galaxy-regular;
    width: 60%;
    text-align: center;
    margin: 2em auto;
    color: #ccc !important;

}


textarea{
	background-color: #000;
    font-family: sans-serif;
    width: 100%;
        
    overflow: hidden !important;  
    white-space: pre-wrap;      /* CSS3 */   
    white-space: -moz-pre-wrap; /* Firefox */    
    white-space: -pre-wrap;     /* Opera <7 */   
    white-space: -o-pre-wrap;   /* Opera 7 */    
    word-wrap: break-word;      /* IE */        
    
    box-sizing: border-box;
    font-size: 1em;
    border: 4px solid #ccc; 

    border-radius: 10px;
    padding: 15px;
}

textarea:focus, input:focus{
border: 4px solid  #46C646; 
}


.intro{
    font-family: "Roboto", "Open Sans", sans-serif;
	font-weight: 500;
	
    color: rgb(75, 213, 238); 

}
.intro-textarea{
    
    padding-left: 2em;
    font-size:0.75em;

}

@media only screen and (min-width: 481px ) {
    .intro-textarea{
            padding-left: 4em;

        font-size: 1em;

    }

}


.title{
   
    font-family: sf-distant-galaxy-outline;
    font-weight: 100;
    color: rgb(255,168,10);



}


.title-textarea{
    text-align: center;
    font-size: 2em;
    white-space: nowrap;
    line-height: 0.75;
}

@media only screen and (min-width: 481px ) {
    .title-textarea{
        font-size: 3em;

    }

}
@media only screen and (min-width: 768px ) {
.title-textarea{
    font-size: 4em;

}


}



.episode{
    font-family: sans-serif;

    font-weight: 600;
    color: rgb(255,168,10);

}
.episode-textarea{
    text-align: center;
    line-height: 1;

}


.heading {
    font-family: sans-serif;

	text-transform: uppercase;
    color: rgb(255,168,10);

}
.heading-textarea {
    text-align: center;
    line-height: 1;
    font-size: 1.5em;

}

.scroll-text {
    font-family: sans-serif;

    font-weight: bold;

    
    color: rgb(255,168,10);


}

.scroll-text-textarea {

    font-weight: bold;
    overflow: hidden;
    text-align: justify;
    overflow: scroll;
    
            padding: 2em 5vw 2em 5vw;


}

div.speed-wrapper{
    margin: 0 auto;
}

div.speed-radios{
    margin: 1em 0 1em 0;
    padding-left: 35%;
}

div.play {
    text-align: center;
    padding: 2em 0 5em 0;

}

div.play button{
    text-align: center;
    background: #000;
    font-size: 3em;
    font-family: sf-distant-galaxy-outline;
    white-space: nowrap;
    font-weight: 100;
    line-height: 0.75;
    color: rgb(255,168,10);
    margin: auto auto;
    border: 4px solid rgb(255,168,10);
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;

}
div.play button:hover{
    
        border: 4px solid #46C646;
        color:  #46C646;

}

@media only screen and (min-width: 481px ) {

div.play button{
    font-size: 4em;

}

}




.addany-container-fixed{
    position: fixed; 
    bottom: 0; 
    left: 0;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%;
}

.faq-content{
  
	font-weight: 500;	
    color: rgb(75, 213, 238); 
    margin: 0 auto;
    text-align: left;
    width: 60%;

}

.faq-content article{
    padding-bottom: 3em;
    font-family: "Roboto", "Open Sans", sans-serif;


}

.faq-content article h3{
    font-family: inherit;
    font-weight: 100;
    color: rgb(255,168,10) !important;
    text-align: left;
    width: 100% !important;
    margin: 1em auto;


}

h2{
    font-weight: 100;
    text-align: center;
    margin: 1rem auto;
}