@font-face {
    font-family: 'Gugi';
    src: url('/app/assets/fonts/Gugi-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Inter Semibold';
    src: url('/app/assets/fonts/Inter-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Source Bold';
    src: url('/app/assets/fonts/SourceSans3-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Source SemiBold';
    src: url('/app/assets/fonts/SourceSans3-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Source Regular';
    src: url('/app/assets/fonts/SourceSans3-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* 
Blockierem von text auswahl:
-webkit-user-select: none;  
-moz-user-select: none;    
-ms-user-select: none;      
user-select: none;
*/
@media (max-width: 319px) {
    /* Handy winzig */
    body {
        background-color: #000000;
    }
    #warn-unsupported {
      display: block !important;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: rgb(255, 255, 255);
      z-index: 101;
      margin: 0;
      text-align: center;
      padding: 0;
      font-family: Source SemiBold;
    }
    #warn2-unsupported {
      position: absolute;
      top: 30vh;
      left: 10vw;
      width: 80vw;
      max-width: 80vw;
      height: auto;
      background-color: #121212;
      border-radius: 15px;
      color: rgb(255, 255, 255);
      z-index: 101;
      padding-left: 0%;
    }
    #warn-unsupported h1{
      max-width: 90%;
      font-size: 6vw;
      margin-bottom: 20px;
      margin-left: 5%;
      font-family: Source SemiBold;
      -webkit-user-select: none;  
                -moz-user-select: none;    
                -ms-user-select: none;      
                user-select: none;
    }
  }
@media (min-width: 320px) and (max-width: 480px) {
    /* Handy */
    body {
        background-color: #121212;
        height: 100vh;
        max-height: 100vh;
        width: 100vw;
        max-width: 100vw;
        overflow: hidden;
        overflow-y: hidden !important;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }
    #wave {
        position: absolute;
        left: 0;
        top: 0%;
        overflow: hidden;
        overflow-y: hidden;
        overflow-x: hidden;
        z-index: -2;
        width: 100%;
        height: 100%;
    }
    #wave-tablet {
      display: none;
      position: absolute;
      left: -200vw;
      z-index: -99;
      opacity: 0;
    }
    #title {
        font-family: Gugi;
        color: #FFFFFF;
        font-size: 18vw;
        font-weight: 300;
        margin-left: 6vw;
        margin-top: 9vh;
        z-index: 1;
        -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
    }
    #InstButton {
        width: 45vh;
        height: 45vh;
        font-family: Gugi;
        font-size: 9vw;
        font-weight: 300;
        color: #FFFFFF;
        border: none;
        padding-left: 20vw;
        padding-bottom: 9vh;
        border-radius: 50%;
        background: rgb(153,16,163);
        background: -moz-linear-gradient(0deg, rgba(153,16,163,1) 0%, rgba(226,109,114,1) 100%);
        background: -webkit-linear-gradient(0deg, rgba(153,16,163,1) 0%, rgba(226,109,114,1) 100%);
        background: linear-gradient(0deg, rgba(153,16,163,1) 0%, rgba(226,109,114,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9910a3",endColorstr="#e26d72",GradientType=1); 
        align-items: center;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: scala 4s ease-in-out 0s infinite normal none;
        z-index: 102;
        -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
    }
    #cicle2 {
        width: 50vh;
        height: 50vh;
        border-radius: 50%;
        background: rgb(226,109,114);
        background: rgb(153,16,163);
        background: -moz-linear-gradient(0deg, rgba(153,16,163,0.39) 0%, rgba(226,109,114,0.41) 100%);
        background: -webkit-linear-gradient(0deg, rgba(153,16,163,0.39) 0%, rgba(226,109,114,0.41) 100%);
        background: linear-gradient(0deg, rgba(153,16,163,0.39) 0%, rgba(226,109,114,0.41) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9910a3",endColorstr="#e26d72",GradientType=1); 
        align-items: center;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: scala 4s ease-in-out 0.3s infinite normal none;
        z-index: 101;
    }
    #cicle3 {
        width: 55vh;
        height: 55vh;
        border-radius: 50%;
        background: rgb(153,16,163);
        background: -moz-linear-gradient(0deg, rgba(153,16,163,0.24) 0%, rgba(226,109,114,0.17) 100%);
        background: -webkit-linear-gradient(0deg, rgba(153,16,163,0.24) 0%, rgba(226,109,114,0.17) 100%);
        background: linear-gradient(0deg, rgba(153,16,163,0.24) 0%, rgba(226,109,114,0.17) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9910a3",endColorstr="#e26d72",GradientType=1); 
        align-items: center;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 45vh;
        margin-left: -40vw;
        animation: scala 4s ease-in-out 0.5s infinite normal none;
        z-index: 100;
    }
    @keyframes scala {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(0.98);
      }
      100% {
          transform: scale(1);
      }
      
    }
    #about_container {
      width: 50vw;
      height: 15vh;
      background: rgb(175,44,149);
      background: -moz-linear-gradient(331deg, rgba(175,44,149,1) 0%, rgba(224,107,116,1) 100%);
      background: -webkit-linear-gradient(331deg, rgba(175,44,149,1) 0%, rgba(224,107,116,1) 100%);
      background: linear-gradient(331deg, rgba(175,44,149,1) 0%, rgba(224,107,116,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#af2c95",endColorstr="#e06b74",GradientType=1); 
      border-radius: 20px 0 0 20px;
      right: 0;
      top: 35vh;
      position: absolute;
      color: #FFFFFF;
      font-family: Inter Semibold;
      text-decoration: none;
      font-size: 5vw;
      text-align: center;
      padding-top: 0%;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 0.5s ease;
  }
  #about_container.expanded {
    width: 100vw; /* expand to full width */
    height: 100vh; /* expand to full height */
    top: 0; /* position from the top */
    border-radius: 15px; /* remove border radius */
    font-size: 10vw; /* increase font size */
    transition: all 1s ease; /* add a longer transition for the 5 seconds */
  }
  
  /* add a class to trigger the animation */
  #about_container.animate {
    animation: growAndShrink 5s linear forwards; /* trigger the animation for 5 seconds */
  }
  
  /* keyframes for the animation */
  @keyframes growAndShrink {
    0% {
      transform: scale(1); /* initial size */
    }
    100% {
      transform: scale(1.2); /* 20% larger size */
    }
  }
  #about_container2.fade-out {
    opacity: 0;
    pointer-events: none; /* Disable pointer events during the animation */
    transition: opacity 0.5s ease;
  }
  
  #about_container2 hr.hrr.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  
  #about_container a {
      color: #FFFFFF;
      text-decoration: none;
      -webkit-user-select: none;  
      -moz-user-select: none;    
      -ms-user-select: none;      
      user-select: none;
  }
  
  #about_container2 {
      margin-top: 0;
  }
  
  hr.hrr {
      border: 1px solid #FFFFFF;
      width: 80%;
      margin-top: 1vh;
      margin-bottom: 1vh;
  }
  
    #setup{
        position: fixed;
        margin: 0;
        padding: 0;
        z-index: 3;
    }
    #title_setup{
            font-family: Gugi;
            color: #FFFFFF;
            font-size: 16vw;
            font-weight: 300;
            margin-left: 6vw;
            margin-top: 9vh;
            -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
    }
    #steps {
        color: #FFFFFF;
        font-family: Source SemiBold;
        font-size: 7vw;
        position: absolute;
        right: 5vw;
        top: 8vh;
        -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
    }
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      margin: 4vh 10vw;
      cursor: pointer;
      font-size: 5vw;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      background-color: #71438299;
      border-radius: 250000px;
      height: 7vh;
      width: 80vw;
      padding-top: 0.002vh;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }
      .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
      }
      .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 7vh;
        width: 7vh;
        background: rgb(158,37,215);
        background: -moz-linear-gradient(180deg, rgba(158,37,215,1) 0%, rgba(177,177,177,0.3) 100%);
        background: -webkit-linear-gradient(180deg, rgba(158,37,215,1) 0%, rgba(177,177,177,0.3) 100%);
        background: linear-gradient(180deg, rgba(158,37,215,1) 0%, rgba(177,177,177,0.3) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9e25d7",endColorstr="#b1b1b1",GradientType=1); 
        border-radius: 50%;
      }
      .checkmark:after {
        content: "";
        position: absolute;
        /* display: none; */
      }
      .container input:checked ~ .checkmark:after {
        display: block;
        background: #FFFFFF;
      }
      .container .checkmark:after {
           top: 1vh;
          left: 1vh;
          width: 5vh;
          height: 5vh;
          border-radius: 50%;
          background: #D1D1D150;
      }
      .container p,
    .container h3 {
        margin: 0;
        font-family: Source SemiBold;
        color: #FFFFFF;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
    }
    input:focus{
            outline: none;
    }
    #InfoBox {
      width: 80vw;
      max-width: 400px; /* Set a max-width to prevent it from becoming too wide on larger screens */
      height: 10vh;
      margin: 4vh auto; /* Center horizontally with auto margins */
      text-align: center;
      background: rgb(176, 45, 148);
      background: -moz-linear-gradient(54deg, rgba(176, 45, 148, 0.6) 0%, rgba(223, 106, 116, 0.6) 30%);
      background: -webkit-linear-gradient(54deg, rgba(176, 45, 148, 0.6) 0%, rgba(223, 106, 116, 0.6) 30%);
      background: linear-gradient(54deg, rgba(176, 45, 148, 0.6) 0%, rgba(223, 106, 116, 0.6) 30%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b02d94", endColorstr="#df6a74", GradientType=1);
      border-radius: 250000px; /* Adjusted for smaller screens */
      color: #FFFFFF;
      font-family: Source Bold;
      font-size: 3.4vw; /* Adjusted for smaller screens */
      padding: 1vh 2vw; /* Adjusted for smaller screens */
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
  }
  
  #InfoText {
      margin: 0;
      font-size: 7vw; /* Adjusted for smaller screens */
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  
  /* Media query for screens with width 400px and below */
  @media (max-width: 400px) {
      #InfoBox {
          font-size: 5vw; /* Adjusted for even smaller screens */
          padding: 1vh 3vw; /* Adjusted for even smaller screens */
      }
  
      #InfoText {
          font-size: 6vw; /* Adjusted for even smaller screens */
      }
  }
  
    #next{
        background: rgb(228,112,112);
        background: -moz-linear-gradient(140deg, rgba(228,112,112,1) 0%, rgba(145,6,168,1) 100%);
        background: -webkit-linear-gradient(140deg, rgba(228,112,112,1) 0%, rgba(145,6,168,1) 100%);
        background: linear-gradient(140deg, rgba(228,112,112,1) 0%, rgba(145,6,168,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e47070",endColorstr="#9106a8",GradientType=1); 
        border: none;
        border-radius: 999px;
        font-family: Source SemiBold;
        color: #FFFFFF;
        padding-left: 1vw;
        padding-right: 1vw;
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 10vw;
        margin-left: 25vw;
        margin-top: 8vh;
        width: 50vw;
        -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
    }
    .startSet {
        animation: scale 0.5s ease-in-out 0s 1 normal none !important;
        z-index: 98;
    }
    @keyframes scale {
        0% {
          transform: scale(1);
        }
        100% {
            transform: scale(10);

        }
      }
      #warn {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgb(255, 255, 255);
  z-index: 101;
  margin: 0;
  text-align: center;
  padding: 0;
}
#warn2 {
  position: absolute;
  top: 30vh;
  left: 10vw;
  width: 80vw;
  max-width: 80vw;
  height: auto;
  background-color: #121212;
  border-radius: 15px;
  color: rgb(255, 255, 255);
  z-index: 101;
  padding-left: 0%;
}
#warn h1{
  max-width: 90%;
  font-size: 6vw;
  margin-bottom: 20px;
  margin-left: 5%;
  font-family: Source SemiBold;
  -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
}
#warnbtn {
  border-radius: 999px;
  border: 0;
  padding: 10px;
  font-family: Source Regular;
  font-size: 5vw;
  color: rgb(0, 0, 0);
  background-color: #ffffff;
  width: 100%;
  -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
}
#warn_yn {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgb(255, 255, 255);
    z-index: 100;
    margin: 0;
    text-align: center;
    padding: 0;
  }
  #warn_yn h1{
    max-width: 90%;
    font-size: 6vw;
    margin-bottom: 20px;
    margin-left: 5%;
    font-family: Source SemiBold;
    -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
  }
  #warnbtn_y {
    border-radius: 999px;
    border: 0;
    padding: 10px;
    font-family: Source Regular;
    font-size: 5vw;
    color: rgb(0, 0, 0);
    background-color: #ffffff; 
    width: 100%;
    -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
  }
  #warnbtn_n {
    margin-top: 10px;
    border-radius: 999px;
    border: 5px solid #FFFFFF;
    padding: 10px;
    font-family: Source Regular;
    font-size: 5vw;
    color: #FFFFFF;
    background-color: #ffffff00;
    width: 100%;
    -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
  }
  #endText{
    color: #FFFFFF;
    font-family: Source SemiBold;
    max-width: 70vw;
    margin-left: 15vw;
    text-align: center;
    font-size: 10vw;
    -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
  }
  #howto {
    margin-top: 2vh;
    border-radius: 999px;
    border: 5px solid #BE408A;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: Source Regular;
    font-size: 8vw;
    color: #FFFFFF;
    background-color: #ffffff00;
    width: 50vw;
    margin-left: 25vw;
    -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
  }
  #loading {
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    background: rgb(18,160,169);
    background: -moz-linear-gradient(148deg, rgba(18,160,169,1) 0%, rgba(122,27,137,1) 100%);
    background: -webkit-linear-gradient(148deg, rgba(18,160,169,1) 0%, rgba(122,27,137,1) 100%);
    background: linear-gradient(148deg, rgba(18,160,169,1) 0%, rgba(122,27,137,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#12a0a9",endColorstr="#7a1b89",GradientType=1); 
    z-index: 99;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 30vh;
  }
  #loading h1 {
    margin: 0;
    font-family: Source Bold;
    color: #FFFFFF;
    -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
  }
  #loading h2 {
    margin: 0;
    max-width: 80vw;
    font-family: Source SemiBold;
    color: #ebebeb;
    -webkit-user-select: none;  
            -moz-user-select: none;    
            -ms-user-select: none;      
            user-select: none;
  }
  #howtopop {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 97;
  }
  #howtostyle {
    background: rgb(227,110,113);
    background: -moz-linear-gradient(0deg, rgba(227,110,113,1) 0%, rgba(178,48,147,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(227,110,113,1) 0%, rgba(178,48,147,1) 100%);
    background: linear-gradient(0deg, rgba(227,110,113,1) 0%, rgba(178,48,147,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e36e71",endColorstr="#b23093",GradientType=1); 
    z-index: 98;
    width: 100vw;
    height: 60vh;
    text-align: center;
    border-radius: 25px 25px 0 0;
    margin-top: 20vh;
    padding-top: 1vh;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  #howtopoptitle {
    color: #FFFFFF;
    font-family: Source Bold;
    font-size: 7.5vw;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
  }
  #howtopoptxt {
    color: #f7f7f7;
    font-family: Source Regular;
    font-size: 5vw;
    max-width: 80vw;
    margin-left: 10vw;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
  }
  #howtoremove{
    height: 20vh;
    position: absolute;
    top: 0;
    z-index: 97;
    width: 100vw;
    background-color: #00000000;
  }
  #version {
    top: 1vh;
    right: 4vw;
    position: absolute;
    color: #FFFFFF;
    font-family: Source Regular;
    font-size: 5vw;
    z-index: 110;
  }
  @media screen and (max-height: 900px) and (max-width: 479px) {
    #cicle3 {
        margin-left: -35vw; /* Adjust margin-left for smaller screens */
    }
    #InstButton {
      padding-left: 23vw;
      font-size: 9vw;
    }
    #endText {
      font-size: 7vw;
    }
}
.beta-text {
  font-size: 40%;
  color: #e2df0c;  
  margin-left: 5px;
  vertical-align: top;
  font-family: Source SemiBold;
}
#entranceContainer, #entranceContainer2 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(331deg, rgba(175, 44, 149, 1) 0%, rgba(224, 107, 116, 1) 100%);
  color: #FFFFFF;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Inter Semibold;
  font-size: 5vw;
  opacity: 0;
  animation: fadeIn 2s ease;
  pointer-events: none; 
}

