body {
    background-color: #ce9158;
    padding: 0;
    margin: 0;
    background-size: cover;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.cardcontainer {
    background-color: #eee;
    height: fit-content;
    margin: 0 auto;
    margin-bottom: 85px;
    max-width: 1105px;
    width: 80%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 25.5px 25.5px 42.5px 25.5px;
    /* Adjusted padding */
    box-shadow: 0px 4.25px 8.5px #444;
    /* Unchanged box-shadow */
}

.titlecontainer {
    text-align: center;
    max-width: 850px;
    /* Reduced from 1000px */
    margin: auto;
}

.title {
    font-size: 3.4rem;
    /* Reduced font-size */
}

.line {
    border-bottom: 2px solid #000;
    /* Unchanged border property */
    display: block;
    margin: 17px 0;
    /* Reduced margin */
}

@media only screen and (min-width: 701px) {
    .grid {
        display: grid;
        grid-auto-columns: 50% 50%;
        grid-template-areas: "a b";
        height: 212.5px;
    }
}

.grid>.grid-card {
    margin: 8.5px;
    /* Reduced margin */
    transition: transform 0.2s cubic-bezier(.1, .72, 0, .97);
    box-shadow: 0px 2px 5px 0px #555;
}

div.grid-card {
    filter: blur(0.85px) contrast(0.68);
    /* Unchanged filter */
    height: 100%;
    overflow: hidden;
}

.grid>.grid-card:hover {
    transform: scale(103%);
    /* Unchanged transform */
}

.starfsemi-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.3), rgba(117, 19, 39, 0.73)), url(../pics/chakra2.jpg);
}

.akashic-card {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.3), rgba(117, 19, 39, 0.73)), url(../pics/scrolls.jpg);
    grid-area: "b";
}

.grid>a {
    position: relative;
    text-decoration: none;
}

.cardtitle {
    color: white;
    position: absolute;
    bottom: 0;
    margin: 0 0 8.5px 17px;
    /* Adjusted margin */
    font-size: 2.55rem;
    /* Reduced font-size */
}

.infocontainer {
    max-width: 850px;
    /* Reduced from 1000px */
    margin: auto;
    height: fit-content;
}

.infospan {
    display: block;
    margin-bottom: 12.75px;
    /* Reduced margin */
    font-size: 1.36rem;
    /* Reduced font-size */
    line-height: 1.8rem;
    /* Adjusted line-height */
}

.outro {
    line-height: 1.19rem;
    /* Adjusted line-height */
    margin-left: 25.5px;
    /* Adjusted margin */
}

.bold {
    font-weight: 700;
    /* Unchanged font-weight */
    margin-top: 17px;
    /* Adjusted margin */
}

/* Responsive styles for different breakpoints */

/* Small screens (up to 600px) */
@media screen and (max-width: 700px) {
    .grid {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
        min-height: 300px;
    }
}

/* Medium screens (601px to 900px) */
@media screen and (min-width: 601px) and (max-width: 900px) {}

/* Large screens (901px to 1200px) */
@media screen and (min-width: 901px) and (max-width: 1200px) {}