.inner {
    width: 75vw;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;;
    line-height: var(--line-height-text);
}

.welcome {

    align-items: center; 
    display: none;   
    font-size: var(--h2);
    line-height: var(--line-height-text);
    
}


#userNameOutput {
    display: flex;
    align-items: center; 
    font-size: var(--h2);
    line-height: var(--line-height-text);

}

#userNameInput{
    display: flex;
    align-items: center;
    width:calc(75vw - 120px);
    height: 100px;
    background-color: var(--color-3);
    line-height: var(--line-height-text);
    margin-right: 40px;
    color:var(--color-4);
}

#userNameAfterInput {
  color:var(--color-4);
}

.wrapElements {
    display: flex;
    flex-direction: row;
    justify-content: center;
    
}


#userName {
  height:100vh;
  color:var(--color-3);
  
    font-size: var(--h2);
    line-height: var(--line-height-text); 
    text-shadow: 2px 2px 10px var(--color-4);
    padding: 35vh 10vw 0 10vw;
   
  top:35vh;
   
    
  

}






/* SCROLL  */
.offset-parent {
  position: relative;
  margin:0;
  padding:0;
  /* white-space: wrap; */
  display:flex;
  align-content: center;
    align-items: center;
    justify-content: center;

  
}

.marker {

  width:auto;
  display: inline-block;
  position:relative;
  
  width:50vw;
  overflow-y:hidden;
  margin:0;
  padding:0;
  white-space: wrap;
  display:flex;
  align-content: center;
    align-items: center;
    justify-content: center;

}

#MessageInputX0,
#MessageInputX1,
#MessageInputX2,
#MessageInputX3,
#MessageInputX4,
#MessageInputX5,
#MessageInputX6,
#MessageInputX7,
#MessageInputX8,
#MessageInputX9,
#MessageInputX10,
#MessageInputX11,
#MessageInputX12,
#MessageInputX13,
#MessageInputX14,
#MessageInputX15,
#MessageInputX16,
#MessageInputX17,
#MessageInputX18,
#MessageInputX19,
#MessageInputX20,
#MessageInputX21,
#MessageInputX22,
#MessageInputX23,
#MessageInputX24,
#MessageInputX25
{
  /* width:50vw; */
   border:none;
  
    border-radius: 60px;
    padding:17px 40px 25px 40px;
   

}


.q1, .q2, .q3, .q4, .q5, .q6, .q7, .q8, .q9, .q10 {
    
  
    white-space:normal;  
    /* display:none; */  
}



#bar {
  width: 0px;
  display: block;
  height:3px;
  background-color: var(--color-3);
  position:fixed;
   top:0;
  left:0;
  z-index: 1000000000000000001;
}

#barStory {
  width: 0px;
  display: none;
  height:3px;
  background-color: var(--color-3);
  position:fixed;
   top:0;
  left:0;
  z-index: 1000000000000000001;
}


.question {
/* mask-image: linear-gradient(transparent, var(--color-1) 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(transparent, var(--color-1)  20%,  transparent 100%); */
  -webkit-mask-image: linear-gradient(to bottom, rgba(66, 67, 133) 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, rgba(66, 67, 133) 50%, transparent 100%);
top:0;
  background-color:rgba(66, 67, 133, 0.5);
  text-shadow: 0px 0px 10px var(--color-4);
height: calc(40vh);
width: 100vw;


display: flex;
opacity:0;
padding-top:10px;
align-items: flex-start;
justify-content: center;
font-size: var(--h1);
text-align: center;
color:var(--color-3);
position:fixed;
top:0px;
z-index: 1000000;



}

.chooseName {
  top:180vh;
  position: absolute;
  width:100vw;

}

.first-row {
  

    display: flex; 
    flex-wrap:  wrap;
  
    justify-content: center;
  height:70vh;

  
}




#first-row-wrapper:-webkit-scrollbar {
  display: none !important;
}

/* Hide scrollbar for IE, Edge and Firefox */
#first-row-wrapper, .offset-parent {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


.story {
    top:0;
    
    position: relative;
    height:auto;
    font-size: var(--h2);
    margin:0;
    padding:0;
}




