/* storing some color variables to make adjustments easier */
:root {
    --bg-color: #F2F9FF;
    --card-bg: #C8E1FA;
    --text-color: #010D1A;
    --text-color-lt: #263340;
    --button-bg: #4D86BF;
    --button-text: var(--bg-color);
    --button-border: #26334020;
    --button-hover-bg: #5C94CC;
}

* {
    box-sizing: border-box;
}

/* set minimum height to viewport height so footer positions correctly */
html, body {
    min-height: 100%;
    margin: 0;
}

/* set font to Inter */
body {
    font-family: "Inter", sans-serif;
}

/* Wrapper class to control flex box. */
.wrapper {
    /* set minimum height so footer positions correctly even when there is not enough content in main */
    min-height: 100vh;
    padding: 1.5em 48px 1em;

    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    gap: 1.5em;

    background-color: var(--bg-color);
}

h1 {
    font-size: 3em;
    font-weight: 700;
    margin: 2rem 0 1rem 0;
    color: var(--text-color);
}

/* main, includes both UI cards and main paragraph */
main {
    /* flex grow on main positions footer to bottom when there is not enough content */
    flex-grow: 1;

    /* enable flex to enable flex sizing in children */
    display: flex;
    flex-flow: column nowrap;
}

/* percentage-based gap seems to look better when resizing window */
.card-container {
    display: flex;
    gap: 2%;
}

/* class for all 3 UI cards for uniform look */
.card {
    /* flex: 1 to size each card equally */
    flex: 1;
    padding: 0 0 1em 0;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    gap: 0.75em;

    border-radius: 16px;

    background-color: var(--card-bg);

    /* drop shadow to make the UI cards look more 3D */
    filter: drop-shadow(0.25em 0.25em 0.5em rgba(0, 0, 0, 0.5));
}

/*  Contain to crop image. Currently set to 50% of view port height.
    Seems like the a reasonable size for the UI card. */
.crop-container {
    height: 50vh;
}

/*  The images are all very tall and narrow, so it's hard to crop it in a way that looks nice.*/
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 16px 16px 0 0;
}

/*  Giving some left-right margin to everything in the UI card except the image.
    This is done so images can fill the entire horizontal space. */
.card > *:not(:first-child):not(:last-child) {
    margin: 0 16px;
}

.card > h2 {
    color: var(--text-color);
    font-size: 1.75em;
}

.card > p {
    color: var(--text-color-lt);

    /* flex-grow so the button will be properly positioned at the bottom regardless of UI box height relative to text box height. */
    flex-grow: 1;
}

/* making <a> a button directly. */
.card > a {
    /* display: block needed so <a> is not in-line */
    display: block;
    align-self: center;
    margin: 0.5em 0 0 0;
    padding: 0.5em 2em;
    border: 1px solid var(--button-border);
    border-radius: 8px;
    background-color: var(--button-bg);

    font-weight: 600;
    color: var(--button-text);
    text-decoration: none;

    /* drop shadow to make the button look 3D above card */
    filter: drop-shadow(0.1em 0.1em 0.2em rgba(0, 0, 0, 0.35));
    /* transition for hover animation, with easing */
    transition: all 0.3s ease;
}

/* Using a bit of color change and removing drop shadow on hover. */
.card > a:hover {
    filter: none;
    background-color: var(--button-hover-bg);
    color: #FFF;
}

/*  Tried a few text positioning, this one looks the best so far.
    Text blocks become hard to read when too wide, so I set it to 50% of view port.
    This works for most "reasonable" widths, but can still look weird if window size is really wide or narrow.
    If I had more time, I would set up break points, but that might be too much for this assignment. */
.mainParagraph {
    align-self: center;
    width: 50%;
    margin: 3rem 0 0 0;
}

/* make text size slightly bigger than default (1em). */
.mainParagraph > p {
    font-size: 1.25em;
    line-height: 125%;
}

/*  Push footer to bottom right.
    Note that footer will always be at the bottom even if content doesn't reach the full view port height (see above) */
footer {
    align-self: flex-end;
    font-style: italic;
}