/*@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jersey+10&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Jersey+10&display=swap');*/
@import url(assets/fonts/fonts.css);

/* resets y principal */

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: black;
    color: white;
    /*font-family: 'Rubik', 'Jersey 10', sans-serif;*/
    font-family: 'Rubik', sans-serif;
}

.main{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.content{
    display:flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* card */
.card{
    --outline-size: 2px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), transparent 8rem);

    padding: 2rem;
    border-radius: 8px;
    position: relative;

    backdrop-filter: blur(20px) saturate(1.3);
}


.card::before{
    content:"";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--outline-size);


    --b1: #078d70;
    --b2: #98e8c1;
    --b3: #fffffe;
    --b4: #7bade2;
    --b5: #3d1a78;
    background-image: linear-gradient(135deg, var(--b1), var(--b2), var(--b3), var(--b4), var(--b5));
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#000 0 0);
    
    mask-composite: exclude;
    pointer-events: none;
    border-radius: 8px;
}

.card h2{
    font-size: 2rem;
    border-bottom: 2px solid;
    margin: 0 0 .5em;
}


.character{
    --width: 10rem;
    --offset: 2rem;
    width: var(--width);
    position: absolute;
    right: calc(100% - var(--offset));
    top: 0%;
    filter: drop-shadow(0px 0px 10px black)
}

h1,h2,.pixel{
    font-family: 'Jersey 10', sans-serif;
}



.card.main-card{
    padding: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

h1 {
    font-size:8rem;
    display: inline-block;
}


/* Button */
.button{
    color: unset;
    text-decoration: none;
    padding: .75rem;
    border: 2px solid;
    border-radius: 8px;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.2s;
    transform: scale(1);
    transform-origin: 50% 50%;
}
.button:hover, .button:focus{
    transform: scale(1.2);
}
.button:active{
    transform: scale(0.9);
}


.row{
    display:flex;
    flex-direction: row;
    gap: 1rem;
}


    /*--b1: #078d70;
    --b2: #98e8c1;
    --b3: #fffffe;
    --b4: #7bade2;
    --b5: #3d1a78;
    background-image: linear-gradient(135deg,
        var(--b1) 20%,
        var(--b2) 20%, var(--b2) 40%,
        var(--b3) 40%, var(--b3) 60%,
        var(--b4) 60%, var(--b4) 80%,
        var(--b5) 80%, var(--b5) 100%
    );
    background-size: 25vw 25vh;*/