@keyframes fadeIn {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
}

  @media (min-width: 481px) and (max-width: 1023px) {
    /* tablet */
    body {
        background-color: #ac7171;
    }
    #warn-unsupported {
      display: block !important;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: rgb(255, 255, 255);
      z-index: 101;
      margin: 0;
      text-align: center;
      padding: 0;
      font-family: Source SemiBold;
    }
    #warn2-unsupported {
      position: absolute;
      top: 30vh;
      left: 10vw;
      width: 80vw;
      max-width: 80vw;
      height: auto;
      background-color: #121212;
      border-radius: 15px;
      color: rgb(255, 255, 255);
      z-index: 101;
      padding-left: 0%;
    }
    #warn-unsupported h1{
      max-width: 90%;
      font-size: 6vw;
      margin-bottom: 20px;
      margin-left: 5%;
      font-family: Source SemiBold;
      -webkit-user-select: none;  
                -moz-user-select: none;    
                -ms-user-select: none;      
                user-select: none;
    }
  }

  @media (min-width: 1024px){
    /* Desktop */
    body {
      background-color: #121212;
      height: 100vh;
      max-height: 100vh;
      width: 100vw;
      max-width: 100vw;
      overflow: hidden;
      overflow-y: hidden !important;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
  }
  #wave-tablet {
    position: absolute;
    left: 0;
    top: 0%;
    overflow: hidden;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: -1;
    width: 100%;
    height: 100%;
}
#wave {
  display: none;
  position: absolute;
  left: -200vw;
  z-index: -99;
  opacity: 0;
}
  #title {
      font-family: Gugi;
      color: #FFFFFF;
      font-size: 10vw;
      font-weight: 300;
      margin-left: 6vw;
      margin-top: 9vh;
      z-index: 1;
      -webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
  }
  #InstButton {
      width: 55vh;
      height: 55vh;
      font-family: Gugi;
      font-size: 4vw;
      font-weight: 300;
      color: #FFFFFF;
      border: none;
      padding-left: 5vw;
      padding-bottom: 10vh;
      border-radius: 50%;
      background: rgb(153,16,163);
      background: -moz-linear-gradient(0deg, rgba(153,16,163,1) 0%, rgba(226,109,114,1) 100%);
      background: -webkit-linear-gradient(0deg, rgba(153,16,163,1) 0%, rgba(226,109,114,1) 100%);
      background: linear-gradient(0deg, rgba(153,16,163,1) 0%, rgba(226,109,114,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9910a3",endColorstr="#e26d72",GradientType=1); 
      align-items: center;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: scala 4s ease-in-out 0s infinite normal none;
      z-index: 102;
      -webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
  }
  #cicle2 {
      width: 60vh;
      height: 60vh;
      border-radius: 50%;
      background: rgb(226,109,114);
      background: rgb(153,16,163);
      background: -moz-linear-gradient(0deg, rgba(153,16,163,0.39) 0%, rgba(226,109,114,0.41) 100%);
      background: -webkit-linear-gradient(0deg, rgba(153,16,163,0.39) 0%, rgba(226,109,114,0.41) 100%);
      background: linear-gradient(0deg, rgba(153,16,163,0.39) 0%, rgba(226,109,114,0.41) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9910a3",endColorstr="#e26d72",GradientType=1); 
      align-items: center;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: scala 4s ease-in-out 0.3s infinite normal none;
      z-index: 101;
  }
  #cicle3 {
      width: 65vh;
      height: 65vh;
      border-radius: 50%;
      background: rgb(153,16,163);
      background: -moz-linear-gradient(0deg, rgba(153,16,163,0.24) 0%, rgba(226,109,114,0.17) 100%);
      background: -webkit-linear-gradient(0deg, rgba(153,16,163,0.24) 0%, rgba(226,109,114,0.17) 100%);
      background: linear-gradient(0deg, rgba(153,16,163,0.24) 0%, rgba(226,109,114,0.17) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9910a3",endColorstr="#e26d72",GradientType=1); 
      align-items: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 35vh;
      margin-left: -10vw;
      animation: scala 4s ease-in-out 0.5s infinite normal none;
      z-index: 100;
  }
  @keyframes scala {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
    
  }
  #about_container {
    width: 30vw;
    height: 23vh;
    background: rgb(175,44,149);
    background: -moz-linear-gradient(331deg, rgba(175,44,149,1) 0%, rgba(224,107,116,1) 100%);
    background: -webkit-linear-gradient(331deg, rgba(175,44,149,1) 0%, rgba(224,107,116,1) 100%);
    background: linear-gradient(331deg, rgba(175,44,149,1) 0%, rgba(224,107,116,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#af2c95",endColorstr="#e06b74",GradientType=1); 
    border-radius: 20px 0 0 20px;
    right: 0;
    top: 35vh;
    position: absolute;
    color: #FFFFFF;
    font-family: Inter Semibold;
    text-decoration: none;
    font-size: 3vw;
    text-align: center;
    padding-top: 0%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
}
#about_container.expanded {
  width: 100vw; /* expand to full width */
  height: 100vh; /* expand to full height */
  top: 0; /* position from the top */
  border-radius: 15px; /* remove border radius */
  font-size: 10vw; /* increase font size */
  transition: all 1s ease; /* add a longer transition for the 5 seconds */
}

/* add a class to trigger the animation */
#about_container.animate {
  animation: growAndShrink 5s linear forwards; /* trigger the animation for 5 seconds */
}

