/* 
 So you found my incredible CSS file!
 Have a looka round, I wrote this with the help of the internet.
 It's a mess I know. But it works! So don't touch it :D
*/
*{
    font-family: 'Courier New', monospace;
    background: black;
    font-size: clamp(16px, 4vw, 22px);
}

hr{
    padding: 0px;
    margin: 0px;    
    border: none;
    height: 1px;
    border-top: 1px dashed #7AFB4C;
  }

html, body{ 
    margin: 0; 
    padding: 0;
    height: 100vh;
    width: 100vw;
    /* height: -webkit-fill-available; */
    overflow: hidden; 
}
.clear{clear: both;}

.red{color:red;}

.grey{color:grey;}

.green{color:#7AFB4C;}

.terminal {
    overflow:hidden;
    margin: 0em;
    height:100%;
}

#scrollableContent{
    height: -moz-calc(100vh - 45px);
    height: -o-calc(100vh - 45px);
    height: -webkit-calc(100vh  - 45px);
    height: calc(100vh  - 45px);
    /* min-height: -webkit-fill-available; */
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    overflow-x: hidden;
}

#responseText {
    padding: 8px;
    width: 100%;
  }

#inputWrapper
{
    height: 40px;
    padding-left: 8px;
    padding-right: 8px;
    bottom: 0%;
    min-width: 100%;
    max-width: 100%;
}

#playerInput{
    background: transparent;
    border: none;
    outline:none;
    min-width: 90%;
    max-width: 95%;  
}

input{
    color:#7AFB4C;;
}

::placeholder
{
    color:grey;
}

.textLine{
    display: block;
    word-break: break-all;
    padding: 0 25px 0 7px;
}

.rainbow-bg{
    animation: rainbow-bg 2.5s linear;
    animation-iteration-count: infinite;
}

.rainbow{
    animation: rainbow 2.5s linear;
    animation-iteration-count: infinite;
}

@keyframes rainbow-bg{
    100%,0%{
        background-color: rgb(255,0,0);
    }
    8%{
        background-color: rgb(255,127,0);
    }
    16%{
        background-color: rgb(255,255,0);
    }
    25%{
        background-color: rgb(127,255,0);
    }
    33%{
        background-color: rgb(0,255,0);
    }
    41%{
        background-color: rgb(0,255,127);
    }
    50%{
        background-color: rgb(0,255,255);
    }
    58%{
        background-color: rgb(0,127,255);
    }
    66%{
        background-color: rgb(0,0,255);
    }
    75%{
        background-color: rgb(127,0,255);
    }
    83%{
        background-color: rgb(255,0,255);
    }
    91%{
        background-color: rgb(255,0,127);
    }
}

@keyframes rainbow{
    100%,0%{
        color: rgb(255,0,0);
    }
    8%{
        color: rgb(255,127,0);
    }
    16%{
        color: rgb(255,255,0);
    }
    25%{
        color: rgb(127,255,0);
    }
    33%{
        color: rgb(0,255,0);
    }
    41%{
        color: rgb(0,255,127);
    }
    50%{
        color: rgb(0,255,255);
    }
    58%{
        color: rgb(0,127,255);
    }
    66%{
        color: rgb(0,0,255);
    }
    75%{
        color: rgb(127,0,255);
    }
    83%{
        color: rgb(255,0,255);
    }
    91%{
        color: rgb(255,0,127);
    }
}

/* .fade-in {
	animation: fadeIn 2s;
  	opacity: 1;
}

@keyframes fadeIn {
  from {
  	opacity: 0;
  }
  to {
 	opacity: 1;
  }
}  */

.shadow { box-shadow: 0px 0px 10px rgba(0,0,0,.4)}