@font-face {
  font-family: 'pixelmix', Verdana; 
  src: url("/assets/pixelmix.ttf") format('truetype'); 
  
}


body {
  margin: 0;
  height: 100vh; 
  overflow: hidden;
  background-image: 
        url("/assets/img/bg_clouds_540_layer_1_dark.gif"), url("/assets/img/bg_clouds_540_layer_2_dark.gif"), url("/assets/img/bg_clouds_540_layer_3_dark.gif"), url("/assets/img/stars_animated_all_stars.gif"), 
        linear-gradient(#0b0d10, #1b2026);
  background-size: 200% 100%, 200% 100%, 200% 100%, 100% 50%; 
  background-repeat: repeat-x;
  animation: nighttime 60s linear infinite; 

}


@keyframes nighttime {
    0% {
      background-position: 0px 50%, 0px 50%, 0% 50%, 0% 0%; 
      }

    100% {
      background-position: -100% 50%, -300% 50%, -200% 50%, 0% 0%; 
      }
}

/* Justify-content is Left-Right, Align-items is up-down!!! */
/* for left side content, use justify-content and align with negative left margin!! */





/* Shiv city!! I mean, DIV city!!! */ 

.welcome { 
  	margin: auto; 
  	display: flex;  
  	flex-direction: column; 
  	gap: 10px; 
  	justify-content: center; 
  	align-items: center; 
  	position: relative; 
  	height: 98vh; 
}



.welcomeheader {
    display: flex; 
    justify-content: center;
    align-items: center; 
    text-align: center;
    font-family: pixelmix;
    font-size: small;
    color: #000000;
    border: 4px solid;
    border-radius: 8px;
    border-color: rgba(173, 207, 245, 1.0);
    background-color: rgba(230, 235, 247, 0.5);
    max-width: 640px;
    min-height: 20px;
    width: 100%;
}



.welcomeimg {
    border: 8px solid;
    border-radius: 64px;
    border-color: rgba(173, 207, 245, 1.0);
    background-image: url("/assets/img/Senno_pixelized.gif");
    background-size: cover;
    background-color: rgba(230, 235, 247, 0.5);
    width: 512px;
    height: 512px;
}



.welcomedialoguebox {
    display: flex; 
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center; 
    border: 8px solid;
    border-radius: 32px;
    border-color: rgba(173, 207, 245, 1.0);
    background-color: rgba(230, 235, 247, 0.5);
    max-width: 728px;
    min-height: 120px;
    width: 100%;
}



.dialogueround1 {
    display: flex; 
    justify-content: center;
    align-items: center; 
    font-family: pixelmix;
    font-size: x-large;
    color: #000000;
    max-width: 728px;
    min-height: 20px;
    width: 100%;
    animation: typewriter;
}



.welcomedialogueresponses {
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: center; 
    gap: 20px;
    font-family: pixelmix;
    font-size: large;
    color: #000000;
    max-width: 728px;
    min-height: 20px;
    width: 100%;
}



#response1 {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-family: pixelmix;
    font-size: large;
    color: #000000;
    border: 4px solid;
    border-radius: 4px;
    border-color: rgba(58, 82, 109, 1.0);
    max-width: 250px;
    min-height: 25px;
    width: 100%;
    animation: dialogueresponse 6s linear; 
    animation-fill-mode: forwards;
}

#response1:hover {
  background-color: rgba(58, 82, 109, 1.0);
  color: #FFF;
}



#response2 {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-family: pixelmix;
    font-size: large;
    color: #000000;
    border: 4px solid;
    border-radius: 4px;
    border-color: rgba(58, 82, 109, 1.0);
    max-width: 250px;
    min-height: 25px;
    width: 100%;
    animation: dialogueresponse 6s linear; 
    animation-fill-mode: forwards;
}

#response2:hover {
  background-color: rgba(58, 82, 109, 1.0);
  color: #FFF;
}






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

.typewriter { 
    display: inline-flex; 
}



.typewriter span {
    word-break: break-all; 
    height: 1.2em; 
    width: 0%; 
    overflow: hidden; 
    animation: typingeffect 6s linear; 
    animation-fill-mode: forwards;
}



.typewriter span:before {
    content: " "; 
    display: inline-block; 
}



/* ======= ANIMATIONS ======= */

@keyframes typingeffect{
    20%, 30% {width: 0%}
    70%, 80% {width: 100%}
    90%, 100% {width: 100%}
}


/* Make sure the animation length of anything that uses this is the same as the dialogue its responding to! */
@keyframes dialogueresponse{
    0%, 10% {opacity: 0}
    80%, 90% {opacity: 0}
    90.1%, 100% {opacity: 1}
}