*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
:root{
    --dark: black;
    --light: white;
    --primary: #d90368;
    --secondary: gray;
    --terceary: #8c0143;
}
*::selection{
    background-color: var(--secondary);
    color: var(--light);
}
::-webkit-scrollbar{
    width: .7em;
}
::-webkit-scrollbar-track{
    background-color: var(--terceary);
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, var(--terceary), var(--primary) 20%, var(--primary) 80%, var(--terceary));
    /* border: 2px solid var(--secondary); */
    border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(180deg, var(--terceary), var(--primary) 20%, var(--terceary), var(--primary) 80%, var(--terceary));
}
body{
    min-height: 100vh;
}
button{
    cursor: pointer;
}
/*HEADER*/
header{
    position:sticky;
    top:0;
    z-index: 1;
    background: linear-gradient(90deg, var(--light), var(--secondary));
    box-shadow: 1px 0px 13px var(--terceary);
}
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
  /*  background-color: var(--light);*/
    height: 7vh;
    padding-right: 4rem;
    padding-left: 4rem;
}
.logo>a>img{
    height: 3rem;
}
.logo>a>img:hover{
    scale: 1.1;
    transition: .5s;
}
.logo>a>img:not(hover){
    scale: 1;
    transition: .5s;
}
    /*hamburguer*/
.hamburguer, .fa-bars, .fa-xmark{
    display:none;
    visibility: hidden;
}
    /*nav*/
nav>ul{
    display: flex;
    gap: 1rem;
    list-style: none;
}
nav>ul>li>a{
    background-color: var(--primary);
    padding: .5rem;
    text-decoration: none;
    color: var(--light);
    border-radius: 5px;
}
nav>ul>li>a:hover{
    background-color: var(--terceary);
}
/*MAIN*/
main{
    background: radial-gradient(var(--light), var(--secondary));
    min-height: 83vh;
}
    /*Site*/
.site{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 13vh;
    background-color: var(--terceary);
    padding-left: 4rem;
    padding-right: 4rem;
    color: var(--light);
    text-align: center;
}
.site>a>i{
    scale: 3;
    color: var(--light);
}
.site>a>i:hover{
    scale: 3.4;
}
    /*Search*/
.formSearch{
    display:flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    min-height: 7vh;
    padding: 2rem;
    gap: 2em;
}
.formSearch>fieldset{
    border: none;
    display: flex;
    flex-wrap: wrap;
    gap:.5em;
}
.formSearch>fieldset>label:hover, .formSearch>fieldset>input[type="checkbox"]:hover+label{
    cursor: pointer;
    color: var(--primary);
}
.formSearch>fieldset>input[type="checkbox"]{
    appearance: none;
    cursor: pointer;
    background-color: transparent;
    translate: 0 3px;
    width: 1em;
    height: 1em;
    border: .5px solid var(--secondary);
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}
.formSearch>fieldset>input:hover{
    cursor: pointer;
    border: .5px solid var(--dark);
}
.formSearch>fieldset>input:checked{
    background-color: var(--primary);
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-size: 1.3em;
    background-position: center center;
}
.formSearch>fieldset>input:checked+label{
    color: var(--primary);
}
.formSearch>fieldset>input:checked+label:hover{
    color: var(--dark);
}
    /*Cards*/
.cards{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 1em 2em 2em 2em;
    gap: 2em;
}
.cards>section{
    background-color: var(--terceary);
    color: var(--light);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    padding: 1em;
    width: 19em;
    height: 21em;
    box-shadow:  0px 8px 16px rgba(0, 0, 0, 0.402);
    animation: shine .5s ease-out;
}

