.container {
    /*row = vertical*/
    /*coloumn = horizontal*/
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    justify-content: space-evenly;
    margin-bottom: 200px;
}

.linkContainer {
    /*row = vertical*/
    /*coloumn = horizontal*/
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    /*justify-content: space-evenly;*/
    margin-bottom: 200px;
}


:root {
    --card-height: 94vh;
    --card-width: calc(var(--card-height) / 1.5);
}

/*add card with "#[new card id]"*/
#card, #card2, #card3, #card4, #card5 {
    grid-column: 2/5;
    grid-row: 1/8;
    max-width: 100%;
    margin: auto;
    height: var(--card-height);
    width: var(--card-width);
    padding: 3px;
    position: relative;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    font-size: 1.5em;
    color: rgb(88 199 250 / 0%);
    cursor: pointer;
    font-family: math;
    transition: transform 1500ms;
    transform-style: preserve-3d;
}

.card-front, .card-back {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    backface-visibility: hidden;
    /*display: flex;*/
}

.frontWrapper {
    opacity: 1;
    transition: opacity 0.8s ease;
}

.card-front p {
    position: relative;
    margin: 0; /* Optional: Ensure no extra margin is pushing it out of view */
    padding: 8px; /* Optional: Add padding for spacing */
    font-size: 1.6em; /* Adjust the font size if needed */
    color: rgb(194 232 250);
    z-index: -2;
}


.card-back {
    transform: rotateY(180deg);
}

.card-front img,
.card-back img,
.card-front {
    width: 100%;
    object-fit: cover;
    backface-visibility: hidden;
}

.card-back img {
    margin-top: 60px;
}

.card-inner, .card-outer {
    background: #191c29;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

/*link texts on card 1*/
.text {
    /*display: inline-block;*/
    color: #9ebdce;
    font-size: 4.5vw;
    z-index: 1;
    text-decoration: none;
    margin-top: -25px;
    margin-left: 0px;
    box-sizing: border-box;
}



/*add flipCard[card number] per card*/
.flipCard, .flipCard2, .flipCard3, .flipCard4, .flipCard5{
    transform: rotateY(180deg);
}

.flipCard .frontWrapper,
.flipCard2 .frontWrapper,
.flipCard3 .frontWrapper,
.flipCard4 .frontWrapper,
.flipCard5 .frontWrapper{
    opacity: 0;
    /*transition: opacity 1.6s ease;*/
}


    /*--------------------------------------------------*/

/*site*/
body {
    min-height: 150vh;
    background: #212534;
    /*display: flex;*/
    align-items: center;
    /*flex-direction: column;*/
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
}

/*text font, size and color, link[number] for card3 project links*/
.linkContainer a {
    font-family: "math";
    color: rgb(0, 0, 0);
    font-size: 1.5vw;
    text-decoration: none;
    text-align: center;
    align-items: center; /* Center text vertically */
    background: rgba(255, 255, 255, 0.1); /* Optional: Subtle background */
    border-radius: 5px; /* Rounded corners */
    padding: 10px;
    transition: background 0.3s, color 0.3s; /* hover effect */
}



.abm {
    font-family: "math";
    color: rgb(194 232 250);
    font-size: 1.9vw;
    text-decoration: none;
}

.reader {
    width: 90%;
    height: 530px;
    margin-left: -3px;
    margin-top: 15px;
}