@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: 'ethnocentric';
    src:url(font/ethnocentric.otf); }
    
    .mainContainer{
        margin: 0 auto;
        padding: 0;
        max-width: 1280px;
    }

    * {
        box-sizing: border-box; /* Incluye padding y border en el tamaño total */
    }
    .shake{
        animation: shake 23s;
        animation-iteration-count: infinite;
      }
      
      @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-1deg); }
        20% { transform: translate(-3px, 0px) rotate(1deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(1deg); }
        50% { transform: translate(-1px, 2px) rotate(-1deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-1deg); }
        80% { transform: translate(-1px, -1px) rotate(1deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-1deg); }
      }

      .custom-select {
        position: relative;
        padding: 5px 10px;
        font-family: "Montserrat";
        font-weight: 500;
        font-size: 14px;
        background-color: white;
        border: 2px solid #1E9259;
        border-radius: 27px;
        appearance: none; /* Oculta el estilo nativo */
        color: #1E9259;
    }
    
    .custom-select option {
        font-size: 14px;
        padding: 10px 10px 10px 40px; /* Aumenta el espacio izquierdo para las banderas */
        background-image: none; /* Elimina cualquier imagen predeterminada */
    }
    
    .custom-select::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        background: url('/images/arrow-down.svg') no-repeat center; /* Aquí puedes poner la flecha personalizada */
        pointer-events: none;
    }
    
    .custom-select option[data-icon="es"] {
        background-image: url('https://flagicons.lipis.dev/flags/4x3/es.svg'); /* Bandera de España desde URL */
        background-size: 20px 20px; /* Ajusta el tamaño de la bandera */
        background-repeat: no-repeat;
        background-position: 10px center; /* Asegura la posición correcta de la bandera */
    }
    
    .custom-select option[data-icon="en"] {
        background-image: url('https://flagicons.lipis.dev/flags/4x3/us.svg'); /* Bandera de Estados Unidos desde URL */
        background-size: 20px 20px; /* Ajusta el tamaño de la bandera */
        background-repeat: no-repeat;
        background-position: 10px center; /* Asegura la posición correcta de la bandera */
    }
    
    .custom-select option[data-icon] {
        padding-left: 40px; /* Asegura espacio para las banderas */
    } 
    


    body{
        margin-left: 0%;
        margin-right: 0%;
        padding-left: 0%;
        padding-right: 0%;
    }


    * {
        padding: 0;
        box-sizing: border-box;
    }

    @keyframes appear {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .head {
        animation: appear linear;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
      }

      @keyframes appear2 {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      .anim {
        animation: appear2 linear;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
      }
    
    
    
    html, body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Evita que se muestre un scroll horizontal */
    }
    
    #coinBuy {
        background-color: #1E9259;
        width: 100vw;  /* Asegura que ocupe el ancho completo de la ventana */
        height: 100vh; /* Asegura que ocupe el alto completo de la ventana */
        border-color: #1E9259;
        border: none;
    }
    
    
    

    h1{
        text-align: center;
        font-size: 40px;
        font-family: "ethnocentric";
        color: var(--black, #000);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    h3{
        font-family: "Montserrat";
        text-align: center;
        font-size: 32px;
    }

    .head{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin: 20px;
    }

    #socialIcons{
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
        padding: 20px 20px;
    }

    .object1{
        display: flex;
        justify-content: center;
        width: 350px;
        padding: 12px;
    }

    p{
        text-align: center;
        font-family: Montserrat;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding: 12px;
    }

    .navBar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
    }

    .inverButton{
        text-align: center;
        text-decoration: none;
        align-content: center;
        font-family: "Montserrat";
        color: #1E9259;
        font-size: 12px;
        font-weight: 800;
        background-color: transparent;
        width: 81px;
        height: 32px;
        gap: 10px;
        border-radius: 30px;
        border: 2px solid var(--vibriant-orange, #1E9259);
    }

    .inverButton:hover{
        background-color:#1E9259;
        color: white;
    }

    #coinbuyButton{
        display: flex;
        width: 130px;
        height: 50px;
        padding: 4.5px 6px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        border-radius: 40px;
        border: 3px solid #FFF;
        color: #FFF;
        text-align: center;
        font-family: Montserrat;
        font-size: 16px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
        text-decoration: none;
        margin-top: 31px;
        margin-bottom: 100px;
        position: relative;
        left: 29%;
        right: 50%;
    }

    .textPricecoin{
        padding-top: 10px;
        margin: 0px;
        width: 307px;
    }

    #imgPrice{
        margin-top: 100px;
        margin-bottom: 20px;
    }

    #coinPrice {
        display: flex;
        background-color: #1E9259;
        min-height: 100vh; /* Asegura que ocupe al menos la altura de la pantalla */
        width: 100vw; /* Asegura que ocupe todo el ancho */
        overflow: auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0px;
        color: #FFF;
    }
    

    .benecardContainer{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 12px;
    }


    .textCardContainer {
        color: #000;
        text-align: center;
        font-family: "Montserrat";
        font-size: 15px;
        font-weight: bold;
    }
    
    .cardContainer {
        width: 296px;
        height: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 7px;
        background: #FFF;
        box-shadow: 0px 4px 4px rgba(7, 7, 7, 0.2);
        margin-bottom: 10px; /* Espacio entre las cards */
        padding: 12px;
    }
    
    /* Cambia el color del fondo y el texto al hacer hover */
    .cardContainer:hover {
        background: #1E9259;
    }
    
    .cardContainer:hover .textCardContainer {
        color: #FFF;
    }

    #textContainerCoin{
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
    }
    #vortexInfo{
        margin: 0 auto;
        display: flex;
        justify-content: center;
        max-height: 342px;
        align-content: center;
        flex-direction: column;
        background-color: #1E9259;
        color: #FFF;
    }
    #imgVortexLogo{
        margin: 0 auto;
        padding: 0px;
        max-width: 92px;
        max-height: 92px;
    }
    #textoVortexInfo{
        margin: 0px;
    }
    #containerVortexInfo{
        display: flex;
        flex-direction: column;
        padding: 12px;
        margin: 0 auto;
        max-width: 254.52px;
    }


    
    

    @media (min-width: 680px) {
        .head{
            display: flex;
            flex-direction: row;
            align-items: start;
            top: 50%;
        }
        #containerVortexInfo{
            display: flex;
            flex-direction: row;
            max-width: 491px;
            vertical-align: middle;
            align-items: center;
        }
        #textoVortexInfo{
            padding-left: 12px;
        }
        .object1{
            width: 382.249px;
            height: 392px;
            flex-shrink: 0px;
        }
        #headTextbloc{
            width: 288px;
            height: 169px;
            flex-wrap: wrap;
            flex-shrink: 0;
        }
        .benecardContainer{
            display: flex;
            flex-direction: row;
            text-wrap: wrap;
            flex-wrap: wrap;
            justify-content: center;
            gap: 18px; 
        }
        #screen2{
            flex-wrap: wrap;
        }

        #socialIcons{
            display: block;
            padding: 0px;
        }
        h1{
            text-align: start;
        }
        p{
            padding: 0px;
            text-align: start;
        }
        h3{
            text-align: start;
        }
        #screenText1{
            width: 288px;
        }
        #textheadBenef{
            display: block flow;
            justify-content: center;
            text-align: center;
        }
        .CardsContainer{
            display: block;
            justify-content: center;
        }
        #screenText3{
            width: 288px;
        }
        .imgBenef{
            width: auto;
            height: 110px;
        }
        #screenText5{
            display: block;
            justify-content: flex-start;
        }

        #bloqTextInv{
            display: flex;
            flex-direction: row;
            
        }
        #bloqTextInv1{
            display: block;
        }
        #bloqTextInv2{
            display: block;
        }
        #invTok{
            align-items: start;
        }
        #screenText4{
            margin-top: 0px;
        }
        .quest1{
            display: block;
            width: 301px;
        }
        .quest2{
            display: block;
            width: 287px;
        }
        .quest3{
            display: block;
            width: 301px;
        }
        .quest4{
            display: block;
            width: 287px;
        }
        #questContainer{
            display: flex;
            align-content: center;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-bottom: 100px;
            gap: 50px;
        }
        #coinPrice {
            display: flex;
            flex-direction: block;
            align-items: center;
            justify-content: center;
            margin: 0px;
            color: #FFF;
        }
        #priceContainer{
            display: flex;
            flex-direction: row;
            align-content: space-between;
            gap: 20px;
        }
        #textContainerCoin{
            display: block;
            justify-content: center;
            align-content: center;
        }
        #imgPrice{
            width: 307px;
            height: 307px;
            margin: 0px;
        }
        .navBar{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 30px;
            margin-right: 30px;
        }
        #coinbuyButton{
            position: relative;
            left: 0%;
            right: 0%;
        }
                
        
      }

      @media (min-width: 1200px) {
        .head{
            height: 100vh;
            justify-content: space-around;
        }
        h1{
            font-size: 72px;
            margin: 0px;
        }
        h3{
            font-size: 72px;
        }
        p{
            font-size: 17px;
        }
        .object1{
            width: auto;
            height: 650px;
            flex-shrink: 0px;
            position: relative;
            left: 4%;
            top: 2%;
        }
        #tittle2block{
            font-size: 48px;
        }
        #headTextbloc{
            width: 400px;
            height: 169px;
            flex-wrap: wrap;
            flex-shrink: 0;
            position: relative;
            top: 12%;
            margin: 0px;
        }
        .navBar{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        #screenText3{
            width: 500px;
        }
        .object3{
            display: flex;
            justify-content: center;
            vertical-align: middle;
            width: auto;
            height: 430px;
            position: relative;
            top: 190px;
        }
        .object2{
            width: auto;
            height: 650px
        }
        #questContainer{
            display: flex;
            align-content: center;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 10px;
        }
        #invTok{
            display: flex;
            flex-direction: row;
            align-items: start;
        }
        .imgBenef{
            width: auto;
            height: 240px;
        }
        .textsizeHeadCoin{
            font-size: 24px;
        }
        .marginQuest{
            margin-bottom: 50px;
        }
        #screenText5{
            height: 100vh;
        }
        .marginEmpty{
            height: 150vh;
        }
        #bloqTextInv{
            gap: 20px;
        }

      }