* {
     margin: 0px;
     padding: 0px;
     overflow-wrap: break-word;
}
#skillOre {
    width: 100%;
    position: relative;
    text-align: center;
}

* {
     margin: 0px;
     padding: 0px;
     overflow-wrap: break-word;
}

.preamble {
     width: 100%;
 background: linear-gradient(180deg, rgb(23, 7, 43) 0%, rgba(50, 15, 100, 0.85) 60%, rgba(72, 20, 120, 0.8) 100%);

display: flex;
     justify-content: space-evenly;
     flex-flow: column;
     align-items: stretch;
}

#propreamble {
     padding: 9% 0px;
}

.preamble > #deckHeader {
     padding: 4% 2%;
     text-transform: uppercase;
     text-align: center;
     letter-spacing: 1rem;
     font-size: 1.9rem;
     color: rgb(255, 255, 255);
}

#propreamble > #deckHeader {
     padding: 0px;
     text-transform: uppercase;
     letter-spacing: 1.2em;
     font-size: 1.9rem;
     color: rgb(255, 255, 255);
}



#svgCanvas {
     width: 100%;
     display: flex;
     flex-flow: wrap;
     justify-content: space-between;
     align-items: flex-start;
     padding-top: 50px;
     padding-bottom: 400px;
}

@media only screen and (max-width: 400px){
    #svgCanvas {
         flex-flow: column;
         justify-content: flex-start;
         align-items: center;
    }
    #curtainW{
     height: 60vh;
    }
}

#wheelW {
    flex: 1 0 300px;
    height: 45vh;
    width: 80%;
    position: relative; /* Cambié 'flex' por 'relative' para evitar problemas de apilamiento */
    overflow: visible;
    z-index: 0;
}

#one {
     height: 100%;
     width: 100%;
     z-index: 2000;
}

.arc {
     cursor: pointer;
     opacity: 1;
     stroke: dimgray;
}

text {
     pointer-events: none;
}

.arctext {
     user-select: none;
     opacity: 1;
     font-size: 1.3rem;
}

@media only screen and (max-width: 400px){
    .arctext {
         font-size: 1rem;
    }
}

.fillnavy {
     fill: navy;
}

.strokewhite {
     stroke: rgb(255, 255, 255);
}

@media only screen and (max-width: 400px){
    .arctext {
         font-size: 1rem;
    }
}
#G1000 {
     height: 100%;
     width: 100%;
     position: absolute;
     top: 0%;
     left: 0%;
     z-index: -1;
}

 #T1000 {
     user-select: none;
     opacity: 1;
     font-size: 1.3rem;
}

@media only screen and (max-width: 400px){
     #T1000 {
         font-size: 1rem;
    }
}
#curtainW {
    flex: 1 1 300px; /* Puede ajustarse dependiendo del tamaño del componente */
    height: 45vh;
    width: 80%; /* O cualquier valor que necesites */
    z-index: 0; /* Asegúrate de que no esté por encima de #wheelW */
}

#curtain {
     height: 100%;
     width: 100%;
     display: flex;
     flex-flow: column;
     justify-content: flex-start;
     align-items: stretch;
     padding: 0% 0%;
     position: relative;
}

#curtain > #curtainHeader {
     flex: 0 0 0%;
     margin: 4%;
     padding: 1% 0px;
     text-transform: uppercase;
     text-align: center;
     font-size: 3rem;
     font-weight: 100;
     color: rgb(255, 255, 255);
     letter-spacing: 0.3rem;
}

#curtain > #curtainText {
     flex: 0 0 0%;
     margin: 4%;
     color: rgb(255, 255, 255);
     letter-spacing: 0.02rem;
     font-size: 1.2rem;
     line-height: 2.5rem;
}

@media only screen and (max-width: 400px){
    #curtainText {
         font-size: 1.3rem !important;
         overflow: hidden;
    }
}