#MessagesDivX0, 
#MessagesDivX1, 
#MessagesDivX2, 
#MessagesDivX3, 
#MessagesDivX4, 
#MessagesDivX5, 
#MessagesDivX6, 
#MessagesDivX7, 
#MessagesDivX8, 
#MessagesDivX9,
#MessagesDivX10,
#MessagesDivX11, 
#MessagesDivX12, 
#MessagesDivX13, 
#MessagesDivX14, 
#MessagesDivX15, 
#MessagesDivX16, 
#MessagesDivX17, 
#MessagesDivX18, 
#MessagesDivX19,
#MessagesDivX20,
#MessagesDivX21, 
#MessagesDivX22, 
#MessagesDivX23, 
#MessagesDivX24, 
#MessagesDivX25 
{


  white-space: normal;
  width:auto;
  overflow-x: hidden;
  overflow-y: scroll;
  height: calc(100vh / 2);
 width:50vw;
  display:inline-flex;
  align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; 

  
   

  
}

.scroll::-webkit-scrollbar {
    display: none;


  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
.scroll {

  /* -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%); */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    white-space: normal;
    padding-bottom:60px;
    mask-image: linear-gradient(transparent, var(--color-1) 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(transparent, black,  94%,  transparent 100%);
    
  
 
   
    
 }

 .userName {
   /* text-transform: uppercase; */

   font-variation-settings: "srif" 100;
   color: var(--color-1);
 }


.onload {
  font-size: 2vw;
  color: var(--color-3);
  word-wrap: normal;
  white-space: normal;

  word-wrap: normal;
 width:auto;
  overflow-x: hidden;
  overflow-y: scroll;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  align-content: center;
  margin:2px 2px 2px 2px;
  padding:0px 20px 5px 20px;
  background-color: var(--color-4);
  border-radius: 80px;
  overflow: none;

}


.onload::-webkit-scrollbar {
  display: none;


}

.sort {
  display:flex;
  align-content: center;
   justify-content: center;
}



textarea {
    margin:2px 0 2px 0;
    height:108px;
    padding:0;
    border:none;
    resize: none;
    background-color: var(--color-1);
    overflow-x: hidden;  
    width:calc(50vw - 113px);
    font-weight: var(--main-font-weight);
    font-family: var(--mainFont);
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
 

   
   
}

textarea::-webkit-scrollbar {
  display: none !important;
}

/* Hide 200bar for IE, Edge and Firefox */
textarea {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

textarea:focus{
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
    color: var(--color-4);
   
    font-size: var(--h2);
    font-weight: var(--main-font-weight);
    font-family: var(--mainFont);
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

textarea::-webkit-input-placeholder {
  color:var(--color-3);
  font-weight: var(--main-font-weight);
  font-family: var(--mainFont);
    font-size: var(--h);
  }
  
  textarea:-moz-placeholder { /* Firefox 18- */
    color:var(--color-3);
    font-weight: var(--main-font-weight);
    font-family: var(--mainFont);
    font-size: var(--h2);
  }
  
  textarea::-moz-placeholder {  /* Firefox 19+ */
    color:var(--color-3);
    font-weight: var(--main-font-weight);
    font-family: var(--mainFont);
    font-size: var(--h2);
  }
  
  textarea:-ms-input-placeholder {
    color:var(--color-3);
  
    font-size: var(--h2); 
  }
  
  textarea::placeholder {
    color:var(--color-3);
   
    font-size: var(--h2);
    font-weight: var(--main-font-weight);
    font-family: var(--mainFont);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-content: center;
  }





#sendButtonX0,
#sendButtonX1,
#sendButtonX2,
#sendButtonX3,
#sendButtonX4,
#sendButtonX5,
#sendButtonX6,
#sendButtonX7,
#sendButtonX8,
#sendButtonX9,
#sendButtonX10,
#sendButtonX11,
#sendButtonX12,
#sendButtonX13,
#sendButtonX14,
#sendButtonX15,
#sendButtonX16,
#sendButtonX17,
#sendButtonX18,
#sendButtonX19,
#sendButtonX20,
#sendButtonX21,
#sendButtonX22,
#sendButtonX23,
#sendButtonX24,
 .nextButtonX0,
 .nextButtonX1,
 .nextButtonX2,
 .nextButtonX3,
 .nextButtonX4,
 .nextButtonX5,
 .nextButtonX6,
 .nextButtonX7,
 .nextButtonX8,
 .nextButtonX9,
 .nextButtonX10,
 .nextButtonX11,
 .nextButtonX12,
 .nextButtonX13,
 .nextButtonX14,
 .nextButtonX15,
 .nextButtonX16,
 .nextButtonX17,
 .nextButtonX18,
 .nextButtonX19,
 .nextButtonX20,
 .nextButtonX21,
 .nextButtonX22,
 .nextButtonX23,
 .nextButtonX24,
 .backButtonX0,
 .backButtonX1,
 .backButtonX2,
 .backButtonX3,
 .backButtonX4,
 .backButtonX5,
 .backButtonX6,
 .backButtonX7,
 .backButtonX8,
 .backButtonX9,
 .backButtonX10,
 .backButtonX11,
 .backButtonX12,
 .backButtonX13,
 .backButtonX14,
 .backButtonX15,
 .backButtonX16,
 .backButtonX17,
 .backButtonX18,
 .backButtonX19,
 .backButtonX20,
 .backButtonX21,
 .backButtonX22,
 .backButtonX23,
 .backButtonX24 {

  bottom:0;
  z-index: 1000000;
 
 
  font-size:var(--h2);
  /* padding:20px; */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  

}

.sendButton {
  border-radius: 108px;
  background-color: var(--color-3);
  width:108px;
  height:108px;
  color:var(--color-4);

}

.backButton, .nextButton {
  border-radius: 60px;
  width:calc(25vw - 2px);
  height:60px;
  background-color: var(--color-3);
  color:var(--color-4);
  font-family: var(--mainFont);

  
}


.navButtons {

  display:inline-flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  bottom:0;
  left:0;
  width:50vw;
  z-index: 1000000;
  height:180px;
 

 
}
.X0 {
  left:-2750px;
  top:  -500px;
}

.X1 {
  left:-4750px;
  top:0px;
}

.X2 {
  left:-3550px;
  top:1300px;
}

.X3 {
  left:-5250px;
  top:1700px;
}

.X4 {
  left:-3450px;
  top:2600px;
}


.X5 {
  left:-4250px;
  top:3800px;
}

.X6 {
  left:-3950px;
  top:4800px;
}

.X7 {
  left:-4550px;
  top:5800px;
}

.X8 {
  left:-3300px;
  top:7000px;
}

.X9 {
  left:-4800px;
  top:8000px;
}

.X10 {
  left:-3300px;
  top:9000px;
}

.X11 {
  left:-1900px;
  top:7200px;
}

.X12 {
  left:-800px;
  top:6500px;
}

.X13 {
  left:-1900px;
  top:5000px;
}

.X14 {
  left: -1100px;
  top:3800px;
}

.X15 {
  left: -750px;
  top:2600px;
 
}


.X16 {
  left: 1300px;
  top:1300px;

}

.X17 {
  left: 2300px;
  top:0px;

}

.X18 {
  left: 3400px;
  top:1800px;

}

.X19 {
  left: 1200px;
  top:2700px;

}

.X20 {
  left: 2600px;
  top:4000px;

}

.X21 {
  left:2000px;
  top:5000px;

}


.X22 {
  left:2600px;
  top:6300px;

}

.X23 {
  left:1800px;
  top:8000px;

}

.X24 {
  left:3000px;
  top:9000px;
}


.X0,
.X1,
.X2,
.X3,
.X4,
.X5,
.X6,
.X7,
.X8,
.X9,
.X10,
.X11,
.X12,
.X13,
.X14,
.X15,
.X16,
.X17,
.X18,
.X19,
.X20,
.X21,
.X22,
.X23,
.X24
{

  position: absolute;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding:0 25vw 0 25vw;
  width:100vw;
  height:calc(100vh - 200px);
  visibility:hidden;
 
}