/*------- body basics -------*/

body {
    background-color: #fcfcf2;
    background: url("/images/blackholesim2.png") no-repeat center fixed;
    background-size: cover;
    color: white;
    font-family: operator;
    font-size: 20px;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
    margin: auto;
    height: 100vh;
    width: 100vw;
    scrollbar-width: thin;
    scrollbar-color: rgba(252, 252, 15, 0.7) rgba(255, 255, 255, 0.0);
}

.center {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}

.header {
    height: 8vh;
    min-width: 500px;
    max-width: 1000px;
/*    background-color: rgba(126, 143, 140, 0.1);
    border: 2px dotted rgba(36, 242, 211, 0.3);
    border-radius: 25px;*/
    color: #7f7f7f;
    font-size: 40px;
    overflow: hidden;
    padding: 5px;
    position: relative;
}

.navbar {
    height: 3vh;
    min-width: 450px;
    max-width: 1000px;
    background-color: rgba(24, 27, 28, 0.5);
    border: 2px dotted rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    color: #7f7f7f;
    font-size: 25px;
    overflow: hidden;
    padding-bottom: 5px;
    position: relative;
}

.main {
    height: 70vh;
    min-width: 450px;
    max-width: 1000px;
    position: relative;
    float: left;    
    padding: 10px;
    background-color: rgba(24, 27, 28, 0.5);
    border: 2px dotted rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    word-break: break-word;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.0);
}

.sidebar {
    height: 70vh;
    width: 200px;
    position: inline;
    float: left;
    overflow: hidden;
    background-color: rgba(170, 170, 170, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    word-wrap: break-word;
    scrollbar-width: thin;
    scrollbar-color: rgba(252, 252, 15, 0.7) rgba(255, 255, 255, 0.0);
} 

.footer {
    height: 3vh;
    min-width: 450px;
    max-width: 1000px;
    position: relative;
    float: left;
    padding-top: 5px;
    background-color: rgba(24, 27, 28, 0.5);
    border: 2px dotted rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    color: #7f7f7f;
    font-size: 10px;
}

.credits {
    
}

a{
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

/*------- containers -------*/
    
    /* header container */
.banner-container {
    display:flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100%;
    position: relative;
    padding-top: 5px; 
    padding-bottom: 5px; 
}
    
    /* main body container */
.container {
    display:flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100%;
    position: relative;
    padding: 0px; 
}

/*------- textboxes -------*/

   /* BASIC */
.textbox {
    height: auto;
    width: auto;
    position: relative;
    margin: 5px;
    padding: 10px;
    background: rgba(46, 46, 46, 0.3);
    color: #7f7f7f;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.0);
}

/*------- effects -------*/


/* blinking cursor */
/* USE AS SPAN STYLE */
.blinking-cursor {
    position: relative;
    animation: blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
}

@keyframes blink {
  50% {
    border-color: transparent
  }
}

/* gives text an outline */
.strokewhite{
    text-shadow:
    -1px -1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
    1px 1px 0 #FFF;  
}

.strokeblack{
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

/* justifies and spreads text to container */
.justified {
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-character;
}

/* skewed text */
.skewed {
    transform-style: preserve-3d;
	transform: skewY(-15deg);
}

/* tilted text */
.tilt-l {
  transform: rotate(-2deg);
}
.tilt-r {
  transform: rotate(2deg);
}
.tilt-l2x {
  transform: rotate(-5deg);
}
.tilt-r2x {
  transform: rotate(5deg);
}

/*------- fonts -------*/

@font-face {
  font-family: love;
  src: url("/fonts/alotoflove.ttf");
}

@font-face {
  font-family: operator;
  src: url("/fonts/operator-mono.ttf");
}

@font-face {
  font-family: pixel;
  src: url("/fonts/pixel.ttf");
}

@font-face {
  font-family: pkmn;
  src: url("/fonts/pkmn-classic.ttf");
}

@font-face {
  font-family: unbutton;
  src: url("/fonts/unbutton.ttf");
}