@keyframes shine {
    from {
        box-shadow:  0px 8px 16px rgba(0, 0, 0, 0.402);

    }
    50%{
        box-shadow: 0px 8px 5px var(--primary);
    }
    to {
        box-shadow:  0px 8px 16px rgba(0, 0, 0, 0.402);
    }
}
.cards>section>.img{
    height: 12em;
    max-height: 53%;
    width: 100%;
    border-radius: 5px;
    background-size: 105%;
    background-repeat: no-repeat;
    background-position: center center;
}
.cards>section:hover>.img{
    background-size: 140%;
    transition: .5s;
}
.cards>section:not(hover)>.img{
    background-size: 105%;
    transition: .5s;
}
.priceCard{
    width: 100%;
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1em;
}
.priceCard>a{
    text-decoration: none;
    width: 50%;
}
.priceCard>a>button{
    width: 100%;
    height: 2em;
    color: var(--light);
    background-color: var(--primary);
    border: none;
    border-radius: 5px;
}
.priceCard>a>button:hover{
    background-color: var(--secondary);
}
    /*Card Details*/
.cardDetails{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em;
}
.cardDetails>div{
    background-color: var(--secondary);
    color: var(--light);
    border-radius: 5px;
    display: flex;
    gap: 1em;
    padding: 1em;
    min-width: 50em;
    min-height: 75vh;
    height: 40em;
    box-shadow:  0px 8px 16px rgba(0, 0, 0, 0.402);
}
.cardDetails>div>span{    
    height: 100%;
    width: 25em;
    min-width: 50%;
    border-radius: 5px;
    max-width: 100%;
    background-size: cover;
    animation: translate 15s ease-in-out alternate infinite;
}
@keyframes translate{
    from{background-position: top right;}
    to {background-position: bottom left;}
}
.cardDetails>div>div{
    background-color: var(--terceary);
    border-radius: 5px;
    padding-top: 2em;
    width: 50%;
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    gap: 2em;
}
.cardDetails>div>div>h1{
    font-size: 4em;
    text-shadow: 3px 3px  var(--primary);
}
.cardDetails>div>div>h3{
    color: var(--primary);
    font-size: 1.2em;
}
.cardDetails>div>div>p{
    color: var(--secondary);
    font-size: 1.1em;
}

    /*Form*/
.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
}
.contact>fieldset{
    border: none;
    width: 100%;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
}
.contact>fieldset>*{
    width: 100%;
    display:block;
    align-self: center;
}
.contact>fieldset>input{
    height: 2em;
}
.contact>fieldset>input[type="submit"]{
    color: var(--light);
    background-color: var(--primary);
    height: 2rem;
    font-size: 1.3rem;
    border-radius: 5px;
    cursor: pointer;
    width: 30%;
    align-self: flex-end;
    border: none;
}
.contact>fieldset>input[type="submit"]:hover{
    background-color: var(--terceary);
}
textarea{
    resize:none;
}
    /*Table*/
