:root {
    --background-color: #eeaa1f;
    --secondary-color: #D3854B;
    --text-color: #3D2E17;
}

*{
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
}

body {
    display: flex;
    flex-flow: column nowrap;
    font-variant-ligatures: common-ligatures;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: black;
    height: 100%;
    justify-content: space-between;
}

.loader {
    display: none;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

}

.loader img  {
    
    width: 40px;
    height: 40px;
    border-radius: 25px;
    margin: auto;
}

main {flex: 1 1 auto;
    max-width: 600px;
    margin: auto;
}


strong {
    font-weight: bold;
}

p {
    line-height: 1.7;
    max-width: 65ch;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.-headerImage {
    width: 100%;
    min-width: 350px;
    height: 100px;
    background-color: #f0aa1d;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.-headerImage img {
    width: 250px;
    height: auto;
}

header .-titles {
    position: relative;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 29%, rgba(237, 221, 83, 0) 99%);

}

header .-eventName {
    background-color: var(--background-color);
    width: fit-content;
    
    height: fit-content;
    border-radius: 25px;
}

.roundContainer {
    background-color: var(--background-color);

}

#comprobante {
    width: 80%;
    height: 100%;
    background-color: white;
    color: var(--text-color);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    border-radius: 25px;
    border: solid 1px var(--secondary-color);
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 15px;
    margin: auto;
}

#comprobante p  {
    margin: 3px 0px;
    padding: 0;
}

#comprobante h2 {
    font-size: 12px;
    margin: 0;
    padding: 0;
}

#downloadBtn {
    width: 100%;
    height: 50px;
    padding: 10px;
    font-size: 15px;
    background-color: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#ticketContainer {
    width: 100%;
    margin-top: 15px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

footer {
    width: 100%;
    height: 50px;
    background-color: black;
    color: white;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.no-entrances {
    width: 80%;
    height: 100%;
    background-color: white;
    color: var(--text-color);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    border-radius: 25px;
    border: solid 1px var(--secondary-color);
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 15px;
    margin: auto;
    text-align: center;
}





/*@media screen and (max-width: 1000px) { */

    header {
        width: 100vw;
        min-width: 350px;
        height: 300px;
        color: white;
        
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-end;
        align-items: stretch;
        background-repeat: space-between;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    header img {
        width: 100%;
        height: 300px;
    }

    header .-titles {
        /* top: -139px; */
        /* height: 120px; */
        width: 100%;
    }

    header .-titles p {
        font-size: 20px;
        width: fit-content;
    }

    header .-titles .-smallText {
        font-size: 12px;
    }

    header .-titles .-smallText i {
        padding-right: 5px;
    }

    header .-titles .-smallText a {
        text-decoration: underline;
        color: white;
    }

    .roundContainer {
        border-radius: 20px;
        width: 100%;
        min-width: 350px;
        height: 100vh;
        padding-top: 30px;
        color: var(--text-color);
        font-size: 15px;
        font-weight: 500;
        height: fit-content;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .roundContainer a {
        text-decoration: underline;
        color: white;
        font-weight: bold;

    }

    .roundContainer strong {
        color: var(--text-color);
        font-weight: 600;
    }

    .roundContainer .-eventEntrances {
        width: 90%;
        background-color: var(--secondary-color);
        border-radius: 25px;
        margin: auto;
        color: white;
        display: flex;
        flex-flow: row nowrap;
        font-size: 15px;
        align-items: center;
    }
    .roundContainer .-availableTickets {
        color: white;
        font-weight: 700;
        
        border-radius: 25px;
        padding: 5px 10px;
        background-color: var(--background-color);
    }

    form {
    width: 80%;
    max-width: 300px;
    margin: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    }

    form input {
        
        width: 277px;
        margin-top: 5px;
        padding: 10px;
        font-size: 15px;
    
    }

    form textarea {
        width: 100%;
        height: 100px;
        font-size: 12px;
        margin-top: 5px;
    }

    form .-whatsapp {
        display: flex;
        flex-direction: row nowrap;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
    }

    button {
        width: 100%;
        padding: 10px;
        font-size: 15px;
        background-color:  var(--secondary-color);
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 30px;
    }

    button:hover {
        background-color: black;
    }

    h1 {
        font-size: 25px;
        text-align: center;
        margin-top: 20px;
    }
/*}*/

   #description {
            line-height: 1.5;         
            overflow: hidden;         
            position: relative;       
            max-height: 4.5em;        
            transition: max-height 0.3s ease;
        }
        
        #description.collapsed {
            max-height: 8.5em;       
            mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
        }
        
        #description.expanded {
            max-height: 1000px;       
        }
        
        #toggleButton {
        background-color: transparent;
            border: none;
            color: white;
            text-decoration: underline;
            cursor: pointer;
            padding: 5px 0;
            font-size: 0.9em;
            margin: auto;
        }
        
        #toggleButton:hover {
            text-decoration: underline;
        }


.slide-in-bottom{-webkit-animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both;animation:slide-in-bottom .5s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}