/* GLOBAL STYLES */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* FONT STYLES */
@font-face {
    font-family: 'BlackPast'; /* El nombre de la fuente */
    src: url('fonts/Blackpast.otf') format('opentype'); /* Ruta del archivo .otf */
}

/* HOME STYLES */

.home {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    font-family: BlackPast;
    font-size: 16px;
    color: #333;
    background-image: url(img/wallpaper.jpg);
    background-size: cover;
}

.home__card {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;
    width: 70%;
    min-height: 60vh;
    padding: 1vw;
    border-radius: 50px;
    box-shadow: 0px 0px 1000px rgb(0, 217, 255);
    background-color: rgba(255, 255, 255, 0.7);

}

.card__imagearea {
    display: flex;
    justify-content: center;
    align-items: center;

}

.card__image {
    width: 90%;
    border-radius: 10vw;
    box-shadow: 0px 0px 80px rgb(179, 244, 255);
}

.card__textarea {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2vw;
}

.card__title {
    font-size: 80px;
    font-weight: 800;

}

.card__text {
    font-size: 24px;
}

/* MEDIA QUERIES */

@media (max-width: 1452px) {

    .home__card {
        grid-template-columns: 1fr;
        padding: 3vw; /*En determinado corte quitar padding más abajo*/
    }

    .card__image {
        width: 400px;
    }

    .card__textarea {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 890px) {

    .card__title {
        font-size: 60px;
    }
}

@media (max-width: 700px) {

    .home__card {
        grid-template-rows: 1fr 1fr;
        gap: 0;
        padding: 4vw;
    }

    .card__image {
        width: 90%;
    }

    .card__textarea {
        gap: 1vh;
    }

    .card__title {
        font-size: 50px;
    }

    .card__text {
        font-size: 22px;
    }
}

@media (max-width: 580px) {

    .home__card {
        min-height: 50vh;
    }
}