/* keyframes for the animation */
@keyframes growAndShrink {
  0% {
    transform: scale(1); /* initial size */
  }
  100% {
    transform: scale(1.2); /* 20% larger size */
  }
}
#about_container2.fade-out {
  opacity: 0;
  pointer-events: none; /* Disable pointer events during the animation */
  transition: opacity 0.5s ease;
}

#about_container2 hr.hrr.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}

#about_container a {
    color: #FFFFFF;
    text-decoration: none;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
    user-select: none;
}

#about_container2 {
    margin-top: 0;
}

hr.hrr {
    border: 1px solid #FFFFFF;
    width: 80%;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

  #setup{
      position: fixed;
      margin: 0;
      padding: 0;
      z-index: 3;
  }
  #title_setup{
          font-family: Gugi;
          color: #FFFFFF;
          font-size: 7vw;
          font-weight: 300;
          margin-left: 6vw;
          margin-top: 9vh;
          margin-bottom: 3vh;
          -webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
  }
  #steps {
      color: #FFFFFF;
      font-family: Source SemiBold;
      font-size: 5vw;
      position: absolute;
      right: 5vw;
      top: 8vh;
      -webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
  }
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 4vh 30vw;
    cursor: pointer;
    font-size: 2.5vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    background-color: #71438299;
    border-radius: 250000px;
    height: 8.5vh;
    width: 40vw;
    padding-top: 0.002vh;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
    .container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }
    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 8.5vh;
      width: 8.5vh;
      background: rgb(158,37,215);
      background: -moz-linear-gradient(180deg, rgba(158,37,215,1) 0%, rgba(177,177,177,0.3) 100%);
      background: -webkit-linear-gradient(180deg, rgba(158,37,215,1) 0%, rgba(177,177,177,0.3) 100%);
      background: linear-gradient(180deg, rgba(158,37,215,1) 0%, rgba(177,177,177,0.3) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9e25d7",endColorstr="#b1b1b1",GradientType=1); 
      border-radius: 50%;
    }
    .checkmark:after {
      content: "";
      position: absolute;
      /* display: none; */
    }
    .container input:checked ~ .checkmark:after {
      display: block;
      background: #FFFFFF;
    }
    .container .checkmark:after {
         top: 1vh;
        left: 1vh;
        width: 6.5vh;
        height: 6.5vh;
        border-radius: 50%;
        background: #D1D1D150;
    }
    .container p,
  .container h3 {
      margin: 0;
      font-family: Source SemiBold;
      color: #FFFFFF;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      text-align: center;
  }
  input:focus{
          outline: none;
  }
  #InfoBox {
    width: 80vw;
    max-width: 400px;
    height: 11.5vh;
    margin: 4vh auto;
    margin-top: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center content horizontally and vertically */
    background: linear-gradient(54deg, rgba(176, 45, 148, 0.6) 0%, rgba(223, 106, 116, 0.6) 30%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b02d94", endColorstr="#df6a74", GradientType=1);
    border-radius: 250000px;
    color: #FFFFFF;
    font-family: 'Source Bold'; /* Wrap font family in quotes if it contains spaces */
    font-size: 3.4vw;
    padding: 1vh 2vw;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#InfoText {
    margin: 0;
    font-size: 2.5vw;
    max-width: 400px;
    white-space: pre-wrap; /* Allow text to wrap onto the next line */
    word-wrap: break-word; 
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis (...) for overflow text */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Media query for screens with width 400px and below */
@media (max-width: 400px) {
    #InfoBox {
        font-size: 5vw; /* Adjusted for even smaller screens */
        padding: 1vh 3vw; /* Adjusted for even smaller screens */
    }

    #InfoText {
        font-size: 6vw; /* Adjusted for even smaller screens */
    }
}

  #next{
      background: rgb(228,112,112);
      background: -moz-linear-gradient(140deg, rgba(228,112,112,1) 0%, rgba(145,6,168,1) 100%);
      background: -webkit-linear-gradient(140deg, rgba(228,112,112,1) 0%, rgba(145,6,168,1) 100%);
      background: linear-gradient(140deg, rgba(228,112,112,1) 0%, rgba(145,6,168,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e47070",endColorstr="#9106a8",GradientType=1); 
      border: none;
      border-radius: 999px;
      font-family: Source SemiBold;
      color: #FFFFFF;
      padding-left: 1vw;
      padding-right: 1vw;
      padding-top: 10px;
      padding-bottom: 10px;
      font-size: 3vw;
      margin-left: 35vw;
      margin-top: 2vh;
      width: 30vw;
      -webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
  }
  .startSet {
      animation: scale 0.5s ease-in-out 0s 1 normal none !important;
      z-index: 98;
  }
  @keyframes scale {
      0% {
        transform: scale(1);
      }
      100% {
          transform: scale(10);

      }
    }
    #warn {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: rgb(255, 255, 255);
z-index: 101;
margin: 0;
text-align: center;
padding: 0;
}
#warn2 {
position: absolute;
top: 30vh;
left: 30vw;
width: 40vw;
max-width: 40vw;
height: auto;
background-color: #121212;
border-radius: 15px;
color: rgb(255, 255, 255);
z-index: 101;
padding-left: 0%;
}
#warn h1{
max-width: 90%;
font-size: 3vw;
margin-bottom: 20px;
margin-left: 5%;
font-family: Source SemiBold;
-webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
}
#warnbtn {
border-radius: 999px;
border: 0;
padding: 10px;
font-family: Source Regular;
font-size: 3vw;
color: rgb(0, 0, 0);
background-color: #ffffff;
width: 100%;
-webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
}
#warn_yn {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgb(255, 255, 255);
  z-index: 100;
  margin: 0;
  text-align: center;
  padding: 0;
}
#warn_yn h1{
  max-width: 90%;
  font-size: 3vw;
  margin-bottom: 20px;
  margin-left: 5%;
  font-family: Source SemiBold;
  -webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
}
#warnbtn_y {
  border-radius: 999px;
  border: 0;
  padding: 10px;
  font-family: Source Regular;
  font-size: 3vw;
  color: rgb(0, 0, 0);
  background-color: #ffffff; 
  width: 100%;
  -webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
}
#warnbtn_n {
  margin-top: 10px;
  border-radius: 999px;
  border: 5px solid #FFFFFF;
  padding: 10px;
  font-family: Source Regular;
  font-size: 3vw;
  color: #FFFFFF;
  background-color: #ffffff00;
  width: 100%;
  -webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
}
#endText{
  color: #FFFFFF;
  font-family: Source SemiBold;
  max-width: 70vw;
  margin-left: 15vw;
  text-align: center;
  font-size: 3vw;
  -webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
}
#howto {
  margin-top: 2vh;
  border-radius: 999px;
  border: 5px solid #BE408A;
  padding-left: 1vw;
  padding-right: 1vw;
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: Source Regular;
  font-size: 3vw;
  color: #FFFFFF;
  background-color: #ffffff00;
  width: 30vw;
  margin-left: 35vw;
  -webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
}
#loading {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  background: rgb(18,160,169);
  background: -moz-linear-gradient(148deg, rgba(18,160,169,1) 0%, rgba(122,27,137,1) 100%);
  background: -webkit-linear-gradient(148deg, rgba(18,160,169,1) 0%, rgba(122,27,137,1) 100%);
  background: linear-gradient(148deg, rgba(18,160,169,1) 0%, rgba(122,27,137,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#12a0a9",endColorstr="#7a1b89",GradientType=1); 
  z-index: 99;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 30vh;
  padding-left: 15vw;
}
#loading h1 {
  margin: 0;
  font-family: Source Bold;
  color: #FFFFFF;
  -webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
}
#loading h2 {
  margin: 0;
  max-width: 80vw;
  font-family: Source SemiBold;
  color: #ebebeb;
  -webkit-user-select: none;  
          -moz-user-select: none;    
          -ms-user-select: none;      
          user-select: none;
}
#howtopop {
  position: absolute;
  width: 100vw;
  height: 100vh;
  z-index: 97;
}
#howtostyle {
  background: rgb(227,110,113);
  background: -moz-linear-gradient(0deg, rgba(227,110,113,1) 0%, rgba(178,48,147,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(227,110,113,1) 0%, rgba(178,48,147,1) 100%);
  background: linear-gradient(0deg, rgba(227,110,113,1) 0%, rgba(178,48,147,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e36e71",endColorstr="#b23093",GradientType=1); 
  z-index: 98;
  width: 70vw;
  height: 70vh;
  text-align: center;
  border-radius: 25px 25px 0 0;
  margin-top: 10vh;
  margin-left: 15vw;
  padding-top: 1vh;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
#howtopoptitle {
  color: #FFFFFF;
  font-family: Source Bold;
  font-size: 4.5vw;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}
#howtopoptxt {
  color: #f7f7f7;
  font-family: Source Regular;
  font-size: 3vw;
  max-width: 50vw;
  margin-left: 10vw;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}
#howtoremove{
  height: 20vh;
  position: absolute;
  top: 0;
  z-index: 97;
  width: 100vw;
  background-color: #00000000;
}
#installingtxt {
  max-width: 70vw;
}
#version {
  top: 1vh;
  right: 4vw;
  position: absolute;
  color: #FFFFFF;
  font-family: Source Regular;
  font-size: 5vw;
  z-index: 110;
}
@media screen and (max-height: 900px) and (max-width: 479px) {
  #cicle3 {
      margin-left: -35vw; /* Adjust margin-left for smaller screens */
  }
  #InstButton {
    padding-left: 23vw;
    font-size: 9vw;
  }
  #endText {
    font-size: 7vw;
  }
}
.beta-text {
font-size: 40%;
color: #e2df0c;  
margin-left: 5px;
vertical-align: top;
font-family: Source SemiBold;
}
#entranceContainer, #entranceContainer2 {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(331deg, rgba(175, 44, 149, 1) 0%, rgba(224, 107, 116, 1) 100%);
color: #FFFFFF;
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
font-family: Inter Semibold;
font-size: 5vw;
opacity: 0;
animation: fadeIn 2s ease;
pointer-events: none; 
}

@keyframes fadeIn {
0% {
  opacity: 1;
}
100% {
  opacity: 0;
}
}
  }