.card{
    box-shadow: 0 3px 6px rgba(255, 255, 255, 0.806);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.662);
    box-shadow: 0 15px 35px hsla(0, 0%, 100%, 0.13);
}

.content {
  background-image: linear-gradient( -60deg, #1e293b 0%, #1e293b 35%, #5eead4 35%, #5eead4 60%);
}

.title{
    font-family: arista;
}

@media (min-width: 360px) and (max-width: 450px) {
    .title{
        font-size: 78px;
        padding-top: 4rem;
    }

    .card{
        left: 5px; 
        right: 5px; 
        margin-left: auto; 
        margin-right: auto; 
        bottom: 10px;
    }
}

@media (min-width: 450px) and (max-width: 640px){
    .title{
        font-size: 95px;
        padding-top: 5rem;
    }

    .card{
        bottom: 2.5rem;
        right: 2.5rem;
        width: 24rem;
    }
}

@media (min-width: 640px) {
    .title{
        font-size: 108px;
    }
}


@media (min-width: 768px) {
    .title{
        font-size: 120px;
    }
}


@media (min-width: 1050px) {
    .title{
        font-size: 150px;
    }
}

@media (min-width: 1280px) {
    .title{
        font-size: 200px;
    }
}

@font-face {
    font-family: arista;
    src: url('/fonts/aristalight.ttf');
}