/* Color palette */
:root {
    --yellow: #f0ff30;
    --purple: #8000ff;
    --white: white;
    --charcoal: #404040;
}

* {
    color: var(--white);
    line-height: 1.3;
}

body {
    background-color: var(--yellow);
    /* Place the header, main, and footer in a flexbox */
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    align-items: center;
}

header, footer {
    width: 96%;
    margin: 2%;
    padding: 2% 3%;
    /* background-color: var(--purple); */
    background-image: linear-gradient(
        #4000f0 0%,
        #8000b0 100%
    );
    /* Place the elements within the header and footer in a flexbox */
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 5%;
}

header p {
    text-align: right;
}

main {
    width: 96%;
    /* Place the cards in a flexbox */
    display: flex;
    flex-flow: row wrap;
    justify-items: end;
    justify-content: center;
}

.card {
    /* This initial width keeps three cards to a row */
    width: 30%;
    margin: 2vh 1%;
    padding: 3vh 2vh 2vh 2vh;
    background-color: var(--white);
    border: 0.2em solid var(--charcoal);
    /* Set position to act as a baseline for the h2's absolute positioning */
    position: relative;
    /* Place the elements in the card in a flexbox */
    display: flex;
    flex-flow: column;
    justify-content: left;
    gap: 1vh;
}

.card * {
    color: var(--charcoal);
}

.card h2 {
    position: absolute;
    display: inline;
    padding: 1%;
    /* Position the heading partially outside the card */
    top: -2.5vh;
    left: 1.5vh;
    background-color: var(--white);
    border: 0.2em solid var(--charcoal);
}

.card:hover {
    /* Ensure the animated enlarged code section is rendered in front of the other cards */
    z-index: 1;
}

code pre {
    /* Make the code snippets monospace like most code */
    font-family: monospace;
    /* Code wraps instead of overflowing */
    white-space: pre-wrap;
    padding: 1%;
    background-color: var(--white);
    border: 0.2em dotted var(--charcoal);
    /* Allows the user to select the entire text of the element with a single click */
    user-select: all;
    /* Part of the transition animation: transition will take 2 seconds */
    transition: 2s;
}

/* Part of the transition animation: on hover, the code area will get 40% larger */
code pre:hover {
    transform: scale(1.4);
}

/* Make the design responsive to differences in screen size */
@media (max-width: 1000px) {
    .card {
        width: 48%;
    }

    header {
        flex-flow: column;
    }

    header p {
        text-align: center;
    }
}

@media (max-width: 700px) {
    .card {
        width: 96%;
    }
}