@import url(./declarations.module.css);

/* Main Content */
main {
    display: flex;
    flex-direction: column;
}

section.intro {
    display: flex;
    flex-direction: column;
}

/* Cards Section */
section.cards-container {
    display: grid;
    column-gap: 3rem;
    row-gap: 2rem;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    margin-block: 3rem;
}

/* Section heading */
section.cards-container > h2 {
    font-size: var(--fs-lrg);
    font-weight: var(--fw-semibold);
}

div.card {
    /* Stye the card itself */
    background-color: var(--light);
    padding: 1rem;
    height: 10rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: 0.1s;
    position: relative;

    /* Style the heading in the card */
    > h3 {
        position: relative;
        font-size: var(--fs-lrg);
        margin-bottom: 0.5rem;
        width: fit-content;
        /* Styling the line that comes in on hover */
        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            width: 0%;
            background: var(--accent-orange);
            transition: width 0.2s;
        }

        &:hover {
            cursor: pointer;

            &::after {
                width: 100%;
            }
        }
    }
}

.big {
    text-align: center;
    font-size: var(--fs-massive);
    margin-block: 0.1rem;
    margin-inline: 20%;
}

#hl1{
    color: var(--rfds-dark-blue);
    border-bottom: 4px solid var(--rfds-light-blue);
}

#hl2{
    color: var(--rfds-light-blue);
    border-top: 8px solid var(--rfds-orange);
}

#hl3 {
    color: var(--rfds-orange);
}

/* Setting the cards into their grid positions */
#card-1 {
    grid-column: 1;
    grid-row: 1;
}

#card-2 {
    grid-column: 2;
    grid-row: 1;
}

#card-3 {
    grid-column: 1;
    grid-row: 2;
}

#card-4 {
    grid-column: 2;
    grid-row: 2;
}

#card-5 {
    grid-column: 1;
    grid-row: 3;
}

#card-6 {
    grid-column: 2;
    grid-row: 3;
}

#screenshot {
    align-self: center;
}

@media (max-width: 1230px) {
    body {
        width: 100%;
    }
    main {
        padding-inline: 10rem;
    }

    .navbar {
        width: 100%;
    }
}