@font-face {
    font-family: 'Bickham Script Pro';
    src: url('https://lisischauer.com/fonts/bickham-script-pro/Bickham Script Pro Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    background-color: black;
}

h2 { /* PROFANE LOGO */
    font-size: 5em;
    text-align: center;
    color: lightcyan;
    font-family: 'Futura', sans-serif;
    font-weight: normal;
    letter-spacing: 2px;
}

h3 { /* SACRED & PROFANE GRID TEXT */
    font-size: 4em;
    text-align: center;
    color: lightcyan;
    font-family: 'Futura', sans-serif;
    font-weight: normal;
    letter-spacing: 2px;
}

h4 {
    padding-bottom: 30px;
    font-size: 1em;
    text-align: center;
    color: lightcyan;
    font-family: 'Futura', sans-serif;
    font-weight: normal;
    letter-spacing: 2px;
}

.profanesticker {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 25%;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    flex-wrap: nowrap;
    position: relative;
    z-index: 2;
}

.wrapper img {
    width: 100%;
    max-width: 500px;
    height: auto;
    flex: 1 1 0;
    object-fit: contain;
    min-width: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.profanetitle {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}

.profanetitle2 {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
}

.profanetitle3 {
    position: absolute;
    margin-left: 10%;
}

.profanetitle3 h4 {
    text-align: left;
    color: black;
    line-height: 1.2; /* Adjust line height for tighter spacing */
}

.profane-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
    grid-template-rows: repeat(4, auto);  /* Four rows with height auto */
    gap: 10px 10px; /* Reduce vertical gap (row-gap) to 5px, horizontal gap (column-gap) stays 10px */
    padding: 10px; /* Optional: padding around the grid */
    padding-bottom: 30px; /* Optional: padding around the grid */
    width: 100%; /* Responsive width */
}

.profane-grid div {
    padding: 0px; /* Adjust padding for finer control */
    text-align: center; /* Optional: center text */
}

.profane-grid p {
    font-family: 'Bickham Script Pro', serif;
    font-style: normal;
    color: lightcyan;
    margin: 0;
    line-height: 1.2; /* Adjust line height for tighter spacing */
}

.profane-grid h4 {
    text-align: left;
    margin: 10%;
    line-height: 1.2; /* Adjust line height for tighter spacing */
}

.image-container {
    position: relative;
    width: 100%; /* Ensures the container takes up the full width */
}

.image-container img {
    display: block; /* Prevents extra space below the image */
}

.image-container p {
    font-family: 'Bickham Script Pro', serif;
    font-style: normal;
    font-size: 6em;
    color: lightcyan;
}

/* Mobile */
@media screen and (max-width: 1023px) {
    h3 {
        font-size: 3em;
    }

    h4 {
        font-size: 1.5em;
    }

    .profanesticker {
        top: 10%;
    }

    .profanetitle {
        top: -18%;
    }

    .profanetitle2 {
        top: 10%;
    }

    .profanetitle3 {
        top: 48%;
        margin-right: 20%;
    }

    .profanetitle3 h4 {
        font-size: 1em;
    }

    .profanetop {
        padding: 60px;
    }

    .profane-grid p {
        font-size: 3em;
    }

    .profane-grid h4 {
        font-size: 1em;
        margin-top: -30%
    }

    .wrapper img {
        max-width: 33vw;
        max-height: 30vw;
    }
    .wrapper {
        gap: 8px;
        margin-top: -120px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .profanesticker {
        top: 6%;
    }

    .profanetitle {
        top: -8%;
    }

    .profanetitle2 {
        top: 15%;
    }

    .profanetitle3 {
        top: 55%;
        margin-right: 40%;
    }

    .profanetitle3 h4 {
        font-size: 1.4em;
    }

    .profanetop {
        padding: 40px;
    }

    .profane-grid p {
        font-size: 5.4em;
    }

    .profane-grid h4 {
        font-size: 1.4em;
        margin-top: -30%
    }

    .wrapper {
        margin-top: -140px;
    }
}