.table{
    display: flex;
    padding: 2rem;
    justify-content: center;
}
table{
    max-width: 70em;
    border-spacing: 0;
    border-top: 2px solid var(--terceary);
}
tr:first-child>td{
    background-color: var(--primary);
    color: var(--light);
    font-size: 1.5rem;
    padding: .5rem;
}
td, th{
    border-bottom: 2px solid var(--terceary);
    border-right: 2px solid var(--terceary);
    height: 2rem;
    padding: .5rem;
    background-color: var(--light);
}
td{
    text-align: center;
}
td:first-child, th:first-child{
    border-left: 2px solid var(--terceary);
}
.vanish{
    animation:vanish 5s infinite;
}
@keyframes vanish {
    from{
        color: transparent;
    }
    20%{
        color: black;
    }
    80%{
        color: black;
    }
    to{
        color: transparent;
    }
}
#pastStatistics>tr>th, #upStatistics>tr>th{
    cursor: pointer;
}
#pastStatistics>tr>th:hover, #upStatistics>tr>th:hover{
    cursor: pointer;
    background-color: var(--secondary)
}
/*SPINNER*/
.spinner{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2;
    scale: 2;
    cursor: pointer;
    rotate: 5deg;
    animation: spinner 2s infinite;
}
@keyframes spinner {
    from{
        transform:rotateX(75deg) perspective(200px);
        filter:drop-shadow(-5px 12px 5px var(--terceary)) grayscale(80%) brightness(30%) hue-rotate(30deg);
        opacity: 0;
        scale: .1;
        translate: 0 5em;
    }
    60%{
        opacity: 1;
        scale: 2;
        filter:drop-shadow(-8px 28px 15px var(--dark)) grayscale(20%) brightness(130%) hue-rotate(0deg);
        transform:rotateY(-45deg) perspective(100px);
    }
    to{
        filter:drop-shadow(-8px 12px 5px var(--terceary)) grayscale(80%) brightness(30%) hue-rotate(-30deg);
        scale: 1.5;
        opacity: 0;
        translate: 0 -5em;
        transform:rotateX(25deg) perspective(200px);
    }
}
/*FOOTER*/
footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 4rem;
    padding-left: 4rem;
    height: 10vh;
    background-color: var(--terceary);
    color: var(--light);
}
.redes{
    display:flex;
    justify-content: center;
    gap: 2em;
}
.redes>a>i{
    scale: 2;
    border-radius: 50%;
    background-color: var(--primary);
    padding: .3em;
    text-decoration: none;
    color: var(--light);
}
.redes>a>i:hover{
    translate: 0 -.2em;
    filter: drop-shadow(-1px 2px var(--secondary));
}

@media screen and (max-device-width: 1024px){
    nav>ul{
        display: none;
    }
    .hamburguer:checked ~ ul{
        display: flex;
    }
    .hamburguer:not(checked) ~ ul{
        display: none;
    }
    .spinner{
        left: 45%;
    }
}

@media screen and (max-width: 1024px){
    body{
        overflow-x: hidden;
    }
    nav{
        height: fit-content;
        padding: 1em;
        align-items: flex-start;
    }
    nav>ul{
        visibility: hidden;
        flex-direction: column;
        align-items: flex-end;
        gap: .5em;
        height: 100vh;
        position: absolute;
        top: 0;
        right: -20em;
        padding: 5em;
        background-color: #5e5d5dc4;
    }
    nav>ul>li>a{
        display: block;
        width: 9em;
        text-align: center;
    }
    .hamburguer{
        position: fixed;
        top: 2.5em;
        right: 3em;
        z-index: 2;
        visibility: visible;
        display: block;
        scale: 5;
        opacity: 0;
        cursor: pointer;
    }
    .fa-bars, .fa-xmark{
        visibility: visible;
        position: fixed;
        top: 2.5em;
        right: 3em;
        z-index: 1;
        scale: 4;
        display: block;
        color: var(--primary);
        cursor: pointer;
    }
    .hamburguer:hover ~ .fa-bars, .hamburguer:hover ~ .fa-xmark{
        color: var(--terceary);
    }
    .hamburguer:checked ~ .fa-xmark, .hamburguer:not(checked) ~ .fa-bars{
        opacity: 1;
    }
    .hamburguer:checked ~ .fa-bars, .hamburguer:not(checked) ~ .fa-xmark{
        opacity: 0;
    }
    .hamburguer:checked ~ ul{
        visibility: visible;
        right: 0;
        transition: 1s;
    }
    .hamburguer:not(checked) ~ ul{
        visibility: hidden;
        right: -20em;
        transition: 1s;
    }

}
@media screen and (max-width:840px) {
    .cardDetails {
        width: 98vw;
    }

    .cardDetails>div{
        min-width: 0em;
        width: 98vw;
        flex-direction: column;
        height: fit-content;
        min-height: fit-content;
    }
    .cardDetails>div>span{
        width: 100%;
        min-height: 40vh;
    }
    .cardDetails>div>div{
        width: 100%;
        min-height: fit-content;
        padding: 2em;
    }
    .cardDetails>div>div>h1{
        font-size: 2.5em;
    }

    
}