/* summon fonts*/
@font-face {
  font-family: 'retrotech';
  src: url('Fonts/RETROTECH.ttf') format('truetype');
}

@font-face {
  font-family: 'vt';
  src: url('Fonts/VT323-Regular.ttf') format('truetype');
}

/* Boxes and Margin Troublshooting*/
* {
    box-sizing: border-box;
}


/* Main Screen */

html,
body {

    width: 100%;
    
    height: 100%;

    margin: 0;

    overflow: hidden;
  
    background-color: black;

}


.spacer {
  display: block;   /* Ensures it takes up its own line */
  height: 5px;     /* Change this to adjust the height */
  width: 100%;      /* Spans the full width of the container */
  visibility: hidden; /* Guarantees it stays completely invisible */
}

/* CRTTV Curve */
.screen {
    position: relative;
    width: 100%;
    padding: 20px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 40px;
/* Fake Scanlines */
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.10),
            rgba(255,255,255,0.10) 1.5px,
            transparent 1px,
            transparent 4px
        );

    z-index: 5;
    transform: perspective(500px) rotateX(.10deg);
    box-shadow:
        inset 0 0 120px rgba(0,255,150,.08),
        inset 0 0 40px rgba(255,255,255,.05);

}

/* Scroll bar*/

.screen::-webkit-scrollbar {
    width: 14px;
}

.screen::-webkit-scrollbar-track { /* the bacground*/
    background: #000000;
    border-left: 1px solid #555;
}

.screen::-webkit-scrollbar-thumb { /* the square*/
    background: #575757;
    border: 1px solid #555;
    border-radius: 0;
}

.screen::-webkit-scrollbar-thumb:hover { /* the square on hover*/
    background: #ededed;
}


/* Types of Text */

h1 {
  font-family: 'retrotech', monospace;
  font-size: 40px;
  letter-spacing: 3px;
  Color: #dbdbdb; 
      text-shadow:
        -0.5px 0 red,
         0.2px 0 cyan,
         0 0 8px rgba(255,255,255,.3);
}

h2 {
  font-family: 'retrotech', monospace;
  font-size: 25px;
  letter-spacing: 3px;
  Color: #dbdbdb;
      text-shadow:
        -0.5px 0 red,
         0.2px 0 cyan,
         0 0 8px rgba(255,255,255,.3);
}

h3 { 
  font-family: 'vt', monospace;
  font-size: 25px;
  Color: #dbdbdb;
}

p {
  font-family: 'vt', monospace;
  font-size: 22px;
  Color: #dbdbdb;
  margin-top: 24px;
  margin-bottom: 24px;
}

.ind {
  text-indent: 40px; 
}

li {
  font-family: 'vt', monospace;
  font-size: 22em;
  Color: #dbdbdb;
}


/* My Links are Green */
a {

    Font-family: 'vt', monospace; 
    font-size: 22px;
    Color: #a1dd54
}

a:hover {

    color: white;

    text-shadow: 0 0 10px cyan;
}

/*Title Section*/

.titles {

    border-top: 1px solid rgba(255,255,255,.2);
    
    text-align: center;

    padding: 30px;


}

/*Choices Section*/

.choices {

    margin: 30px auto;

    padding: 20px;

    width: 80%;

    border: 1px solid rgba(0,255,150,.3);
}

.choices a {

    display: block;

    margin: 15px 0;

    color: #a1dd54;

    font-family: 'vt', monospace;

    font-size: 22px;

}

/* text section */

.text {

    width: 80%;
    max-width: 900px;
    margin: 40px auto;
    padding: 35px;
    overflow-wrap: break-word;

}

/* Interactions */

.hidden-log {

    display: none;
    margin-top: 25px;


}

.reveal-button {

    color: #c1ff72;
    cursor: pointer;
    font-family: 'vt', monospace;
    font-size: 22px;

}

.reveal-button:hover {

    color: white;
    text-shadow: 0 0 8px cyan;

}

/* Options */

.option {

    color: #c1ff72;

    cursor: pointer;

    margin: 18px 0;

    font-family: 'vt', monospace;

}

.option:hover {

    color: white;

    text-shadow: 0 0 10px cyan;

}

.hidden-option {

    display: none;

    margin-top: 30px;

}
.story-continue {

    display: none;

}